table
The data grid container.
Platform under construction
HTML Table Elements
Learn table, thead, tbody, tr, th, td as part of the HTML element system: when to use it, how it fits inside a document and what mistakes to avoid.
Tables
Tables are for structured data, not page layout.
A table describes relationships between rows and columns. It is perfect for schedules, comparisons, financial data, results and other grid-like information.
Tables become powerful when headers, captions and scopes are clear. They become painful when used as layout hacks.
Element group:
table, thead, tbody, tr, th, td. Real structured data, never layout hacks. Syntax in context
Table markup should expose relationships in the data.
Use th for headers and scope where needed, so users and tools can connect each data cell to the right label.
<table>
<caption>Course modules</caption>
<thead>
<tr><th scope="col">Module</th><th scope="col">Level</th></tr>
</thead>
<tbody>
<tr><td>HTML</td><td>Beginner</td></tr>
<tr><td>APIs</td><td>Intermediate</td></tr>
</tbody>
</table>
Good versus weak
The difference is usually meaning, not only syntax.
Good
<table>
<caption>Course modules</caption>
<thead>
<tr><th scope="col">Module</th><th scope="col">Level</th></tr>
</thead>
<tbody>
<tr><td>HTML</td><td>Beginner</td></tr>
<tr><td>APIs</td><td>Intermediate</td></tr>
</tbody>
</table>
Weak
<table> <tr><td><h1>Page title</h1></td><td>Sidebar</td></tr> </table>
Rules that matter
Use these rules before publishing real HTML.
Use for data
Tables should represent row-column relationships.
Add headers
Use th for labels, not styled td elements.
Caption when useful
A caption can explain what the table represents.
Avoid layout tables
Use CSS grid or flexbox for layout.
Avoid old layout attributes
Attributes such as border, cellpadding and cellspacing belong to old presentational HTML. Use CSS instead.
Production thinking
HTML is also for accessibility, SEO, security and maintenance.
Why does this matter?
Beginners often ask why this is not just a div with styling. The reason is that HTML is read by browsers, search engines, screen readers and future developers. Clear meaning makes the page easier to use and maintain.
Accessibility
Headers and captions help screen reader users understand how cells relate to rows and columns.
Production note
Tables need responsive planning. Wide data tables often need horizontal scroll or a mobile-specific presentation.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Change one tag, attribute or text value in the example.
- Run the preview and describe exactly what changed.
- Reset the lab and repeat the same change without looking at the original.
Practice assignment
Do this before moving to the next lesson.
- Change one meaningful part of the HTML, not only the visible text.
- Run the preview and check whether the result still makes semantic sense.
- Explain why the element or attribute you changed belongs in this exact place.
Try it yourself
Build a readable data table
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?