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.

Tag	Type	Description
`<table>`	Block	Represents a table
Rows and cells
`<tr>`	Other	Represents a table row
`<th>`	Other	Represents a table header cell
`<td>`	Other	Represents a table data cell
Row groups
`<thead>`	Other	Defines the row group that comprises the table's header (column header rows)
`<tbody>`	Other	Defines the row group that comprises the table's body
`<tfoot>`	Other	Defines the row group that comprises the table's footer (summarys rows)
Column group
`<colgroup>`	Other	Defines a column group
`<col>`	Other	Defines a column that is part of a column group
Caption
`<caption>`	Other	Adds 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>

<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>

<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>

<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
1		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>

<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

Name	Test 1	Test 2
James	80	90
Bond	70	100
Average	75	95

`<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>

<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

ISBN	Title	Old Price	New Price
1234567	My First HTML	$10	$15
1234568	My 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>

<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

HTML elements reference (MDN) — https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content
HTML <th> headers Attribute (W3Schools) — https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_th_headers
HTML <colgroup> Tag (W3Schools) — https://www.w3schools.com/tags/tag_colgroup.asp

HTML Tags: Tables

<table>

<tr>

<th>

<td>

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

<colgroup> and <col>

<caption>

References

`<table>`

`<tr>`

`<th>`

`<td>`

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

`<colgroup>` and `<col>`

`<caption>`