Tables, Structured Data, Financial Reports, and Tabular Content
Use tables correctly for real tabular data and learn the structure that makes them understandable and accessible.
Inside this chapter
- When to Use a Table
- Basic Table Structure
- Headers and Accessibility
- Captions and Meaning
- Common Mistakes
- Business Example
Series navigation
Study the chapters in order for the clearest path from HTML basics and document structure to semantics, accessibility, SEO, maintainability, and advanced markup practice. Use the navigation at the bottom to move smoothly through the full tutorial series.
When to Use a Table
Tables are for actual tabular data, such as pricing comparisons, schedules, invoices, attendance reports, financial statements, scorecards, and administrative records. Tables should not be used for general page layout.
Basic Table Structure
<table>
<thead>
<tr>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>Asha</td>
<td>Sales</td>
</tr>
</tbody>
</table>Headers and Accessibility
Using <th> for header cells is important because it helps assistive tools communicate how the data is organized. Complex tables may also require scope or association logic.
Captions and Meaning
A caption gives context to the table. Students should learn that data without context can be confusing, especially in reports or dashboards where many tables appear together.
Common Mistakes
- Using tables for layout instead of data
- Missing header cells
- Creating huge unreadable tables without grouping
- Ignoring mobile readability and overflow concerns
Business Example
An admin finance panel may display invoice number, customer name, due date, amount, status, and collection owner in a table. In that situation, table markup is semantically correct because the content is genuinely tabular.