HTML — Lesson 15

HTML Tables Advanced

Complex tables with merged cells, sections, and accessibility.

By Majed Qandeel · Jul 26, 2026 · Lesson 15 of 25

HTML Tables Advanced

Advanced tables use colspan, rowspan, and semantic grouping for complex data layouts. Accessibility features ensure screen readers interpret them correctly.

Colspan (Merge Columns)

<table> <tr> <th colspan="3">Quarterly Report</th> </tr> <tr> <th>Q1</th> <th>Q2</th> <th>Q3</th> </tr> <tr> <td>$10k</td> <td>$12k</td> <td>$15k</td> </tr> </table>

Rowspan (Merge Rows)

<table> <tr> <th>Name</th> <th>Subject</th> <th>Score</th> </tr> <tr> <td rowspan="2">Alice</td> <td>Math</td> <td>95</td> </tr> <tr> <td>Science</td> <td>88</td> </tr> </table>

Semantic Table Structure

Use <thead>, <tbody>, <tfoot>, and <caption> for better structure and accessibility.

<table>
  <caption>Employee Salary Report</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Department</th>
      <th scope="col">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Alice</th>
      <td>Engineering</td>
      <td>$95,000</td>
    </tr>
    <tr>
      <th scope="row">Bob</th>
      <td colspan="2">On Leave</td>
    </tr>
    <tr>
      <th scope="row">Carol</th>
      <td>Design</td>
      <td>$85,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Average</td>
      <td>$90,000</td>
    </tr>
  </tfoot>
</table>

Table Accessibility Tips

  • Always use <th> for header cells
  • Use scope="col" or scope="row" on headers
  • Include <caption> to describe the table
  • Use <thead>, <tbody>, <tfoot> for grouping
Tip: Tables should be used for tabular data only, not for page layout. Use CSS Grid or Flexbox for layout purposes.

Practice what you learned in the Deoit Editor — a free, browser-based code editor.

Open Editor →
\r\n