In addition to the standard tags that you often find people using, there are several optional tags which can be used to help organize the data. Browsers and/or libraries will sometimes use these additional tags to help organize your information and make it more user accessible, especially when dealing with large amounts of information.
<thead> Tag
The <thead>
, or table header, tag is used to group header content in an HTML table. By default, this is more for logical organization, however some CSS table libraries can use it for other purposes, and may keep it stationary, allowing the body of the table to scroll up and down, so you don’t lose your table headers when looking for information.
The <thead>
tag is optional. However, it can be used with the <tbody>
and <tfoot>
elements to specify each part of a table. Additionally, when printing a table that spans multiple pages, these tags can enable the table header and footer to be printed at the top and bottom of each page.
The <thead>
must be within the <table>
tag, after the <caption> if it exists, and before the <tbody>
and <tfoot>
, assuming they exist. While the <tfoot>
is also optional, if you have the <thead>
the general assumption is that you will also be utilizing <tbody>
.
<tr> or table row tag, is used to define each row in the table. These rows can be within the <thead>, <tbody>, or <tfoot> if they are used, or they can exist without them. However, they must exist within the <table> tag set.
Most of the cells of data will be in the form of <th> tags because of the need to display data headers, and not actual data. While you can use <td> cells, and just style them differently, it is preferred to use the right types of tags.
One thing that should be mentioned is that the <thead>
is the header across the top of the table, not row labels down a side of the table. If your data is such that the first column is headers, try to rotate the data before copying into the web page, or you will need to find a way to layout the table without a <thead>
tag.
<tbody> Tag
If you are using the <thead>
and/or <tfoot>
tag sets, you should be using the <tbody>
tag. This is where most of the information will be stored. We are not storing header row information, nor are we storing summations, or other calculated data here. This is just the data.
Some table libraries, both CSS and JavaScript, require the use of <thead>
and <tbody>
, however HTML does not. I would strongly suggest using them, so you can more easily use these libraries later on if you so choose.
<tfoot> Tag
The <tfoot>
, or table footer, tag is where you can put information such as summations, averages, and other types of calculations on the data.
Since many forms of tabular data do not have a need, or ability to be calculated on this tag set they may be absent, even if the <thead>
and <tbody> is present.
If you choose to use it, then the <tr>
tag will be used to create one or more rows of tabular data cells. However, by themselves, they do not contain the data. The data is contained within the <td> and <th> tags. <th> tags would be used potentially to hold labels for the data, but this is not guaranteed.
Additional (Optional) Table Tags was originally found on Access 2 Learn