Advanced HTML tables may contain <thead>, <tbody>, and <tfoot> tags, along with a <caption> to give the data better structure. Other than that, there isn’t any difference from a basic table structure.

<table>
    <caption>
        This is the caption
    </caption>
    <thead>
        <tr>
            <th>First Number</th>
            <th>Second Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total 9</td>
            <td>Total 12</td>
        </tr>
    </tfoot>
</table>

The <caption> tag defines a table caption. It must be inserted immediately after the opening <table> tag. It will be centered above the table, but can be changed via CSS.

<table>
    <caption>
        This is the caption
    </caption>


</table>

The table can then have its data separated into groups using <thead>, <tbody>, and <tfoot>. Using all three isn’t necessary, but if you are using <tbody>, you should at least use a <thead> above it.

This alters nothing on the page in the browser, but makes the code easier to read and gives the data more context for the browser, search engines, etc.

Within the <thead> we place our header row and information using <tr> and <th> tags.

<thead>
    <tr>
        <th>First Number</th>
        <th>Second Number</th>
    </tr>
</thead>

Inside the <tbody> lives the main data set for our table. Just as in a basic table structure, the data sits in rows <tr /tr> containing columns <td /td> of information.

<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
</tbody>

Finally, inside the <tfoot> portion of our advanced table structure, sits the table footer information row <tr> and data <td>.

---