Table with Footer (tfoot) Template
Add a summary row for totals or calculations to your table using the semantic tfoot element.
The table footer is the semantically correct place for summarizing the data in the table's columns, such as providing sums, averages, or final counts.
About the Table Footer
The tfoot element is used to group footer content in an HTML table. It works in conjunction with thead and tbody to specify the distinct parts of a long table. This is especially useful for tables that are so long they might be printed across multiple pages; browsers can be instructed to repeat the header and footer on each page.
Even for on-screen display, using tfoot clearly separates your summary data from the main content, allowing for unique styling and better structure.
Key Features:
- Semantic Summary: Provides a designated, logical place for table-level summaries and totals.
- Clear Structure: Distinguishes summary information from the primary data contained in the
tbody. - Print-Friendly: Allows browsers to repeat the footer on each page when printing large tables.
- Styling Hook: Offers a specific element to target with CSS for unique footer styling (e.g., a different background color or bold text).
Ideal Use Cases:
- Financial tables displaying a "Total" row.
- Sales reports with summary calculations for columns.
- Data tables showing averages or counts.
- Any table where column-wide summary information is needed.
Dependencies:
None. This template uses only pure HTML and CSS.
Code
Here's the full code for the table with a footer: