Working with HTML Tables

1. Basic Table Structure

Tables in HTML are defined using the <table> element. Inside a table, rows are created with <tr> (table row), and cells are defined with <td> (table data) or <th> (table header).

Example:

Code Block Loading...

Accessibility Tip

  • Always use <th> for headers, not <td>.
  • Add the scope attribute to clarify whether a header applies to a row or column:

Code Block Loading...

By default, browsers render tables without much styling. Adding CSS improves readability:

Code Block Loading...

Accessibility Tip

  • Ensure sufficient color contrast between text and background.
  • Avoid using color alone to convey meaning (e.g., “red = error”).

2. Spanning Columns and Rows

You can merge cells across multiple columns or rows using the colspan and rowspan attributes.

  • Column Span

Code Block Loading...

  • Row Span

Code Block Loading...

Accessibility Tip

  • Screen readers may struggle with complex spans. Use them sparingly and test with assistive technology.

3. Row Headings

Just like column headings, you can use <th> inside rows to create row headers.

Code Block Loading...

4. Organizing Tables with Sections

For larger tables, you can divide content into header, body, and footer using:

  • <thead> → wraps the header rows
  • <tbody> → wraps the main content rows
  • <tfoot> → wraps the footer rows

Example:

Code Block Loading...

5. Adding a Caption

Every table should have a descriptive caption using the <caption> tag. Place it immediately after the opening <table> tag.

Code Block Loading...

6. Advanced Accessibility Practices

  • Use headers attribute in <td> for complex tables to explicitly link data cells to their headers.
  • Consider ARIA roles (role="table") if building custom table-like layouts.
  • Test with screen readers (NVDA, JAWS, VoiceOver) to ensure logical reading order.
  • Keep tables for tabular data only. For layout, use CSS Flexbox or Grid instead.

With these techniques—basic structure, spanning, headings, sections, and captions—you can build well-organized, accessible, and professional-looking tables in HTML.