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

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.

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?

 

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.

 

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.