HTML <table> Tag
Topic: HTML5 Tags ReferencePrev|Next
Description
The <table> tag is used to represents data in a grid-like fashion (in rows and columns).
The following table summarizes the usages context and the version history of this tag.
| Placement: | Block |
|---|---|
| Content: | An optional <caption>, zero or more <col> or <colgroup> tags, optional <thead> and <tfoot>, zero or more <tbody> tags and at least one <tr> |
| Start/End Tag: | Start tag: required, End tag: required |
| Version: | HTML 3.2, 4, 4.01, 5 |
Usage Notes
Tables are used to organize data like, text, images, links, forms, form fields, other tables, etc. into rows and columns of cells.
At its most basic, a table is built using the
<table>element and one or more,<tr>,<th>and<td>elements. Where the<tr>element defines a table row, the<th>element defines a table header, and the<td>element defines a table cell.A more complex table may also include a
<caption>,<col>and<colgroup>elements; and the structural<thead>,<tbody>, and<tfoot>elements, which are used to identify the different regions in the table.
Syntax
The basic syntax of the <table> tag is given with:
The example below shows the <table> tag in action.
<table>
<caption>User Details</caption>
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Carter</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Peter Parker</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>John Rambo</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>Tip: Consider describing the structure of the table in a <caption> element or, simplify the structure of the table so that no description is needed.
Tag-Specific Attributes
The following table shows the attributes that are specific to the <table> tag.
| Attribute | Value | Description |
|---|---|---|
align |
left |
Obsolete Specifies the alignment of the table with respect to the document. |
bgcolor |
color | Obsolete Sets the background color of the table. |
border |
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 |
Obsolete Specifies which sides of the border frame surrounding a table will be visible. |
rules |
all |
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. |
Global Attributes
Like all other HTML tags, the <table> tag supports the global attributes in HTML5.
Event Attributes
The <table> tag also supports the event attributes in HTML5.
Browser Compatibility
The <table> tag is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: HTML Tables.
Other table-related tags: <thead>, <tfoot>, <tbody>, <caption>, <colgroup>, <col>, <tr>, <th>, <td>.
