Table Headers and Structure

Semantic table structure improves accessibility and allows for better styling. Learn about thead, tbody, tfoot, and scope attributes.

Table Sections

Table sections:

• <thead> - Header rows
• <tbody> - Body rows (main data)
• <tfoot> - Footer rows (summaries)

Scope Attribute

The scope attribute:

• col - Header for a column
• row - Header for a row
• colgroup - Header for a group of columns
• rowgroup - Header for a group of rows

This is essential for screen readers to associate data with headers.

Column Groups

Column groups (<colgroup> and <col>):

• Style entire columns
• span attribute affects multiple columns

Multiple Header Rows

Complex headers use colspan and rowspan (covered in next lesson).

Styling Table Sections

Exercise: Create Structured Table

Create a table with proper semantic structure:

Semantic table structure makes tables accessible and easier to style!