Tables

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

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:

Video Walkthrough

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