Encodera

Thanks for reading!

Donate to the site — we work hard for you.

HTML & CSS reference

<td>, <th>

Table cells: `<td>` holds data, `<th>` is a header cell.

Syntax

<th scope="col">Header</th> <td colspan="2">Cell</td>

Attributes

ParameterTypeDescription
colspannumberHow many columns the cell spans.
rowspannumberHow many rows the cell spans.
scopecol | rowOnly for `<th>`. Whether the header belongs to a column or a row.

Examples

Row and column headers:

<table>
  <tr><th></th><th scope="col">Small</th><th scope="col">Large</th></tr>
  <tr><th scope="row">Latte</th><td>$3.50</td><td>$4.50</td></tr>
  <tr><th scope="row">Mocha</th><td>$4.00</td><td>$5.00</td></tr>
</table>

Merged cells:

<style>
  td { border: 1px solid silver; padding: 4px 10px; }
  table { border-collapse: collapse; }
</style>
 
<table>
  <tr><td rowspan="2">Monday</td><td>Morning</td></tr>
  <tr><td>Evening</td></tr>
  <tr><td colspan="2">Closed on Sunday</td></tr>
</table>

Notes

<th> is bold and centred by default. Do not fake a header with a styled <td>: it is <th> that links cells to their headers for screen readers.

See also

Related recipes

In the tutorial

  • Tables — Tables in HTML — rows and cells, column headers, thead, tbody, tfoot and caption, merging cells.

Thanks for reading!

Donate to the site — we work hard for you.