Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 258
  • Last Modified:

Help Style html table

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
erikTsomik
Asked:
erikTsomik
  • 4
  • 4
  • 4
1 Solution
 
Kim WalkerWeb Programmer/TechnicianCommented:
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
 
erikTsomikSystem Architect, CF programmer Author Commented:
No I want the first column be merged withe second column
0
 
dbruntonCommented:
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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Kim WalkerWeb Programmer/TechnicianCommented:
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
 
erikTsomikSystem Architect, CF programmer Author Commented:
I just want the colmn 1 header to appear wherever the 1st 1/6 and 2st 12/12
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
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
 
erikTsomikSystem Architect, CF programmer Author Commented:
it does not align

http://jsfiddle.net/3hRFs/9/
0
 
dbruntonCommented:
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
 
erikTsomikSystem Architect, CF programmer Author Commented:
THat basically wehat I need the only problem is I am on the nested coldfusion loop


<cfloop
output header
<cfloop
output column
0
 
dbruntonCommented:
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
 
Kim WalkerWeb Programmer/TechnicianCommented:
You'll want to remove the margins from your H3 element.
h3 { margin: 0; }

Open in new window

0
 
dbruntonCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 4
  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now