pelicin › web › HTML

HTML Tags: Tables

The only essential things on this page are:

  • <table>, <tr>, <th>, <td>
  • colspan and rowspan attributes

These are the HTML tags you use to make tables.

TagTypeDescription
<table>BlockRepresents a table
Rows and cells
<tr>OtherRepresents a table row
<th>OtherRepresents a table header cell
<td>OtherRepresents a table data cell
Row groups
<thead>OtherDefines the row group that comprises the table's header (column header rows)
<tbody>OtherDefines the row group that comprises the table's body
<tfoot>OtherDefines the row group that comprises the table's footer (summarys rows)
Column group
<colgroup>OtherDefines a column group
<col>OtherDefines a column that is part of a column group
Caption
<caption>OtherAdds a table caption

<table>

Represents a table.

<table>
  <tr>
    <th>No.</th>
    <th>Name</th>
    <th>Address</th>
  </tr>
  <tr>
    <td>1</td>
    <td>John Doe</td>
    <td>Sydney, Australia</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Takara Tomy</td>
    <td>Kyushu, Japan</td>
  </tr>
</table>
| LIVE PREVIEW
No. Name Address
1 John Doe Sydney, Australia
2 Takara Tomy Kyushu, Japan

<tr>

Represents a table row (row of cells in table).

<th>

Defines a table header cell.

Common attributes
  • colspan=[...] — how many columns the cell extends to
  • rowspan=[...] — how many rows the cell extends to
Obscure attributes
  • abbr=[...] — short abbreviated description of the cell's content (e.g. for screen readers)
  • scope=[...] — adds semantic info: what's the scope of the header cell. Can be:
    • row (the header is associated with this row)
    • col (the header is associated with this column)
    • rowgroup (the header is associated with a group of rows)
    • colgroup (the header is associated with a group of columns)
    • auto (the default value)
  • headers=[...] — adds semantic info: what are the id's of the this cell's parent <th id="..."> cells (separated by space).
<table>
  <tr>
    <th id="name" scope="colgroup" colspan="2">Name</th>
  </tr>
  <tr>
    <th scope="col" headers="name">First Name</th>
    <th scope="col" headers="name">Last Name</th>
  </tr>
</table>
| LIVE PREVIEW
Name
First Name Last Name

<td>

Defines a table data cell.

Common attributes
  • colspan=[...] — how many columns the cell extends to
  • rowspan=[...] — how many rows the cell extends to
Obscure attributes
  • headers=[...] — adds semantic info: what are the id's of the this cell's parent <th id="..."> cells (separated by space).
<table>
  <tr>
    <td colspan="2" rowspan="2" style="background-color: #ffdddd">1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
| LIVE PREVIEW
1 2
3
4 5 6

<thead>, <tbody>, and <tfoot>

Add semantics: which rows are part of the table header, table body, and table footer. (On their own they don't do anything.)

<table>
  <thead>
    <tr><th>Name</th><th>Test 1</th><th>Test 2</th></tr>
  </thead>
  <tbody>
    <tr><th>James</th><td>80</td><td>90</td></tr>
    <tr><th>Bond</th><td>70</td><td>100</td></tr>
  </tbody>
  <tfoot>
    <tr><th>Average</th><td>75</td><td>95</td></tr>
  </tfoot>
</table>
| LIVE PREVIEW
NameTest 1Test 2
James8090
Bond70100
Average7595

<colgroup> and <col>

Add semantics: declares which columns form a column group.

You normally put <col> inside <colgroup> to signify that those columns have the same semantics.

Common attributes
  • span=[...] — how many columns the <colgroup> or <col> spans.
<table>
  <colgroup>
    <col style="background-color: #ffdddd"/>
    <col style="background-color: #ddffdd"/>
    <col span="2" style="background-color: #ddddff"/>
  </colgroup>
  <tr>
    <th>ISBN</th><th>Title</th><th>Old Price</th><th>New Price</th>
  </tr>
  <tr>
    <td>1234567</td><td>My First HTML</td><td>$10</td><td>$15</td>
  </tr>
  <tr>
    <td>1234568</td><td>My First CSS</td><td>$12</td><td>$16</td>
  </tr>
</table>
| LIVE PREVIEW
ISBNTitleOld PriceNew Price
1234567My First HTML$10$15
1234568My First CSS$12$16

<caption>

Adds table caption.

<table>
  <caption>Pokémon Evolution</caption>
  <tr>
    <th>Basic</th>
    <th>Stage 1</th>
    <th>Stage 2</th>
  </tr>
  <tr>
    <td>Charmander</td>
    <td>Charmeleon</td>
    <td>Charlizard</td>
  </tr>
</table>
| LIVE PREVIEW
Pokémon Evolution
Basic Stage 1 Stage 2
Charmander Charmeleon Charlizard

References