thead, tbody, and tfoot
Table rows (
<tr> elements) can be divided into
<tfoot> elements. If these elements are left off, it is assumed that all table rows are part of the
tbody. We can illustrate this with Google Chrome (other browsers also have this feature).
- Open Tables/Demos/table-homeruns.html in Google Chrome.
- Right-click anywhere on the page and select Inspect.
- This will open Google Chrome's Developer Tools on the Elements tab. You may need to click on the tags to open them.
From the above screenshot, you see that Google Chrome considers this
table to have a
tbody element even though there are no
<tbody> tags in the code.
The first row really should be in a
<thead> tag and the rest of the rows should be in a
<tbody> tag, so let's fix that:
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home Run Hitters</title>
<caption>All-time Home Run Records</caption>
As you can see, we have broken up the rows into a
thead section and
tbody section. We have also added a new table row in a
The look of the page will not change, but when we inspect it with Google Chrome, we see that it now "sees" the different sections:
You may be wondering why separating table rows into sections is useful if the browser doesn't display the different sections in different ways. Web pages are styled with CSS and this separation makes it much easier to style different sections of the table to create a table like this:
We aren't ready to cover CSS yet, but this should help you understand why it is useful to be able to identify the different sections.