Row Groupings—Header, Body, and Footer - HTML

Simple tables only have one section, the body, which consists of rows and columns. However, you might want to include additional information in your table by defining a table header and footer to complement the information in the body.

For example, the header could contain the header rows, the body could contain the data, and the footer totals for each column. The advantage to breaking up the table into the three sections is that some user agents will then allow the user to scroll the body of the table separately from the header and footer.

Note: The HTML 4.01 specification dictates that you must use all three sections— header, body, and footer—if you use any. You cannot use only a header and body section without a footer, for example. If you don’t intend to use one of the elements, you must still include tags for the section, even if the section is otherwise empty.
The table header is delimited by <thead> tags—otherwise, its content is exactly like any other table section, delimited by <tr>, <td>, and optionally <th> tags. For example, consider the following table header section:

<thead><tr><th>Name</th><th>Hire Date</th><th>Title</th></tr></thead>

Other than being delimited by <tbody> tags, the table body is defined and formatted just like any other table element. The table footer is delimited by <tfoot> tags and is formatted like the other two sections.

Tip:Although it seems counterintuitive, you should place the <tfoot> section before the <tbody> section in your code to allow the user agent to correctlyanticipate the footer section and appropriately format the <tbody> section. All three section tags support align and valign tags for controlling text alignment within the section. (The char and charoff attributes are also supported for align=“char”.)

For an example of a table with all three sections, consider the following code and itsoutput.

The three table sections (header, body, footer) can be set off by custom rules.

three table sections (header, body, footer) can be set off by custom rules.

Note how the three sections are set off by rules, but the table is otherwise devoid of rules. This is because of the rules=“groups” attribute in the <table> tag. Also note how alignment attributes are used in the section tags to center the text in the table.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics