Section 4.9

Tabular data

10 entries from this section of the HTML Living Standard, in the order the standard presents them.

All 10 elements together

One small page that uses every element of this section. Turn on Show tags and point at any part of the page: a label tells you which element draws it. Click to jump to that element's details below.

Tabular data Written for this site

Every element of this section is in the page above. Point at one to find it, click it to read its details.

<div class="wrap">
  <table>
    <caption>Our trip budget, in euros</caption>
    <colgroup>
      <col>
      <col span="2">
      <col class="total-col">
    </colgroup>
    <thead>
      <tr>
        <th scope="col">Expense</th>
        <th scope="col">Planned</th>
        <th scope="col">Spent</th>
        <th scope="col">Left</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Train tickets</th>
        <td>120</td>
        <td>110</td>
        <td>10</td>
      </tr>
      <tr>
        <th scope="row">Hotel</th>
        <td>300</td>
        <td>280</td>
        <td>20</td>
      </tr>
      <tr>
        <th scope="row">Food</th>
        <td>150</td>
        <td>170</td>
        <td class="over">-20</td>
      </tr>
      <tr>
        <th scope="row">Museums</th>
        <td>60</td>
        <td>45</td>
        <td>15</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td>630</td>
        <td>605</td>
        <td>25</td>
      </tr>
    </tfoot>
  </table>
  <p class="note">The last column is colored through its <code>&lt;col&gt;</code>: one element styles a whole column.</p>
</div>

body { margin: 0; font-family: system-ui, sans-serif; color: #1e293b; background: #f8fafc; }
.wrap { padding: 24px; overflow-x: auto; }
table { width: 100%; max-width: 40rem; margin: 0 auto; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #cbd5e1; border-radius: 14px; overflow: hidden; }
caption { caption-side: top; padding: 0 0 12px; font-size: 1.3rem; font-weight: 700; text-align: left; }
.total-col { background: #fef3c7; }
th, td { padding: 10px 16px; text-align: right; border-bottom: 1px solid #e2e8f0; }
th[scope="row"], thead th:first-child { text-align: left; }
thead th { background: #1e293b; color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
tbody tr:nth-child(even) { background: #f1f5f9; }
tbody tr:hover { background: #e0f2fe; }
tfoot th, tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid #1e293b; }
.over { color: #dc2626; font-weight: 700; }
.note { max-width: 40rem; margin: 12px auto 0; color: #64748b; font-size: 0.9rem; }
code { background: #e2e8f0; border-radius: 4px; padding: 0 4px; }

Each element in detail

`<table>`

Baseline: widely availablesince January 2018

WHATWG Table

MDN The <table> HTML element represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

Live preview Example from MDN

<table>
  <caption>
    Front-end web developer course 2021
  </caption>
  <thead>
    <tr>
      <th scope="col">Person</th>
      <th scope="col">Most interest in</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Chris</th>
      <td>HTML tables</td>
      <td>22</td>
    </tr>
    <tr>
      <th scope="row">Dennis</th>
      <td>Web accessibility</td>
      <td>45</td>
    </tr>
    <tr>
      <th scope="row">Sarah</th>
      <td>JavaScript frameworks</td>
      <td>29</td>
    </tr>
    <tr>
      <th scope="row">Karen</th>
      <td>Web performance</td>
      <td>36</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Average age</th>
      <td>33</td>
    </tr>
  </tfoot>
</table>

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

thead,
tfoot {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td:last-of-type {
  text-align: center;
}

tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

Content model

Categories: flow; palpable
Parents: flow
Children: caption*; colgroup*; thead*; tbody*; tfoot*; tr*; script-supporting elements
Interface: HTMLTableElement

Browser support

First browser version supporting <table>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Attributes

No element-specific attribute.

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<caption>`

Baseline: widely availablesince January 2018

WHATWG Table caption

MDN The <caption> HTML element specifies the caption (or title) of a table, providing the table an accessible name or accessible description.

Live preview Example from MDN

<table>
  <caption>
    He-Man and Skeletor facts
  </caption>
  <tbody>
    <tr>
      <td></td>
      <th scope="col" class="heman">He-Man</th>
      <th scope="col" class="skeletor">Skeletor</th>
    </tr>
    <tr>
      <th scope="row">Role</th>
      <td>Hero</td>
      <td>Villain</td>
    </tr>
    <tr>
      <th scope="row">Weapon</th>
      <td>Power Sword</td>
      <td>Havoc Staff</td>
    </tr>
    <tr>
      <th scope="row">Dark secret</th>
      <td>Expert florist</td>
      <td>Cries at romcoms</td>
    </tr>
  </tbody>
</table>

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th {
  background-color: rgb(230 230 230);
}

td {
  text-align: center;
}

tr:nth-child(even) td {
  background-color: rgb(250 250 250);
}

tr:nth-child(odd) td {
  background-color: rgb(240 240 240);
}

.heman {
  font:
    1.4rem "molot",
    sans-serif;
  text-shadow:
    1px 1px 1px white,
    2px 2px 1px black;
}

.skeletor {
  font:
    1.7rem "rapscallion",
    fantasy;
  letter-spacing: 3px;
  text-shadow:
    1px 1px 0 white,
    0 0 9px black;
}

Content model

Categories: none
Parents: table
Children: flow*
Interface: HTMLTableCaptionElement

Browser support

First browser version supporting <caption>
Chrome	1
Edge	12
Firefox	1
Safari	≤4
Chrome Android	18
Safari iOS	≤3.2

First version with support, from MDN browser-compat-data.

Attributes

No element-specific attribute.

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<colgroup>`

Baseline: widely availablesince January 2018

WHATWG Group of columns in a table

MDN The <colgroup> HTML element defines a group of columns within a table.

Live preview Example from MDN

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <thead>
    <tr>
      <td></td>
      <th scope="col">Batman</th>
      <th scope="col">Robin</th>
      <th scope="col">The Flash</th>
      <th scope="col">Kid Flash</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Skill</th>
      <td>Smarts, strong</td>
      <td>Dex, acrobat</td>
      <td>Super speed</td>
      <td>Super speed</td>
    </tr>
  </tbody>
</table>

.batman {
  background-color: #d7d9f2;
}

.flash {
  background-color: #ffe8d4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 6px;
}

td {
  text-align: center;
}

Content model

Categories: none
Parents: table
Children: col*; template*
Interface: HTMLTableColElement

Browser support

First browser version supporting <colgroup>
Chrome	1
Edge	12
Firefox	1
Safari	≤4
Chrome Android	18
Safari iOS	≤3.2

First version with support, from MDN browser-compat-data.

Attributes

span: Number of columns spanned by the element Value: Valid non-negative integer greater than zero

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<col>`

Baseline: widely availablesince January 2018

WHATWG Table column

MDN The <col> HTML element defines one or more columns in a column group represented by its parent <colgroup> element. The <col> element is only valid as a child of a <colgroup> element that has no span attribute defined.

Live preview Example from MDN

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <thead>
    <tr>
      <td></td>
      <th scope="col">Batman</th>
      <th scope="col">Robin</th>
      <th scope="col">The Flash</th>
      <th scope="col">Kid Flash</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Skill</th>
      <td>Smarts, strong</td>
      <td>Dex, acrobat</td>
      <td>Super speed</td>
      <td>Super speed</td>
    </tr>
  </tbody>
</table>

.batman {
  background-color: #d7d9f2;
}

.flash {
  background-color: #ffe8d4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 6px;
}

td {
  text-align: center;
}

Content model

Categories: none
Parents: colgroup
Children: empty
Interface: HTMLTableColElement

Browser support

First browser version supporting <col>
Chrome	1
Edge	12
Firefox	1
Safari	≤4
Chrome Android	18
Safari iOS	≤3.2

First version with support, from MDN browser-compat-data.

Attributes

span: Number of columns spanned by the element Value: Valid non-negative integer greater than zero

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<tbody>`

Baseline: widely availablesince January 2018

WHATWG Group of rows in a table

MDN The <tbody> HTML element encapsulates a set of table rows (<tr> elements), indicating that they comprise the body of a table's (main) data.

Live preview Example from MDN

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td {
  text-align: center;
}

Content model

Categories: none
Parents: table
Children: tr; script-supporting elements
Interface: HTMLTableSectionElement

Browser support

First browser version supporting <tbody>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Attributes

No element-specific attribute.

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<thead>`

Baseline: widely availablesince January 2018

WHATWG Group of heading rows in a table

MDN The <thead> HTML element encapsulates a set of table rows (<tr> elements), indicating that they comprise the head of a table with information about the table's columns. This is usually in the form of column headers (<th> elements).

Live preview Example from MDN

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td {
  text-align: center;
}

Content model

Categories: none
Parents: table
Children: tr; script-supporting elements
Interface: HTMLTableSectionElement

Browser support

First browser version supporting <thead>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Attributes

No element-specific attribute.

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<tfoot>`

Baseline: widely availablesince January 2018

WHATWG Group of footer rows in a table

MDN The <tfoot> HTML element encapsulates a set of table rows (<tr> elements), indicating that they comprise the foot of a table with information about the table's columns. This is usually a summary of the columns, e.g., a sum of the given numbers in a column.

Live preview Example from MDN

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td {
  text-align: center;
}

Content model

Categories: none
Parents: table
Children: tr; script-supporting elements
Interface: HTMLTableSectionElement

Browser support

First browser version supporting <tfoot>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Attributes

No element-specific attribute.

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<tr>`

Baseline: widely availablesince January 2018

WHATWG Table row

MDN The <tr> HTML element defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.

Live preview Example from MDN

<table>
  <caption>
    Alien football stars
  </caption>
  <thead>
    <tr>
      <th scope="col">Player</th>
      <th scope="col">Gloobles</th>
      <th scope="col">Za'taak</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">TR-7</th>
      <td>7</td>
      <td>4,569</td>
    </tr>
    <tr>
      <th scope="row">Khiresh Odo</th>
      <td>7</td>
      <td>7,223</td>
    </tr>
    <tr>
      <th scope="row">Mia Oolong</th>
      <td>9</td>
      <td>6,219</td>
    </tr>
  </tbody>
</table>

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th[scope="col"] {
  background-color: #505050;
  color: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eeeeee;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

Content model

Categories: none
Parents: table; thead; tbody; tfoot
Children: th*; td; script-supporting elements
Interface: HTMLTableRowElement

Browser support

First browser version supporting <tr>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Attributes

No element-specific attribute.

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<td>`

Baseline: widely availablesince January 2018

WHATWG Table cell

MDN The <td> HTML element defines a cell of a table that contains data and may be used as a child of the <tr> element.

Live preview Example from MDN

<table>
  <caption>
    Alien football stars
  </caption>
  <thead>
    <tr>
      <th scope="col">Player</th>
      <th scope="col">Gloobles</th>
      <th scope="col">Za'taak</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">TR-7</th>
      <td>7</td>
      <td>4,569</td>
    </tr>
    <tr>
      <th scope="row">Khiresh Odo</th>
      <td>7</td>
      <td>7,223</td>
    </tr>
    <tr>
      <th scope="row">Mia Oolong</th>
      <td>9</td>
      <td>6,219</td>
    </tr>
  </tbody>
</table>

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th[scope="col"] {
  background-color: #505050;
  color: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eeeeee;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

Content model

Categories: none
Parents: tr
Children: flow
Interface: HTMLTableCellElement

Browser support

First browser version supporting <td>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Attributes

colspan: Number of columns that the cell is to span Value: Valid non-negative integer greater than zero
rowspan: Number of rows that the cell is to span Value: Valid non-negative integer
headers: The header cells for this cell Value: Unordered set of unique space-separated tokens consisting of IDs*

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<th>`

Baseline: widely availablesince January 2018

WHATWG Table header cell

MDN The <th> HTML element defines a cell as the header of a group of table cells and may be used as a child of the <tr> element. The exact nature of this group is defined by the scope and headers attributes.

Live preview Example from MDN

<table>
  <caption>
    Alien football stars
  </caption>
  <thead>
    <tr>
      <th scope="col">Player</th>
      <th scope="col">Gloobles</th>
      <th scope="col">Za'taak</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">TR-7</th>
      <td>7</td>
      <td>4,569</td>
    </tr>
    <tr>
      <th scope="row">Khiresh Odo</th>
      <td>7</td>
      <td>7,223</td>
    </tr>
    <tr>
      <th scope="row">Mia Oolong</th>
      <td>9</td>
      <td>6,219</td>
    </tr>
  </tbody>
</table>

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th[scope="col"] {
  background-color: #505050;
  color: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eeeeee;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

Content model

Categories: interactive*
Parents: tr
Children: flow*
Interface: HTMLTableCellElement

Browser support

First browser version supporting <th>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Attributes

colspan: Number of columns that the cell is to span Value: Valid non-negative integer greater than zero
rowspan: Number of rows that the cell is to span Value: Valid non-negative integer
headers: The header cells for this cell Value: Unordered set of unique space-separated tokens consisting of IDs*
scope: Specifies which cells the header cell applies to Value: "row"; "col"; "rowgroup"; "colgroup"
abbr: Alternative label to use for the header cell when referencing the cell in other contexts Value: Text*

Also accepts the global attributes.

Specification ↗ MDN reference ↗