table (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 2 |
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
Example
Here’s a very simple
two-column, two-row table:
<table>
<tr>
<th>Account Type</th>
<th>Interest Rate</th>
</tr>
<tr>
<td>Smart</td>
<td>From 2%</td>
</tr>
<tr>
<td>Young Saver</td>
<td>From 1.6%</td>
</tr>
</table>
- Type
- table element
- Contains
caption,col,colgroup,thead,tbody,tfoot,tr- Contained by
- block-level elements (except
p)
Description
The
table element is used to present data in a grid-like
fashion (in rows and columns), with appropriate headers to identify the
data contained in each column and row.
At its most
basic, a table is built using the table, tr, and td elements (with th elements
used for marking up the column or row headings), as shown in the example
HTML, which renders as shown in Figure 1.
A more complex table may
also include a caption; col and colgroup elements; and the structural thead, tfoot, and tbody elements, which are used to identify the
different regions in the table.
Use This For …
A table should only be used for tabular data. It should not be used (or, rather, misused) as a layout mechanism, whether for the layout of an entire web page, or for specific sections of a page. CSS should be used for laying out a page, as it ensures that the content is adaptable to different devices, and doesn’t cause problems when it’s linearized.
Compatibility
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
It causes no compatibility issues, and has excellent support across all tested browsers.
In this Section
- align
sets the alignment or position of thetablerelative to surrounding content - bgcolor
defines the background color for thetable - border
sets a border around thetable - cellpadding
creates padding around the contents of table cells - cellspacing
creates space (in the form of margins) outside of table cells - frame
renders a border on distinct edges of the table - rules
creates a rule between table cells (for rows and columns) - summary
provides a non-visual summary of the table’s content or purpose - width
sets thetable’s width in pixels or as a percentage
User-contributed notes
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
