Bigger tables, edits, and text from other languages
Cells that stretch across columns, totals rows, styling a whole column, showing what changed, and handling writing that runs right to left.
By the end you can
- Stretch a cell across columns or rows without breaking the table
- Add a totals row and style a whole column
- Show what was removed and what replaced it
- Handle right-to-left writing and names that mix directions
Easier if you did first
step 1 of 3
Stretching cells, totals and columns
Real tables are rarely a neat grid. Three attributes and two tags cover nearly everything else.
colspan makes one cell stretch across several columns. You use it for a heading that covers a group, like 'Cost' sitting above both 'Year one' and 'Year two'. rowspan does the same going down.
Here is the part to be careful with. Every row must still add up to the same number of columns, and a cell with colspan="2" counts as two. So when you stretch a cell, you delete the cell it replaced. Forget that, and the table grows a phantom extra column and everything below it shifts sideways.
The free checker at validator.w3.org tells you exactly which row does not add up.
<tfoot> is the totals row. Write it after tbody. The browser knows it is the footer from the tag, not from where it sits, so it stays put when a long table scrolls or prints.
<colgroup> with <col> lets you style a whole column at once. You need it because a column is not really a parent of its cells, so CSS cannot select one on its own.
Finish the table on the right: a stretched heading, a totals row, and a styled first column.
<table>
<caption>Hosting, two year quote</caption>
<colgroup>
<col class="plan-column" />
<col span="2" />
</colgroup>
<thead>
<tr>
<th scope="col" rowspan="2">Plan</th>
<th scope="colgroup" colspan="2">Cost</th>
</tr>
<tr>
<th scope="col">Year one</th>
<th scope="col">Year two</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Starter</th>
<td>GHS 600</td>
<td>GHS 550</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td>GHS 600</td>
<td>GHS 550</td>
</tr>
</tfoot>
</table>What these words mean
- colspan
- How many columns this cell stretches across.
- rowspan
- How many rows this cell stretches down.
- tfoot
- The totals row or rows of a table.
- colgroup and col
- A way to style whole columns, which CSS cannot do by itself.
- scope="colgroup"
- A heading that covers a group of columns rather than one.
- headers
- On a cell: the ids of the headings that apply to it, for tables too complicated for scope.
Easy to get wrong
Leaving the old cell in place after adding colspan
Remove the cell the stretch replaced
colspan="2" already fills two columns. Keep the old cell too and the row has one column more than the others, which pushes everything below out of line.
Putting the totals in the last tbody row
Put them in tfoot
A footer is announced as a summary and stays in place when the table scrolls or prints. In the body it is just another row of data that happens to be last.
What we check
- A header spans more than one column
- The Plan header spans both header rows
- There is a footer row with its own header cell
- The footer carries the totals
- The columns are grouped with colgroup
- The first column is styled through its col
- The data rows are still in tbody