1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Table column width with table-layout fixed - col vs th

Discussion in 'CSS' started by tomasz86, Jun 27, 2016.

  1. #1
    I have always been wondering if there is any difference between using col or th to set column width when table-layout is set to fixed.
    SEMrush
    HTML:
    
    <table>
      <col>
      <col>
      <col>
      <thead>
        <tr>
          <th></th>
          <th></th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
    
    Code (markup):
    CSS (col): http://codepen.io/tomasz86/pen/OXpPqK
    
    table {
      table-layout: fixed;
      width: 100%;
    }
    
    col {
      width: 33%;
    }
    
    Code (markup):
    CSS (th): http://codepen.io/tomasz86/pen/YWZPMd
    
    table {
      table-layout: fixed;
      width: 100%;
    }
    
    th {
      width: 33%;
    }
    
    Code (markup):
    Is there any difference between the two? At first sight there seems to be none... maybe when using colspan?
     
    tomasz86, Jun 27, 2016 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,327
    Likes Received:
    1,821
    Best Answers:
    244
    Trophy Points:
    515
    #2
    Well first up, COL belong in a tag called "colgroup". You don't just dump them in blindly. (though the specification flip-flops on this every five blasted minutes -- I'm starting to say "thanks W3C" the way right wing-nuts say "Thanks Obama")

    Second, legacy IE will not apply anything you say in col for width or style to the columns unless you use the attributes. Worse, IE WILL apply CSS applied to col to all elements, but Nyetscape... sorry, "Firefox" wll not. You want to see the pinnacle of why FF sucks at tables, look up "Bugzilla 915". A bug in gecko that's so old, if it were a person it would be legal to make sweet sweet love to it in all 50 states. The way "open source" REALLY fixes bugs (which is to say only if it does something flashy or is hot and trendy) I don't plan on seeing that resolved until it's old enough to qualify for social security. Just like all the other damned bugs in gecko's HTML 4 implementation -- which is why them diving into the hot and trendy HTML 5 shit when they didn't even have 4 working right pissed me off!

    Honestly -- and this is just my opinion, COL and COLGROUP should probably go the way of the dodo. They only really existed to let you use attributes to style all the columns... and since those attributes mean presentation they have ZERO business in a markup specification. That said, the CHAR and CHAROFF attributes are damned handy and has no working CSS equivalent... there's a reason it was left in HTML 4 Strict, even though 5 now says to use CSS instead... and it's like "HOW?"

    But again, cross browser implementation of COL is really hit or miss.

    The big question I'd ask is "which way uses less markup when properly formed" -- properly formed meaning using ALL the tags you are SUPPOSED to use. In that case it's easy, if you have a THEAD, target the thead's cells. If it lacks a thead, target the tbody's cells. Don't waste extra markup on nothing.

    But if you want character alignment, well... it's less code to state it once on COL than on every blasted TD.
     
    deathshadow, Jun 28, 2016 IP
  3. tomasz86

    tomasz86 Greenhorn

    Messages:
    24
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    18
    #3
    Thank you for a detailed explanation.

    I only need to set width and had been using col before but later realized that the same result could be achieved simply by applying it to th. In this case I will just continue to use th and not use col altogether.
     
    tomasz86, Jul 10, 2016 IP