Solved

Help Style html table

Posted on 2014-04-10
12
230 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
  • 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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Accessing specific element - DOM PHP HTML 8 35
GET error with Font Awesome 3 16
Need output in powershell ( Vertical format) 2 22
Non-Resizable Pharagraph 2 7
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…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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…

838 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