Void element.
Usecase: specifying the width of the column.
This exists due to CSS selectors pattern-matching onto trees,
but tabular elements are not siblings or descendants within the DOM tree.
thead Table Head
After colgroup,
col,
caption.
Before tbody
and tfoot.
Specifies the column headers.
All attributes (besides global) deprecated.
See second figure for a complex example using different spans.
tr Table Row
Direct child of thead,
tbody,
tfoot.
Direct parent of th
and td.
One per / defines the row.
Example 1
Head
Head
Head
Head
Head
Data #1
Data #2
Data #3
Head
Data #1
Data #2
Data #3
Head
Data #1
Data #2
Data #3
th Table Header
Only in tr.
A leaf node for metadata and the "key" data for the row,
column, etc. specified via:
abbr
accessibility oriented, providing an
abbreviated label, when cell is referenced.
headers
space-separated id
for own headers.
scope
row|col|rowgroup|colgroup -
omitted when unambiguous e.g. first of a body tr,
or in thead with no multiple span etc.
colspan
how many columns this header spans
(strict. positive integer, defaults to 1).
rowspan
how many rows this header spans
(strict. positive integer, 0 = until the end,
defaults to 1).
tbody Table Body
Contains the main data rows.
tr as direct children of table will be encapsulated
within a generated tbody by the browser,
as it is a valid tag omission
(similar to document body omission).
All attributes (besides global) deprecated.
Multiple in sequence can be used, sub-dividing the table .
td Table Data Cell
Only in tr.
The leaf/terminal node of the table, containing the actual data.
It may override colspan
and rowspan to "merge" multiple cells
(notable use-case: using tfoot,
with each row provided a singleton Data Cell spanning the entire row,
as a way to include paratext outside of the caption).
tfoot Table Footer
Less used. Can be used semantically to
contain aggregations (such as "Total" etc.)
from the main body rows.
All attributes (besides global) deprecated.
Must appear after any other element in the table.
This used to be the opposite, hence
sometimes incorrectly found before tbody.
Example 2
Transaction
Currency
Ex-Europe
Europe
USD
JPY
EUR
CHF
Tx #1
Tx #2
Tx #3
Styling table Table
Tables that need a head or foot can be styled
height: fit-content,
in order to make it dense.
Tables without head or foot can be displayed flex column,
and instead transfer the display table on the inner
thead,
tbody,
tfoot.
Then, using an empty tfoot with
flex-grow: 1,
the table content will shrink to the minimal size
while the table can be styled with a color background, etc.
and empty space fills the remaining part.