<table border = "1"> <caption>Caption</caption> <thead> <tr><th colspan="2">Table Header (thead)</th></tr> </thead> <tfoot> <tr><th colspan="2">Table Footer (tfoot)</th></tr> </tfoot> <tbody> <tr> <td>Cell 1 - part of tbody</td> <td>Cell 2 - part of tbody</td> </tr> <tr> <td>Cell 3 - part of tbody</td> <td>Cell 4 - part of tbody</td> </tr> </tbody> </table>
The above example demonstrates usage of the
<table> element. This example uses other (optional) elements to create a header, footer, body, and caption.
<table> element is used to create a table. It represents data with multiple dimensions.
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.
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.