Solved

Help Style html table

Posted on 2014-04-10
12
234 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 48

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
Industry Leaders: 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!

 
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 48

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 48

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 48

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

Suggested Solutions

Title # Comments Views Activity
Change static entered data to dynamic with counter 5 36
Html split(text) Part2 6 23
Making Table Thru ASP Response.write 5 19
Web page design problem 3 18
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

733 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