Home > Abakada: Back to Basics > Language References > HTML Elements > TABLE Element
| Defines a table. | HTML 3.2, 4, 4.01, 5 |
HTML Syntax
<table
align = center | left | right
background = url
bgcolor = color
border = n
bordercolor = color
bordercolordark = color
bordercolorlight = color
cellpadding = n
cellspacing = n
class = classname
cols = n
datapagesize = n
datasrc = #id
frame = above | below | border | box | insides | lhs | rhs | void | vsides
height = n
id = value
rules = all | cols | groups | none | rows
style = css_style_rules
title = text
width = n
>
The TABLE element specifies a container for arranging content into rows and columns of cells.
TABLE elements are always used with the TR element to define the table rows, and the TH or TD elements to define the table cells. TH elements define row or column headings, and TD elements define the cells for the table data.
A TABLE can also contain a CAPTION element, which provides a label of the table's purpose.
A TABLE can have a specified width and height, and browsers render the table to fit the specified dimensions when possible. In cases where the specified sizes will not fit, as when the table may have cells that contain long non-wrapping lines, the browser adjusts the table size accordingly.
The cols attribute can be used to specify the number of equal-width columns in the table. Specifying this attribute can speed up the processing of a table.
To control spacing between and within cells, authors can use cellspacing to specify the distance between cells, and cellpadding to specify the distance between the border and content of each cell.
When a document is loading, modifications to a table are restricted until the window.onload event occurs. Read-only access is allowed at any time.
The TABLE Object Model is read-only for databound tables. For example, script to remove a table row will work correctly on an unbound table, but will not work on a databound table. The TABLE object’s properties are still available, but changes to the bound table's data have to be made to the data source.
NOTE: Both start and end tags are required.
The <table> element supports the following attributes, in addition to global attributes common to all HTML elements.
| align | left, center, right | Obsolete Specifies the alignment of the table with respect to the document. |
| bgcolor | color | Obsolete Sets the background color of the table. |
| border | 0, 1 | Obsolete Specifies whether the table cells should have borders or not. |
| cellpadding | length | Obsolete Specifies the space between the edge of a cell and its content. |
| cellspacing | length | Obsolete Specifies the amount of space between individual cells. |
| frame | above, below, border, box, hsides, lhs, rhs, void, vsides | Obsolete Specifies which sides of the border frame surrounding a table will be visible. |
| rules | all, cols, groups, none, rows | Obsolete Specifies which parts of the inside borders will appear between cells within a table. |
| sortable | sortable | Enables a sorting interface for the table. |
| summary | text | Obsolete Specifies a summary of the content of a table. |
| width | length | Obsolete Specifies the width of the entire table. |
This example demonstrates a table with two rows and two columns.
<table width=80%>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tbody>
<tr>
<td>Row 1, Column 1 text.</td>
<td>Row 1, Column 2 text.</td>
</tr>
<tr>
<td>Row 2, Column 1 text.</td>
<td>Row 2, Column 2 text.</td>
</tr>
</table>
TD TH TR Using Tables