HTML <table> Tag

<table border = "1">
<tr><th colspan="2">Table Header (thead)</th></tr>
<tr><th colspan="2">Table Footer (tfoot)</th></tr>
<td>Cell 1 - part of tbody</td>
<td>Cell 2 - part of tbody</td>
<td>Cell 3 - part of tbody</td>
<td>Cell 4 - part of tbody</td>

The above example demonstrates usage of the <table> element. This example uses other (optional) elements to create a header, footer, body, and caption.

The <table> element is used to create a table. It represents data with multiple dimensions.

Tables have rows, columns, and cells. The <tr> element specifies each row, and the <td> element specifies each cell. Together these form the columns.

In addition, the <colgroup> and <col> elements can also be used to apply global attributes to one or more columns. The <thead>, <tbody>, and <tfoot> elements can be used to represent the table header, body, and footer respectively.

Furthermore, you can also use the <caption> element to provide a caption for the table.

Content Model of Tables

The order of the above elements is important. The HTML5 specification states that the order of elements (after the start <table> tag) are:

optionally a <caption> element, followed by zero or more <colgroup> elements, followed optionally by a <thead> element, followed optionally by a <tfoot> element, followed by either zero or more <tbody> elements or one or more <tr> elements, followed optionally by a <tfoot> element (but there can only be one <tfoot> element child in total), optionally intermixed with one or more script-supporting elements.

Note that tables should not be used for layout purposes. They are designed to represent tabular data, not to create layouts.