Tables

Published Apr 23, 2021Updated Jan 12, 2024
Contribute to Docs

In HTML, a table is an element that allows data representation in two dimensions. These dimensions are columns and rows.

Uses of HTML Tables

Generally, tables are used to display tabular data in particular. In the past, tables were sometimes used to display data that was not tabular due to constraints present within browser environments. In modern development, the use of tables to position elements not semantically related to a table is an anti-pattern and should be avoided.

Example

Example of an html table

HTML Table Structure

Tables are composed of multiple smaller types of elements that have special meaning within the table structure. The elements that are used in the construction of a typical table are as follows:

Table

The <table> element serves as the container for all elements and information contained within the table including headers, columns, and rows.

Table Row

The table row element, denoted as <tr>, is used to display data within a row (horizontally) in a table. Table rows do not display data on their own. Instead, table rows serve as a container for child elements that are responsible for semantically displaying the data.

Table Header

The table header element, denoted as <th>, is used to display data for a specific column header within a table. Multiple <th> elements can be added as children to a table row at the top of a table to create a complete header for a table.

Table Data

The table data element, denoted as <td>, is used to display individual data within a specific row/column position in a table. Table data elements are included as children of table rows to properly coordinate their positioning within the structure of a table.

<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

The above code block shows the HTML markup for a simple table structure. Its output is as follows:

Shows how the above table data renders

Video Walkthrough

Watch this video for a step-by-step walkthrough on how to create an HTML table.

Tables

colspan
Specifies the number of columns a cell should span.
rowspan
Specifies the number of rows a cell should span.
table
Defines an HTML table.
tbody
Groups the body content in a table.
td
Defines a cell in a table that contains data.
tfoot
Groups the footer content in a table.
th
Defines a header cell in a table.
thead
Groups the header content in a table.
tr
Defines a row in a table.

All contributors

Looking to contribute?

Learn HTML on Codecademy