understanding colspan

occas · Feb 1, 2004

i wish i could figure out exactly how the colspan(rowspan) works. i will use the following example:
i want a table with 3 rows.
row 1: 100px,550px,100px
row 2: 100px,650px
row 3: 100px,161px,161px,161px,162px

all rows have a width of 750.

i get confused with how exactly you determine the colspan in this case. for example, the 650px in row 2 spans 2 columsn above and 4 below. does that mean you go with 4 as a colspan for it?

the 550px in row 1. it spans 3 columns in row 3 and partially the 4th column in row 3. does it have a colspan of 4?

the last column in row 3 spans 1 and partially 2 columns from the end in row 1. is it a colspan of 2?

if i ever figure this out, well, praise be.
ty.

simonchristieis · Feb 2, 2004

tricky one this - you will have to use colspan in the botton row to allow the 100px width in the top.

row 1: 100px,550px,100px
row 2: 100px,650px
row 3: 100px,161px,161px,161px,162px

would be

<table>
<tr>
<td width="100"></td>
<td colspan="4" width="550"></td>
<td width="100"></td>
</tr>
<tr>
<td width="100"></td>
<td colspan="5" width="650"></td>
</tr>
<tr>
<td width="100"></td>
<td width="161"></td>
<td width="161"></td>
<td width="161"></td>
<td colspan="2" width="162"></td>
</tr>
</table>

occas · Feb 2, 2004

why is the 650 one a colspan of 5? it spans at most 4 columns. that is what confuses me. the bottom 4 columns total 650. ty.

occas · Feb 2, 2004

that didn't work for me. ty.

simonchristieis · Feb 2, 2004

Occas,

You will have to do this because the last cell of the bottom row has a width of 162, whereas the top rows last cell has a width of 100, if you did not split the last cell on the bottom row then the table would not format properly.

Now you have a table with column widths of
Row1 Row2 Row3
100 100 100 100
161 550 650 161
161 - - 161
161 - - 161
62 - - 162
100 100 - -

The dashes show the spans

6 columns - therefore row 2 has colspan=5.

There, much clearer now I hope ;0$

Simon

BabyJeffy · Feb 2, 2004

First off for Row 3 you say you want 100px,161px,161px,161px,162px -- but this adds up to 745px (not 750px as you mentioned in your initial post). I have assumed you just made a simple addition error and created a solution where the last column in row 3 is 167px (I added 5px extra):

Code:

       100px  161px  161px  161px   67px    5px     95px

Row 1: 100    <--------- 550 ---------->    <-- 100 --->

Row 2: 100    <----------------- 650 ------------------>

Row 3: 100    161    161    161     <------ 167 ------->

This corresponds to the following table definition:

Code:

<tr id=&quot;row1&quot;>
<td width=&quot;100&quot;>100px</td>
<td colspan=&quot;4&quot;>550px</td>
<td colspan=&quot;2&quot;>100px</td>
</tr>

<tr id=&quot;row2&quot;>
<td width=&quot;100&quot;>100px</td>
<td colspan=&quot;6&quot;>650px</td>
</tr>

<tr id=&quot;row3&quot;>
<td width=&quot;100&quot;>100px</td>
<td width=&quot;162&quot;>161px</td>
<td width=&quot;161&quot;>161px</td>
<td width=&quot;161&quot;>161px</td>
<td colspan=&quot;3&quot;>167px</td>
</tr>

You will probably wish to add a final row that assists the browser in defining the table widths (depending on the browser you are using):

Code:

<tr id=&quot;row4&quot;>
<td width=&quot;100&quot;></td>
<td width=&quot;162&quot;></td>
<td width=&quot;161&quot;></td>
<td width=&quot;161&quot;></td>
<td width=&quot;67&quot;></td>
<td width=&quot;5&quot;></td>
<td width=&quot;95&quot;></td>
</tr>

This also lets you remove the specific widths from rows 1 through 3. The final table in a web page "test harness":

Code:

<html>
<head>
<title>Table test</title>
</head>

<body>
<table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; width=&quot;750&quot;>
<tr id=&quot;row1&quot;>
  <td>100px</td>
  <td colspan=&quot;4&quot;>550px</td>
  <td colspan=&quot;2&quot;>100px</td>
</tr>
<tr id=&quot;row2&quot;>
  <td>100px</td>
  <td colspan=&quot;6&quot;>650px</td>
</tr>
<tr id=&quot;row3&quot;>
  <td>100px</td>
  <td>161px</td>
  <td>161px</td>
  <td>161px</td>
  <td colspan=&quot;3&quot;>167px</td>
</tr>
<tr id=&quot;row4&quot;>
  <td width=&quot;100&quot;></td>
  <td width=&quot;162&quot;></td>
  <td width=&quot;161&quot;></td>
  <td width=&quot;161&quot;></td>
  <td width=&quot;67&quot;></td>
  <td width=&quot;5&quot;></td>
  <td width=&quot;95&quot;></td>
</tr></table>
</body>
</html>

I hope this solves your problem.

Jeff

occas · Feb 2, 2004

i used the table from your first response, simon. it doesn't work unless i am doing something wrong.

also, in your last reply. the numbers :
100
161
161
161
62
100

what do they represent? i appreciate this. this is my achilles heel.

simonchristieis · Feb 2, 2004

check out babyjeffy's post - it says the same as mine, but says it a little clearer.

occas · Feb 2, 2004

i have been looking and looking at this. is there a good link or links i can see that is somewhat of a tutor for this? not the easy ones to do. i find plenty of them. of course, this is probably easy to you. i'm missing something here.

simonchristieis · Feb 2, 2004

All colspan/rowspan 's do is join table cells together.

Dont try and confuse yourself by thinking to much into it.

Here is a simple editor

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table

try changing the colspan of one of the tables td tags and see what happens.

the only reason the above example is a little tricky is because a table is a grid, and the column widths dont quite match up (top row - last cell = 100 width / bottom row - last cell 162 width)- so you have to add a new column to compensate for this.

Good luck

Simon

BabyJeffy · Feb 2, 2004

I guess it just comes down to experience. I can't say that I learned it from a book... just many years finding solutions to complex layout problems (before CSS was more widely used mostly).

My "rule of thumb" has always been to look at what appears to be the most complex row (or the row with the most columns in it) and then work back from there (adding extra columns as I find the need).

I always find the best approach begins with the pen and paper. Planning tables on paper in advance really makes things appear more straight forward (for me at least).

If someone does manage to come up with a nice list of "tricky" table definition problems related to colspan (and rowspan) as occas asks, I'm sure they would make a fine addition to the FAQ section here!

Jeff

occas · Feb 2, 2004

i hate to keep bugging. why do you have to create a cell just 5px wide?

if i have this :
100,550,100
100,650
100,162,162,162,164

why won't a colspan of 4 for the 550 cell work? i am looking at the bottom row as my "key". it spans 4 cells there.

then the 650 cell spans exactly 4 also.

for the bottom row, the last cell spans 2 columns of the top row.

i think if i ever understand this one, a light will be on.
ty.

occas · Feb 2, 2004

this is what i got to work. but not totally sure why.

100,550 colspan 3,100
100,650 colspan 6
100,162,162,162,64 colspan 2

like i said don't know why.

BabyJeffy · Feb 2, 2004

Using your changed column widths, this is how I look at your table layout:

Code:

       100px  162px  162px  162px   64px  100px

Row 1: 100    <---------- 550 --------->  100

Row 2: 100    <------------ 650 -------------->

Row 3: 100    162    162    162     <-- 164 -->

You need to satisfy the condition that you can build the columns of every row by combining (spanning) other columns (from the row you choose as your "key" row).

If you colspanned the 650 in row 2 based on the last 4 columns of row 3, then how would build row 1 (since you chose to base row 2 on the column widths of row 3, you must also base all other rows on the columns widths of row 3)?

I can't think of another way to explain this. Maybe this is an opportunity for someone with "instructor" in their title to step in?

All the best,
Jeff

occas · Feb 2, 2004

i don't know if this makes sense. but the colspan of 6 for the 650 cell. it spans 162,162,162,64 and an "assumed" 100 on the bottom row. and an extra column above it??
the 550 spans just 4 cells. doesn't reach the "assumed" 100 cell in bottom row. by the way, colspan 3 or 4 works for the 550 figure.

simonchristieis · Feb 2, 2004

you have 7 columns in total

row 1

cell 1 - no colspan
cell 2 - colspan = 4
cell 3 - colspan = 2
total 7 columns

row 2

cell 1 - no colspan
cell 2 - colspan = 6
total 7 columns

row 3
cell 1 - no colspan
cell 2 - no colspan
cell 3 - no colspan
cell 4 - no colspan
cell 5 - no colspan
cell 6 - colspan = 2
total 7 columns

does that make sense?

occas · Feb 2, 2004

makes sense except for 1 thing. in row 1. the third cell. it is 100 in length. i don't see it spanning any other cells?

occas · Feb 2, 2004

i'll try another learning question here. in the first column of the first row. i insert what is a user control(ascx) that is a menu. it pushes the first row quite a bit down the page. now in that first row and all other rows, i want to put data that is on a line. but because the first row is about 150 pixels high or so, i can't do it.

is this a case for another table? i know i can do that because i have done that before. just have a table with one row and two columns. the second column's cell is another table.

my real question is this bad coding? i want to do this as good as i can. like i said, i have done it as i mentioned before but my main goal is to become more efficient. thank you all for the help.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

understanding colspan

Technical User

Programmer

Technical User

Technical User

Programmer

Programmer

Technical User

Programmer

Technical User

Programmer

Programmer

Technical User

Technical User

Programmer

Technical User

Programmer

Technical User

Technical User

Similar threads

Log in

Part and Inventory Search

Sponsor