Table with head and body – HTML

Demo

Summary

Tables are used to show tabular data on a web page.

Details

Here is an example of a more advanced HTML table.

<table>
  <caption>Caption for table</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th>Row Header</th>
      <td>Cell 1</td>
      <td> Cell 2</td>
    </tr>

    <tr>
      <th>Row Header</th>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </tbody>
</table>

This table is identical to our basic table example, except that it wraps the top row in a thead element and the rest of the rows in a tbody element. According to MDN, these extra elements don’t have any accessibility benefits, but can be useful for styling those sections of the table with CSS.

Exercises

Recreate the embedded CodePen demo by typing out the HTML code in your index.html file.

References

The Table Head element – MDN

The Table Body element – MDN

Lesson tags: Open Lesson

Back to: HTML Reference > HTML Tables