HTML Notes
HubHTML Document Structure — DOCTYPE, Head, Body, and Meta TagsWhat is HTML? — The Language of the WebHTML Headings, Paragraphs, and Text FormattingHTML Links and Images — Anchor Tags, href, src, altHTML Lists — Ordered, Unordered, and Description ListsHTML Tables — Structure, Colspan, Rowspan, AccessibilityHTML Forms — Input Types, Labels, Validation, and AccessibilityHTML Interview Questions — 50 Questions with AnswersHTML5 Features — Audio, Video, Canvas, Storage, and APIsSemantic HTML5 — Elements, Structure, SEO, and Accessibility
Learn HTML tables completely — table structure with thead, tbody, tfoot, spanning cells with colspan and rowspan, caption, scope, and making tables accessible for screen readers.
Tables are for tabular data — information that naturally fits in rows and columns. They are commonly misused for page layout (a bad practice from the 1990s), but for actual data tables — comparison charts, schedules, price lists, data grids — they are the correct and semantic choice.
Table Caption
Always add a <caption> to describe what the table contains. It is the first element inside <table>:
html example
<table>
<caption>Q1 2026 Sales Summary by Region</caption>
<thead>
<tr>
<th>Region</th>
<th>Sales (₹ Crore)</th>
<th>Growth %</th>
</tr>
</thead>
<tbody>
<tr>
<td>North</td>
<td>12.4</td>
<td>+8.2%</td>
</tr>
<tr>
<td>South</td>
<td>18.7</td>
<td>+12.5%</td>
</tr>
<tr>
<td>East</td>
<td>9.1</td>
<td>+3.4%</td>
</tr>
<tr>
<td>West</td>
<td>22.3</td>
<td>+15.1%</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>62.5</td>
<td>+10.3%</td>
</tr>
</tfoot>
</table>Spanning Cells
colspan — Span Multiple Columns
A cell that spans across multiple columns:
Example
<table>
<thead>
<tr>
<th colspan="2">Personal Info</th> <!-- spans 2 columns -->
<th colspan="2">Contact Info</th> <!-- spans 2 columns -->
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rahul</td>
<td>Sharma</td>
<td>rahul@email.com</td>
<td>+91 98765 43210</td>
</tr>
</tbody>
</table>
rowspan — Span Multiple Rows
A cell that spans across multiple rows:
Example
<table>
<caption>Weekly Schedule</caption>
<thead>
<tr>
<th>Day</th>
<th>Morning</th>
<th>Afternoon</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>HTML Lecture</td>
<td rowspan="2">Lab Session</td> <!-- spans Monday AND Tuesday afternoon -->
</tr>
<tr>
<td>Tuesday</td>
<td>CSS Lecture</td>
<!-- No <td> here — Tuesday afternoon is covered by rowspan above -->
</tr>
<tr>
<td>Wednesday</td>
<td>JavaScript Lecture</td>
<td>Project Work</td>
</tr>
</tbody>
</table>
Combined colspan and rowspan
html example
<table>
<caption>Exam Results Summary</caption>
<tr>
<th rowspan="2">Student</th>
<th colspan="3">Scores</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Maths</th>
<th>Science</th>
<th>English</th>
</tr>
<tr>
<td>Anjali</td>
<td>92</td>
<td>88</td>
<td>95</td>
<td>275</td>
</tr>
<tr>
<td>Rohan</td>
<td>78</td>
<td>84</td>
<td>80</td>
<td>242</td>
</tr>
</table>The scope Attribute — Accessibility
The scope attribute on <th> tells screen readers whether the header applies to its row or column:
Example
<table>
<caption>Product Price Comparison</caption>
<thead>
<tr>
<th scope="col">Product</th> <!-- column header -->
<th scope="col">Basic Plan</th>
<th scope="col">Pro Plan</th>
<th scope="col">Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Storage</th> <!-- row header -->
<td>5 GB</td>
<td>100 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Users</th>
<td>1</td>
<td>5</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Price/month</th>
<td>Free</td>
<td>₹499</td>
<td>Custom</td>
</tr>
</tbody>
</table>
scope value | Meaning |
|---|---|
col | Header applies to all cells in its column |
row | Header applies to all cells in its row |
colgroup | Header applies to a column group |
rowgroup | Header applies to a row group |
Column Grouping with <colgroup>
You can apply styles to entire columns using <colgroup> and <col>:
Example
<table>
<colgroup>
<col style="background-color: #f0f8ff"> <!-- Column 1 -->
<col span="2" style="background-color: #fff8f0"> <!-- Columns 2-3 -->
</colgroup>
<thead>
<tr>
<th>Subject</th>
<th>Marks</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mathematics</td>
<td>92</td>
<td>A+</td>
</tr>
<tr>
<td>Physics</td>
<td>85</td>
<td>A</td>
</tr>
</tbody>
</table>
Tables vs CSS Grid and Flexbox
This is a common confusion:
| Purpose | Use |
|---|---|
| Displaying tabular data (schedules, prices, scores) | <table> |
| Page layout (header, sidebar, content, footer) | CSS Grid or Flexbox |
| Card grids, navigation bars | CSS Flexbox/Grid |
| Comparison charts | <table> |
Never use tables for page layout. Using tables for layout was common in the 1990s because CSS didn't exist, but it causes serious accessibility problems, poor mobile responsiveness, and is considered bad practice today.
Responsive Tables
Tables can overflow on small screens. A common solution is wrapping them in a scrollable container:
Example
<div style="overflow-x: auto;">
<table>
<!-- Wide table content -->
</table>
</div>
Or with CSS:
css example
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
table {
font-size: 14px;
}
}Complete Real-World Example
A product comparison table following all best practices:
html example
<div class="table-wrapper">
<table>
<caption>WoHoTech Subscription Plans — Feature Comparison</caption>
<thead>
<tr>
<th scope="col">Feature</th>
<th scope="col">Free</th>
<th scope="col">Pro <small>(₹499/mo)</small></th>
<th scope="col">Team <small>(₹1499/mo)</small></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">AI Queries / month</th>
<td>50</td>
<td>2,000</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Image Generation</th>
<td>5 / month</td>
<td>200 / month</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Coding Problems Access</th>
<td>100 problems</td>
<td>All 800+</td>
<td>All 800+</td>
</tr>
<tr>
<th scope="row">Team Members</th>
<td>—</td>
<td>1</td>
<td>Up to 20</td>
</tr>
<tr>
<th scope="row">Priority Support</th>
<td>—</td>
<td>Email</td>
<td>24/7 Chat + Email</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Get Started</th>
<td><a href="/signup">Sign Up Free</a></td>
<td><a href="/payment">Upgrade to Pro</a></td>
<td><a href="/contact">Contact Sales</a></td>
</tr>
</tfoot>
</table>
</div>Summary
- Use
<table>only for tabular data — not for page layout - Structure:
<table>→<thead>/<tbody>/<tfoot>→<tr>→<th>/<td> - Add
<caption>to describe every table - Use
<th>for header cells,<td>for data cells - Add
scope="col"andscope="row"to header cells for accessibility colspanmerges cells horizontally,rowspanmerges cells vertically- Wrap wide tables in a scrollable
<div>for mobile compatibility
*Next: HTML Forms*
Exam Focus
Revise definitions, diagrams, examples, and short-answer points for HTML Tables — Structure, Colspan, Rowspan, Accessibility.
Interview Use
Prepare one clear explanation, one practical example, and one common mistake for this HTML Complete Guide topic.
Search Terms
html-complete-guide, html complete guide, html, complete, guide, basics, tables, html tables — structure, colspan, rowspan, accessibility
Related HTML Complete Guide Topics
Continue learning this concept
BasicsHTML Headings, Paragraphs, and Text FormattingLearn all HTML text elements — h1 through h6 headings, paragraphs, line breaks, strong, em, span, div, blockquote, code, pre, and inline vs block elements with practical examples.BasicsHTML Links and Images — Anchor Tags, href, src, altMaster HTML links and images — anchor tags, href types (absolute, relative, mailto, tel), target attribute, images with src and alt, figure, figcaption, responsive images with srcset, and image optimization best practices.BasicsHTML Lists — Ordered, Unordered, and Description ListsMaster all HTML list types — unordered lists with bullets, ordered lists with numbers, description lists, nested lists, list item styling, and when to use each type with real-world examples.FormsHTML Forms — Input Types, Labels, Validation, and AccessibilityMaster HTML forms completely — form element, all input types (text, email, password, number, date, checkbox, radio, file), textarea, select, fieldset, legend, labels, built-in validation, and form accessibility.Advanced / HTML5HTML5 Features — Audio, Video, Canvas, Storage, and APIsExplore HTML5Interview PreparationHTML Interview Questions — 50 Questions with Answers50 essential HTML interview questions with detailed answers — covering basics, semantic HTML, forms, accessibility, HTML5 features, performance, SEO, and advanced topics for front-end developer interviews.