Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Help Style html table

Posted on 2014-04-10
12
Medium Priority
?
254 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 50

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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 50

Accepted Solution

by:
dbrunton earned 2000 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 50

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 50

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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying 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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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.

916 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