Struggling to understand colspan

[kyllle]

Hi all,

Since I delved into web design during the css times Iv pretty much managed to miss out on tabular layout and now Im struggling to understand colspan and hope someone can enlighten me.

Iv got this 3 row table:

<table width="600" bgcolor="grey" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="600" colspan="3" bgcolor="#DF0DC7">text</td>
    </tr>
	
	<tr>
		<td width="425" bgcolor="#099F47" colspan="2">text</td>
		<td width="175" bgcolor="#ff0000">text</td>		
	</tr>
	
	<tr>
		<td width="50" bgcolor="#343434">text</td>
		<td width="500" bgcolor="#dedede">text</td>
		<td width="50" bgcolor="#09249F">text</td>
	</tr>
	
</table>

I understand that the first row has to span across the 3 columns in the 3rd row, but how do I make the 2nd and 3rd row columns the size iv assigned them?

Thanks

Kyle

[goldfidget]

Hi Kyle,

As far as I can see you're using your colspan correctly, it's your width attributes that are out of whack.

The thing with tables is they line up horizontally and vertically, so you can't tell the last td in the second row to be width 175 and the last td in the third column to be width 50, they have to be the same otherwise the browser will try to come to a compromise solution.

You also shouldn't really be using width attributes any more, use a style attribute, eg <td style="width:50px"> to set widths on things. It generalises better.

Also, I'm sure you know that tables should only really be used for tabular data, not global layout, for a whole lot of good reasons that I'm sure you already know about

Hope this helps.

[kyllle]

Hi Goldfidget,

Thanks for the reply, Im coding an email at the moment and have been trying out a few different ways of using tables to code it, I then tried to just have 1 table with the multiple tale rows and various table columns then just couldnt understand how i could use colspan to make the table widths size the way I wanted them to, thanks for your reply!

[goldfidget]

Ah, I see, an email template, you're storming the castle then

I'd suggest nested tables for this, one table for your global layout (sidebar, margins, content) then nested ones for the stuff inside. Don't bother trying to make one table do everything, it'll get unpredictably mangled.

Oh, and do please disregard all that stuff I just said about the style attribute

[kyllle]

indeed i am

i usually just go for nested tables, but thought id try something different this time but really whats the point!

thanks again!!

[Stevie D]

As Goldfidget says, your columns have to be the same all the way down. To get different widths in different rows, you need to draw imaginary lines up and down from each cell division in every row, and then merge/span them as appropriate.

So what you need are widths: 50 | 375 | 125 | 50

and then a table with
c o l s p a n = 4
colspan=2|colspan=2
td | colspan=2 | td

That should give the correct layout.

[huit]

Colspan makes a table cell take up the space of two cells, but it will always be equal to the width of the two cells above/below it since tables are, well, tables and force each cell to line up by row or column by forcing the width/height.

425 ≠ 550 (50+500)
AND
175 ≠ 50
~~~

If you really need the second and third rows to be different ratios either make the third row it's own table so its not restricted/forced to the size of row two...

or you could find the lowest common denominator (5px wide I think) and work with a few dozen table "cells" divvied up proportionally in each row.

EDIT: Crazy Table Solution

<table width="600" bgcolor="grey" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="120" bgcolor="#DF0DC7">text</td>
    </tr>
 
	<tr>
		<td bgcolor="#099F47" colspan="85">text</td>
		<td bgcolor="#ff0000" colspan="35">text</td>		
	</tr>
 
	<tr>
		<td bgcolor="#343434" width="50" colspan="10">text</td>
		<td bgcolor="#dedede" width="500" colspan="100">text</td>
		<td bgcolor="#09249F" width="50" colspan="10">text</td>
	</tr>
 
</table>

colspan.gif

[kyllle]

Hi Guys,

Thanks loads for the tips and advice, really very helpful!

Kyle