The <table> HTML Element

Overview

The <table> element is used to display tabular data in a two-dimensional format, organized into rows, columns, and cells. It is part of the HTML table model, which specifies the layout and behavior of tables.

Examples and Usage

In its simplest form, a table can consist of rows and columns defined by <tr> and <td> elements, respectively.

<table>
  <tr>
    <td>Emily</td>
    <td>Smith</td>
  </tr>
  <tr>
    <td>Michael</td>
    <td>Jones</td>
  </tr>
</table>

table, td {
  border: 1px solid #333;
  padding: 6px;
  border-collapse: collapse;
}

This basic example lacks headers, meaning it lacks semantic information about the table data. The CSS snippet above provides the table and its cells with borders and padding.

Moving on to slightly more complex tables, additional elements like <thead>, <tbody>, <tfoot>, and <caption> can be used to improve the table's structure and semantic meaning.

<table>
  <caption>Employee Salary Data</caption>
  <thead>
    <tr>
      <th colspan="2">Employee Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Emily</td>
      <td>$70,000</td>
    </tr>
    <tr>
      <td>Michael</td>
      <td>$65,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Salary figures are annual.</td>
    </tr>
  </tfoot>
</table>

table, th, td {
  border: 1px solid #333;
  padding: 6px;
  border-collapse: collapse;
}
thead, tfoot {
  background-color: #333;
  color: #fff;
}

In this example, the <thead>, <tbody>, and <tfoot> elements segregate the table into logical sections. The colspan attribute spans the header across two columns. In addition, the CSS here also modifies the background color of these sections for emphasis.

While these examples provide a solid foundation, they only scratch the surface of what's possible with HTML tables. For more complex and semantically rich table configurations, elements like <colgroup>, <col>, and various ARIA roles can further improve your tables. Crucially, tables should be used for displaying structured data, not for layout purposes.

Attribute Breakdown

The <table> element historically allowed various attributes for styling and layout. However, many of these are now deprecated in favor of CSS. In addition, the element also includes all global HTML attributes.

Accessibility Aspects

The <table> element has an implicit ARIA role of table. Detailed information on this can be found in the official specification.

Accessibility concerns for complex table structures can be quite intricate. We recommend referring to the W3C's guides on Tables with Multi-Level Headers and Tables with Irregular Headers, among other resources listed in the Useful Resources section.

Associated Elements

<tbody>
<td>
<tfoot>
<th>
<thead>
<tr>
<col>
<colgroup>
<caption>

Additional Notes

As mentioned before, many attributes historically used with the <table> element are now deprecated, and their usage in modern websites is discouraged. For example, the align attribute for table alignment can be replaced by CSS margin-left and margin-right.
The bgcolor attribute that specifies the background color of the table can be achieved with the CSS background-color property.
The border attribute, which defines the frame size around the table, can be controlled using the CSS border property.
cellpadding and cellspacing, which manage the space within and between cells, are now similarly handled with the CSS border-collapse and border-spacing properties.
The frame and rules attributes control the appearance and orientation of table borders and lines between cells. These are now better managed with the CSS border-style, border-width, and border properties applied to specific table elements.
For setting alternative text summaries for tables, the summary attribute is deprecated. Instead, use the <caption> element.
The width attribute that controls the table width is now managed by the CSS width property.
Some browsers support a non-standard height attribute for tables. However, this is not part of any HTML specification and sets a minimum absolute height in pixels or relative to the height of the parent container.