ReviseAlgo Logo

HTML Basics

Tables

Master HTML tables, covering headers (th), rows (tr), data cells (td), semantic sections (thead, tbody, tfoot), and cell spanning (colspan, rowspan).

Last Updated: July 15, 2026 • 12 min read

1. Learning Objectives

In this lesson, you will master layout grid tables. By the end of this topic, you will be able to:

  • Build standard tabular layouts using the <table> element.
  • Structure table sections using semantic <thead>, <tbody>, and <tfoot> tags.
  • Implement multi-column and multi-row cell spans using colspan and rowspan.
  • Improve data grid accessibility using scope attributes.

2. Overview

HTML tables are structured to present tabular data—information organized into rows and columns. Tables are constructed using horizontal rows (<tr>) containing header cells (<th>) and data cells (<td>). Sizing and structural spanning are configured using native HTML attributes.

3. Why This Topic Matters

Using standard tables correctly is essential for both data presentation and accessibility:

  • Screen Reader Navigation: Screen readers assist users by reading table cells in association with their corresponding column headers (e.g. announcing "Price: $10"). If you build data grids using generic columns of text instead of semantic table elements, accessibility tools cannot establish these relationships.
  • Aspect and Layout Stability: Misconfigured spanning attributes (colspan/rowspan) can cause cells to overflow, breaking layout alignment.

4. Real-World Analogy

Think of an HTML table like a **spreadsheet spreadsheet layout**:

  • Spreadsheet Grid (The Table): The grid boundary that holds the cells.
  • Header Row (thead / th): The top frozen row containing category labels (e.g. "Item Name", "Quantity").
  • Merged Cells (colspan / rowspan): Merging adjacent cells horizontally to create a title block, or merging them vertically to group repeating dates or category values.

5. Core Concepts

Tag / Attribute Core Description Default Alignment
<th> Declares a table header cell. Represents category labels. Bold, centered alignment
<td> Declares a standard table data cell. Holds the value content. Regular weight, left-aligned
colspan Stretches a cell horizontally across multiple column tracks. Numeric integer (e.g. colspan="2")
rowspan Stretches a cell vertically down across multiple row tracks. Numeric integer (e.g. rowspan="3")

6. Syntax & API Reference

Below is the typical structure of a semantic table layout utilizing sectioning tags:

Key Accessibility Attribute:

  • scope="col": Explicitly associates the header cell with the column it sits at the top of.
  • scope="row": Explicitly associates the header cell with the row track it initiates.

7. Visual Diagram

This diagram displays how cell spans (colspan and rowspan) distribute inside a layout grid:

8. Live Example — Full Working Code

A sample HTML file showing a semantic pricing details table with spans:

9. Interactive Playground

Try It Yourself Challenges:

  1. Change the colspan attribute value in the footer to 1 and observe how the table structure aligns.
  2. Add a new column for "Status" inside the header, and add corresponding data cells to the body rows.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Mismatched column counts Adding more cells in one row than another, breaking table alignment. row 1: 3 cells, row 2: 2 cells Ensure each row has the same number of columns (or use colspan).

11. Best Practices

  • Use semantic sections: Always structure tables with <thead>, <tbody>, and <tfoot> elements. This helps search engine indexation and printing layout flows.
  • Include scope attributes on headers: Set scope="col" or scope="row" on all <th> elements to clarify cell associations for screen readers.
  • Do not use tables for page layouts: Tables should only be used to present structured tabular data. For page layouts, use modern CSS Grid or Flexbox.

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
Table elements and section wrappers Supported Supported Supported Supported

13. Interview Questions

🟢 Q1: What is the difference between `colspan` and `rowspan` attributes?

Answer: colspan merges adjacent cells horizontally across columns in the same row. rowspan merges cells vertically down across multiple rows in the same column.

14. Debugging Exercise

Find and fix the alignment and syntax issues in this table structure:

View Solution

Fixed code:

15. Practice Exercises

Exercise 1: Student Grade Sheet

Build a table displaying three students, their scores in English and Math, and a footer row calculating the overall score average using colspan merges.

16. Scenario-Based Challenge

The Multi-Tier Pricing Comparison Grid Challenge:

You need to build a pricing table comparing "Basic", "SaaS Pro", and "Enterprise" subscription features. The "Enterprise" package includes all basic features plus advanced analytics. Outline the rowspan configurations required to span the "Advanced Analytics" description cell across multiple Enterprise package feature rows.

17. Quick Quiz

Q1: Which attribute merges adjacent table cells horizontally?

A) rowspan

B) colspan

C) span

Answer: B — The colspan attribute merges adjacent cells horizontally across columns.

18. Summary & Key Takeaways

  • • Tables are built using rows (<tr>), header cells (<th>), and data cells (<td>).
  • • Use standard table tags only for presenting structured tabular data, not for general page layouts.

19. Cheat Sheet

Attribute / Element Usage Purpose
colspan attribute Merges cells horizontally across multiple columns.