SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Struggling to understand colspan

    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:

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

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2010
    Location
    Brighton, UK
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  4. #4
    SitePoint Zealot
    Join Date
    Sep 2010
    Location
    Brighton, UK
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    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.

  7. #7
    SitePoint Zealot huit's Avatar
    Join Date
    Nov 2009
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code HTML4Strict:
    <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
    Last edited by huit; Feb 28, 2011 at 14:55. Reason: Added table solution + added widths to last row

  8. #8
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Guys,

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

    Kyle


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •