Tables

All table rules are included in wexa.css — no additional stylesheet required. Tables are styled by default: striped rows, distinct header and caption, full-width layout. Colors adapt to light and dark mode automatically.

Default table

A standard data table uses <thead>, <tbody> and optionally <caption>. The caption appears below the table. Even rows receive an alternate background. Add scope attributes on header cells for accessibility.

Table 1: A caption placed below the table.
#	First name	Last name	Role
1	Alice	Martin	Developer
2	Bob	Dupont	Designer
3	Clara	Leroy	Manager

<table>
    <caption><span>Table 1:</span> Caption text.</caption>
    <thead>
        <tr>
            <th scope="col">Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Cell</td>
        </tr>
    </tbody>
</table>

Variables

Table appearance is controlled by the following variables:

Variable	Role
`--table-border-color`	Color of all table borders
`--table-border-width`	Thickness of all table borders
`--table-cell-bg-color`	Default background color of cells
`--table-row-stripped-bg-color`	Background color of even rows
`--table-head-bg-color`	Background color of `thead` cells
`--table-head-fg-color`	Text color of `thead` cells
`--table-caption-bg-color`	Background color of `caption`
`--table-caption-fg-color`	Text color of `caption`

Grid layout

Adding role="grid" sets a fixed table layout where all columns share equal width based on the total table width. Long cell content is truncated with word-wrap rather than expanding the column. Use this role for data grids with many columns.

Table 2: Equal-width columns with `role="grid"`.
#	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<table role="grid">
    ...
</table>

Table with footer

Use <tfoot> to add a footer row — typically for totals or summary values. Footer cells receive a top border to separate them visually from the body rows.

Item	Quantity	Unit price	Total
Widget A	3	12.00	36.00
Widget B	5	8.50	42.50
Total			78.50

<table>
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>
        <tr>
            <th scope="row" colspan="3">Total</th>
            <td>78.50</td>
        </tr>
    </tfoot>
</table>

Forced dark mode

Wrap a table in a <div class="dark"> to force dark mode colors on that table regardless of the current page theme.

Table 3: Forced dark mode via `div.dark`.
#	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<div class="dark">
    <table role="grid">
        ...
    </table>
</div>

Presentation layout

Use role="presentation" on a table used purely for visual layout — not for tabular data. All borders and background colors are removed. Screen readers will not announce it as a data table.

Left column content

Right column content

<table role="presentation">
    <tbody>
        <tr>
            <td>Left column</td>
            <td>Right column</td>
        </tr>
    </tbody>
</table>