#todayilearned

by @jm3 · aka John Manoogian3

Frequent, bite-size mini-milestone updates as I fast-forward merge* my front-end web development skills up to 2019 levels. Learn more

A little-known way to style Table Columns in CSS

Posted at — Jul 12, 2019

The primary (only) grouping for table cell data in HTML are rows, not columns, much to the consternation of spreadsheet users. But! HTML also contains a seldom-seen <col> marker element, to be inserted at the beginning of the table, once per desired column. It doesn’t wrap <td> content, the way that <tr> does — it’s just a weird, forlorn magical orphan that then lets you select vertical regions of your table.

Selecting vertical table regions with <col> markers

<table>

  <!-- strange, non-semantic column markers-->
  <col>
  <col>

  <!-- table row -->
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>

</table>

Click “HTML” or “SCSS” below to view this in action

Why would you do this? I don’t exactly know. I think it’s an older holdover from a table-based world. The current prevalent way of doing this is selecting td:nth-child(2)

The conventional way: using td:nth-child(2)