HTML <Table> Tag

Definition

A <table> element represents data in a two-dimensional table comprising rows and columns of cells.

Example

<table>
  <caption>This is the table's caption</caption>
    <thead>
        <tr>
            <th colspan="2">The table header with one column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

Usage

• An opening and closing tag is required.
• The <table> element may contain the following elements, but in strict order:
  • An optional <caption> element.
  • Zero or more <colgroup> elements.
  • An optional <thead> element.
  • Zero or more <tbody> elements or one or more <tr> elements.
  • An optional <tfoot> element.
• Within the <tr> element you can have <th> or <td> elements representing table heading cells and normal table data cells respectively.

Best Practices

• You should supply a <caption> element describing the table’s purpose. This assists users in deciding whether to read the table and users using assistive technology such as screen readers.
• On more complex tables, you may want to add the <th> scope attribute to provide better information for assistive technologies such as screen readers to understand your table. An example where it may be needed is where you have table headings along the top and down the table’s first column.
• Avoid complicated tables that use the colspan and rowspan attributes where possible. These attributes make it difficult for assistive technologies such as screen readers.

Attributes

The Table element only supports the Global Attributes.

There used to be a range of <table> elements that helped style the table, but these are now deprecated. You should use CSS to style a table.

CSS Properties for Styling a Table

Here are the basic CSS properties for styling a table:

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile