Tables — Complete Guide
Tables — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of HTML Tutorial on Toolliyo Academy.
On this page
HTML Tutorial · Lesson 16 of 100
Tables
Basics → Forms & semantics → APIs & performance → Projects
Basics · 1 — Structure & media · ~6 min · HTML — Media & Content
What is this?
table, thead, tbody, tr, th, td mark tabular data — not page layout.
Why should you care?
MarkupVerse statements and admin grids use real tables for meaning.
See it live — copy this example
Save as demo.html and open in your browser, or use Run Example below.
<table>
<caption>July transfers</caption>
<thead>
<tr><th scope="col">Date</th><th scope="col">Amount</th><th scope="col">Status</th></tr>
</thead>
<tbody>
<tr><td>19 Jul</td><td>$120.00</td><td>Posted</td></tr>
<tr><td>18 Jul</td><td>$40.00</td><td>Pending</td></tr>
</tbody>
</table>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Use scope on th.
- caption describes the table.
- Don’t use tables for two-column layouts.
Practice next
- Build a 3-column table.
- Add caption.
- scope="col" on headers.
- Add tfoot totals.
- Add scope="row" on first cell.
Remember
Real data tables. th + scope. caption helps.
MarkupVerse transfers table
Account page lists transfers.
Outcome: Headers announced correctly.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
