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.
Table of contents
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 ofcolgroup
.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 oftbody
,thead
,tfoot
ortable
.td
: represents a regular cell. It can only be declared as child oftr
.th
: represents a header cell. It can only be declared as child oftr
.
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.
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="default">
<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="default">
<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="default">
<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>
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.
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
, andtbody
) 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.