Tables and Media Details

Colgroup Highlight

Describe Columns Once

A compact status table uses colgroup and col elements so the label and value columns can be treated differently.

Program

Column groups let a table describe columns before rows arrive. That keeps repeated column intent out of individual cells.

colgroup_highlight.html
Visuals: captured from real browser rendering
<table>
  <colgroup><col class="label-col"><col class="value-col"></colgroup>
  <tr><td>Plan</td><td>Ready</td></tr>
  <tr><td>Tests</td><td>Passing</td></tr>
</table>

  1. Create the status table.

    An empty table frame appears.
    The table starts before any column definitions or rows exist.

  2. Open a group for column definitions.

    The table still has no rows, but column metadata has begun.
    Column definitions do not render visible cells by themselves.

  3. Define the label column.

    The first column is marked as the label column.
    A col can describe a whole column before any row cells arrive.

  4. Define the value column.

    The second column is marked as the value column.
    The second col applies to the second cell in each row.

  5. Render rows that use the column definitions.

    Rows appear with label and value columns styled consistently.
    The earlier col elements influence every row column.
colgroup A colgroup wraps one or more column definitions.
col A col element applies metadata or presentation to a table column.