table element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The table element represents a table. These allow authors to represent tabular data in a document. In the code, a table basically consists of a group of rows that contain, each, a group of cells.

A table element acts only as a container where other elements can be declared. These elements are:

  • caption: provides a title for the table.
  • colgroup: groups columns thematically.
  • col: applies common attributes and styles to one or more columns. It can only be declared as child of colgroup.
  • tbody: represents the body section of a table.
  • thead: represents the header section of a table.
  • tfoot: represents the footer section of a table.
  • tr: represents a row. It can be declared as child of tbody, thead, tfoot or table.
  • td: represents a regular cell. It can only be declared as child of tr.
  • th: represents a header cell. It can only be declared as child of tr.

When tables are complex or hard to understand, authors should provide indications aimed to help the user in the interpretation of the data. This information can be presented in the surrounding text, as the table's caption or in the figcaption element, if the table is part of a figure element. Nevertheless, authors are encouraged to rearrange their tables in a way that no explanation is necessary, whenever it's possible.

Tables have been historically used to organize the layout of a website. This practice is non-conformant and may lead some browsers (like voice browsers) to obtain confusing results in their attemp to extract tabular data.

In previous versions of the standard, the table element had several presentational attributes that have been removed in HTML5. Authors should drop their use in favor of style sheets.

Examples

In the next example we'll crete a very basic table with the elements table, tr (rows) and td (cells). Here you'll be able to see the most basic structure of a table (a group of rows that contain, each, a group of cells).

<table class="egt">
  <tr>
    <td>New York</td>
    <td>1 h 51 min</td>
  </tr>
  <tr>
    <td>Allentown</td>
    <td>1 h 11 min</td>
  </tr>
  <tr>
    <td>Reading</td>
    <td>1 h 12 min</td>
  </tr>
</table>
New York 1 h 51 min
Allentown 1 h 11 min
Reading 1 h 12 min

Now that we've learned the basic concept, lets try to improve our table adding header cells. Header cells will make our data more readable by providing hints about the organization of the table. In this particular case, the headers will be in the first row of the table.

<table class="egt">
  <tr>
    <th>Destination</th>
    <th>By car</th>
    <th>By train</th>
    <th>By bike</th>
  </tr>
  <tr>
    <td>New York</td>
    <td>1 h 51 min</td>
    <td>1 h 22 min</td>
    <td>8 h 53 min</td>
  </tr>
  <tr>
    <td>Allentown</td>
    <td>1 h 11 min</td>
    <td>-</td>
    <td>6 h 9 min</td>
  </tr>
  <tr>
    <td>Reading</td>
    <td>1 h 12 min</td>
    <td>-</td>
    <td>5 h 40 min</td>
  </tr>
</table>
Destination By car By train By bike
New York 1 h 51 min 1 h 22 min 8 h 53 min
Allentown 1 h 11 min - 6 h 9 min
Reading 1 h 12 min - 5 h 40 min

Now we're ready to divide the cells of our previous example in three sections: the body (tbody), the header (thead) and the footer (tfoot). The header section will be composed by the first row, where all the header cells currently are. For the footer, we'll add a new row with average times. All the remaining cells will be part of the body of the table.

Additionally, we'll add a caption to the table, which in this case will give just a title. Remember that this element can also be used to provide explanations that could help to better understand the data in complex tables.

<table class="egt">
  <caption>Time needed to travel from Philadelphia</caption>
  <thead>
    <tr>
      <th scope="col">Destination</th>
      <th scope="col">By car</th>
      <th scope="col">By train</th>
      <th scope="col">By bike</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>New York</td>
      <td>1 h 51 min</td>
      <td>1 h 22 min</td>
      <td>8 h 53 min</td>
    </tr>
    <tr>
      <td>Allentown</td>
      <td>1 h 11 min</td>
      <td>-</td>
      <td>6 h 9 min</td>
    </tr>
    <tr>
      <td>Reading</td>
      <td>1 h 12 min</td>
      <td>-</td>
      <td>5 h 40 min</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Average</th>
      <th>1 h 24 min</th>
      <th>1 h 22 min</th>
      <th>6 h 54 min</th>
    </tr>
  </tfoot>
</table>
Time needed to travel from Philadelphia
Destination By car By train By bike
New York 1 h 51 min 1 h 22 min 8 h 53 min
Allentown 1 h 11 min - 6 h 9 min
Reading 1 h 12 min - 5 h 40 min
Average 1 h 24 min 1 h 22 min 6 h 54 min

A couple of things can be noted in the previous example. First, the possibility of omitting the tbody element and declaring the body rows directly inside the table element. This way, the body of the table would be implicitly present and would be conformed by all the cells that aren't part of the header nor the footer.

And second, the importance and convenience of the infromation provided in the caption. You can easily see how this small description can aid users in the comprehension of the table's contents.

Previously, HTML5 allowed tfoot to precede the body in the code, letting browsers fix its position to the bottom of the table when rendering. This behavior is no longer valid, and tfoot should alway be after any body of the table.

Attributes

Specific attributes

summary

A summary of the table's purpose/structure. The information in this attribute is supposed to expand the contents of the caption element. Summaries should be as short, accurate and descriptive as possible, as they are key to help people with disabilities in the interpretation of the table's content.

This attribute has become obsolete in HTML5. Authors should drop its use in favor of the caption element or descriptions in the text surrounding the table.

Example

<table summary="List of users registered in the website from 11-05-10 to 12-05-10">

width

A value indicating the desired width of the entire table, in pixels or as a percentage relative to the horizontal available space. Browsers may adapt this value according to space availability.

This attribute has become obsolete in HTML5 because of its presentational nature. Authors should drop its use in favor of style sheets.

Example

<table width="80%">

frame

A value indicating which sides of the frame surrounding the table will be rendered. Possible case-insensitive values are:

  • void: no sides. This is the default value.
  • above: the top side only.
  • below: the bottom side only.
  • hsides: the top and bottom sides only.
  • vsides: the right and left sides only.
  • lhs: the left-hand side only.
  • rhs: the right-hand side only.
  • box: all four sides.
  • border: all four sides.

This attribute has become obsolete in HTML5 because of its presentational nature. Authors should drop its use in favor of style sheets.

Example

<table frame="box">

rules

A value indicating which rules must be rendered between cells of a table. Possible case-insensitive values are:

  • none: no rules. This is the default value.
  • groups: rules will be shown between row groups (thead, tfoot, and tbody) and column groups (colgroup) only.
  • rows: rules will be rendered between rows only.
  • cols: rules will appear between columns only.
  • all: rules be rendered between all rows and columns.

The rules attribute has been removed from the HTML5 standard for being merely presentational. Authors should replace it with style sheets.

Example

<table rules="groups">

border

A number of pixels defining the width the border of the table will take.

The border attribute has become obsolete in HTML5 for being merely presentational. Authors should replace it with style sheets.

Example

<table border="2">

cellspacing

A number of pixels indicating the width of the space to be left between cells. It also refers to the space between the border of a table and the adjacent cells.

This attribute has been removed from the HTML5 standard because of its presentational nature. Authors should drop its use in favor of style sheets.

Example

<table cellspacing="5">

cellpadding

A number of pixels indicating the width of the space to be left between a cell's content and its border.

This attribute has been removed from the HTML5 standard because of its presentational nature. Authors should replace it with style sheets.

Example

<table cellpadding="10">

align

The horizontal alignment of the table. There are three possible values (case-insensitive):

  • left: the table is aligned to the left margin. This is the default value.
  • center: the table is centered.
  • right: the table is aligned to the right margin.

This attribute has become obsolete in HTML5 and, therefore, its use is no longer valid. Authors should replace them with style sheet declarations.

Example

<table align="center">

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.