HTML table Tag
The information on this page is based on HTML version 4.01 (which is the current version of HTML). The next version, HTML 5, is currently being written. Here's a list of HTML 5 tags.
The HTML <table> tag is used for defining a table. The table tag contains other tags that define the structure of the table.
Table Elements
Tables consist of the <table> element as well as other table-related elements. These other elements are nested inside the <table> tags to determine how the table is constructed.
The children of a <table> element must be, in order:
- Zero or one
<caption> elements
- Zero or one
<colgroup> elements
- Zero or one
<thead> elements
- Zero or one
<tfoot> elements (but only if the last element in the table is not a <tfoot> element)
- Either:
- Zero or more
<tbody> elements, or
- One or more
<tr> elements (these represent the table rows)
- Zero or one
<tfoot> elements (but only if there are no other <tfoot> elements in the document)
Each <tr> element represents a row in the table. A row can have one or more <td> or <th> elements, which determine the columns in the table. Specifically, <td> represents table data and <th> represents a table header.
| Example |
<table border = "1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
|
| Attributes: |
| Attributes specific to this tag: |
| summary | Provides a summary of the table's structure and purpose for non-visual user agents. |
| align | Visual alignment of the table (i.e. left, center, right). This attribute is deprecated, use CSS instead. |
| width | Width of the table. |
| Other Attributes: |
| Attribute | Description |
| dir | Specifies the direction of the text |
| class | Document wide identifier. |
| id | Document wide identifier |
| lang | Language code |
| title | Specifies a title to associate with the element. Many browsers will display this when the cursor hovers over the element (similar to a "tool tip"). |
| style | Inline style (CSS) |
| bgcolor | Background color of the table. Note: This attribute is deprecated, use the CSS background-color property instead. |
| frame | Used in conjunction with the border attribute, specifies which side of the frame that makes up the border surrounding the table is displayed. Possible values:
- void: None are displayed. This value is the default
- above: Top side of the frame
- below: Bottom side of the frame
- hsides: Top and bottom sides
- vsides: Right and left sides
- lhs: Left side
- rhs: Right side
- box: All sides
- border: All sides
|
| rules | Used in conjunction with the border attribute, specifies which rules appear between the cells of the table. Possible values:
- None: None are displayed. This value is the default
- groups: Rules appear between row groups and column groups
- rows: Between rows
- cols: Between columns
- all: Between all rows and columns
|
| border | Specifies the width of the border around the table. For no border, use 0 (zero). |
| cellspacing | Specifies the space between cells. |
| cellpadding | Specifies the space between the cell borders and their contents |
| onclick | Intrinsic event (see event handlers) |
| ondbclick | Intrinsic event (see event handlers) |
| onmousedown | Intrinsic event (see event handlers) |
| onmouseup | Intrinsic event (see event handlers) |
| onmouseover | Intrinsic event (see event handlers) |
| onmousemove | Intrinsic event (see event handlers) |
| onmouseout | Intrinsic event (see event handlers) |
| onkeypress | Intrinsic event (see event handlers) |
| onkeydown | Intrinsic event (see event handlers) |
| onkeyup | Intrinsic event (see event handlers) |
|
| Try it yourself! |
|
Also see the HTML 5 version of HTML tags
Enjoy this page?
-
- Link to this page (copy/paste into your own website or blog):
- Link to Quackit using one of these banner ads.
Thanks for supporting Quackit!
