HTML tables done right: caption, headers and scope

Tables are for data with rows and columns, such as a timetable or a marks sheet. They are not for arranging a page; use CSS grid or flexbox for layout.

<table>
  <caption>Semester 3 internal marks</caption>
  <thead>
    <tr><th scope="col">Subject</th><th scope="col">Internal 1</th><th scope="col">Internal 2</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">DBMS</th><td>18</td><td>21</td></tr>
    <tr><th scope="row">Operating systems</th><td>16</td><td>19</td></tr>
  </tbody>
</table>

What each part adds

• caption: the table's title. Screen readers announce it before the data, and it is better than a heading placed above the table.
• thead / tbody / tfoot: separate the header, the data and any totals. They also help when the table is printed across pages.
• th instead of td for header cells, with scope="col" or scope="row". A screen reader can then say "DBMS, Internal 2, 21" instead of reading bare numbers.
• colspan and rowspan merge cells. Use them sparingly; heavily merged tables are hard for everyone to follow.

On small screens

Wide tables overflow on phones. Wrap the table in a container that scrolls sideways (overflow-x: auto in CSS) rather than shrinking the text until it is unreadable.