Spanning Cells & Accessible Tables

Merging cells

Make a cell stretch across columns with colspan, or down across rows with rowspan.

<table border="1">
  <tr>
    <th colspan="2">Full Name</th>
  </tr>
  <tr>
    <td>Asha</td>
    <td>Rao</td>
  </tr>
</table>

The first row has a single <th colspan="2"> — colspan="2" makes that one cell stretch across two columns, so “Full Name” spans the full width. The row below it still has two separate cells (“Asha”, “Rao”) sitting under that wide header.

Captions and accessibility

This next table adds two finishing touches. <caption> gives the table a visible title, and the scope attribute on each header cell tells screen readers (software that reads the page aloud) which cells it labels. Read the code, then the walk-through below it.

<table border="1">
  <caption>Batch Schedule</caption>
  <thead>
    <tr><th scope="col">Day</th><th scope="col">Topic</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Mon</th><td>HTML</td></tr>
    <tr><th scope="row">Tue</th><td>CSS</td></tr>
  </tbody>
</table>

<caption> gives the whole table a title (“Batch Schedule”) shown above it. The scope attribute tells screen readers what each header labels: scope="col" means “this heads a column” and scope="row" means “this heads a row” (so “Mon” and “Tue” label their rows). Sighted users see a normal table; screen-reader users get the extra context.