Default setup
Tables need to have the class matrix
to look like this. All tables need to be properly constructed with thead
and tbody
. Odd and even rows have alternating colors.
Column header | Column header | |
---|---|---|
Row header | Odd row | Odd row |
Row header | Even row | Even row |
Row header | Odd row | Odd row |
<table class="matrix">
<thead>
<tr>
<th></th>
<th>Column header</th>
<th>Column header</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row header</th>
<td>Odd row</td>
<td>Odd row</td>
</tr>
<tr>
<th>Row header</th>
<td>Even row</td>
<td>Even row</td>
</tr>
<tr>
<th>Row header</th>
<td>Odd row</td>
<td>Odd row</td>
</tr>
</tbody>
</table>
Numeric data
If your table contains numeric data you might want to align them on the right side. You can do this either per cell td.numeric
, per row tr.numeric
or per column col.numeric
.
Column header | Column with class numeric | |
---|---|---|
Row with class numeric | 1234 | 1234 |
Cells with class numeric | 1234 | 1234 |
<table class="matrix">
<colgroup>
<col>
<col>
<col class="numeric">
</colgroup>
<thead>
<tr>
<th></th>
<th>Column header</th>
<th>Column with class <i>numeric</i></th>
</tr>
</thead>
<tbody>
<tr class="numeric">
<th>Row with class <i>numeric</i></th>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<th>Cells with class <i>numeric</i></th>
<td class="numeric">1234</td>
<td class="numeric">1234</td>
</tr>
</tbody>
</table>