?
Solved

Help Style html table

Posted on 2014-04-10
12
Medium Priority
?
246 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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 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 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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

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?
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

762 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