Solved

Help Style html table

Posted on 2014-04-10
12
240 Views
Last Modified: 2014-04-16
I need to build the table where the first column span rows and takes the spaces of first 2 column

That what I am currently have

http://jsfiddle.net/3hRFs/6/
0
Comment
Question by:erikTsomik
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 4
12 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39992491
I don't understand. What do you mean by "takes the spaces of first 2 column?" Do you want the first column to be wider and push the second column to the right?
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 39992494
No I want the first column be merged withe second column
0
 
LVL 49

Expert Comment

by:dbrunton
ID: 39992522
Are you talking merging the column with John in it with the column with all of the numbers?

Or possibly something like this - I've rewritten your header row and the first two table rows below.  This merges the first two cells of your header row.  Cut and copy them into your code and see how it works.

<tr>
<th colspan="2"></th>
<th>1st 1/6</th>
<th>2st 12/12</th>
</tr>

<tr>
<td rowspan="12" style="width:10%"><h3><b>John </b></h3</td>
<td>1</td>
<td>Test1</td>
<td>Test1</td>
</tr>

<tr>
<td>1</td>
<td>Test1</td>
<td>Test1</td>
</tr>

Open in new window


You can also practice at http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_th_colspan
0
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 
LVL 22

Expert Comment

by:Kim Walker
ID: 39992604
The second column is filled with numbers. If you merge columns one and two, you'll have the same results as you would if you just eliminated column two.
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 39992691
I just want the colmn 1 header to appear wherever the 1st 1/6 and 2st 12/12
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39992703
Do you want the word "John" to move to the top of the first column and line up with 1st 1/6 and 2st 12/12? If so, add "vertical-align: top;" to the style for that cell.
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 39992761
it does not align

http://jsfiddle.net/3hRFs/9/
0
 
LVL 49

Accepted Solution

by:
dbrunton earned 500 total points
ID: 39992797
You mean like this?

SampleIf so try the code below

<tr>
<th colspan="2"><h3><b>John </b></h3></th>
<th>1st 1/6</th>
<th>2st 12/12</th>
</tr>

<tr>
<td rowspan="12" style="width:10%"></td>
<td>1</td>
<td>Test1</td>
<td>Test1</td>
</tr>

<tr>
<td>1</td>
<td>Test1</td>
<td>Test1</td>
</tr>

Open in new window

0
 
LVL 19

Author Comment

by:erikTsomik
ID: 39992889
THat basically wehat I need the only problem is I am on the nested coldfusion loop


<cfloop
output header
<cfloop
output column
0
 
LVL 49

Expert Comment

by:dbrunton
ID: 39992946
Are you outputting columns or rows?

You've got output column or do you really mean row as in

abc --> 1st row
abc -->  2nd row
abc -->  3rd rwo
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39993004
You'll want to remove the margins from your H3 element.
h3 { margin: 0; }

Open in new window

0
 
LVL 49

Expert Comment

by:dbrunton
ID: 39993054
And do you really need four columns?

It seems that if you use only three there are no problems - any reason for the blank first column?
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question