HTML Tables: A Practical Guide for Beginners

When a table helps

An HTML table presents related data in rows and columns. It is useful for a class schedule, a comparison of modules, a price list with consistent fields, or a set of marks. It helps readers scan the relationship between values without reading each item as a separate paragraph.

Do not use a table to arrange a page layout. Navigation, cards and general page sections should use semantic layout elements and CSS. Reserve tables for data whose rows and columns have a meaningful relationship.

Core HTML table elements

Header cells explain what each value means. Use scope="col" for a column heading and scope="row" for a row heading when the table needs that relationship.

A complete example

This example shows a small workshop schedule. The caption tells a reader what the data represents, while the headers explain each column.

<table>
  <caption>Sample workshop schedule</caption>
  <thead><tr>
    <th scope="col">Topic</th>
    <th scope="col">Format</th>
    <th scope="col">Practice task</th>
  </tr></thead>
  <tbody><tr>
    <th scope="row">HTML structure</th>
    <td>Workshop</td>
    <td>Create a semantic page outline</td>
  </tr></tbody>
</table>

A browser gives tables basic defaults, but CSS controls spacing, borders, alignment and overflow. Keep HTML responsible for meaning and use CSS for presentation.

Make the data easy to read

• Write a caption that identifies the dataset instead of relying only on a nearby heading.
• Use concise headings and keep units clear, such as Duration (minutes).
• Keep related values in the same column and avoid merged cells unless their relationship remains clear.
• Use header cells for labels. Bold text in a normal data cell does not provide the same structure.
• Check contrast, spacing and keyboard navigation after styling the table.

Plan for small screens

Wide tables can require horizontal scrolling on a small screen. That is acceptable when it preserves meaningful columns, provided the table has a clear caption and headings. Wrap the table in a responsive container and avoid hiding essential columns just to make it narrower.

Open the page at a narrow width and confirm that a reader can identify the table, scroll it when necessary and match each value to its heading. The Web Designing and Frontend guide covers the wider HTML, CSS and responsive-design foundation.

Practice exercise: a project feature list

Create a table for a small project with the columns Feature, User need, Status and Tested. Add three rows, then write a caption that explains the table. Use one row header per feature and check the result on a phone-sized viewport.

Commit the exercise to a small project repository after reviewing the diff. The Git and GitHub guide can help you practise a focused change, a clear commit message and a README update alongside the HTML work.

Frequently asked questions

Should I use a table for a page layout?

No. Use semantic layout elements and CSS for page layout. A table is for structured data with real rows and columns.

What is the difference between <th> and <td>?

A <th> labels a row or column; a <td> contains the corresponding value. The distinction helps readers and assistive technology understand the data.

Can a responsive table scroll horizontally?

Yes. A horizontal scroll container can preserve a complex data relationship on a narrow screen. Make the caption and headings clear, then test that the table remains usable.