HTML Tables
Tables (<table>) display structured data on web pages. Built from rows (<tr>) and cells (<td> / <th>), they are the standard choice for schedules, pricing tables, data reports, and similar content.
Basic Table Structure
A minimal table requires at least a <table>, rows (<tr>), and data cells (<td>):
Example
HTML
<table border="1" width="100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>London</td>
</tr>
</table>
Common Table Attributes
You can add basic attributes to <table> and <td> to control appearance — however, note that most of these are deprecated in HTML5, and CSS is the recommended replacement. But understanding them as a beginner helps grasp how tables are rendered:
Example
HTML
<table border="1" width="100%">
<tr>
<th align="left">Name</th>
<th width="60%">Bio</th>
</tr>
<tr>
<td valign="top">Alice</td>
<td>Frontend Developer</td>
</tr>
</table>
| Attribute | Purpose | CSS Replacement |
|---|---|---|
border |
Sets table border (e.g. border="1") |
CSS border |
width |
Table or cell width | CSS width |
align |
Horizontal alignment (left / center / right) | CSS text-align |
valign |
Vertical alignment (top / middle / bottom) | CSS vertical-align |
⚠️ Important Note: The above attributes (
border, width, align, valign) are deprecated in HTML5. While border="1" is still supported by browsers, it's only for backward compatibility with legacy code. In real projects, use CSS to control table styling — for example, properties like border, text-align, and vertical-align. This site has table styles pre-configured in style.css, so you can see neat borders without border="1".
Cell Merging
Use colspan to merge columns horizontally and rowspan to merge rows vertically:
Example
HTML
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Contact Info</th>
</tr>
<tr>
<td rowspan="2">Alice</td>
<td>Email</td>
<td>alice@mail.com</td>
</tr>
<tr>
<td>Phone</td>
<td>555-0000-0000</td>
</tr>
</table>
Semantic Table Structure
Beyond basic <table> and <tr>, HTML provides a set of semantic tags to organize the various parts of a table:
Example
HTML
<table border="1">
<caption>2026 Sales Report</caption>
<thead>
<tr>
<th>Quarter</th>
<th>Revenue</th>
<th>Profit</th>
</tr>
</thead>
<tbody>
<tr><td>Q1</td><td>$100K</td><td>$20K</td></tr>
<tr><td>Q2</td><td>$120K</td><td>$25K</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td><td>$220K</td><td>$45K</td></tr>
</tfoot>
</table>
<caption>Table caption, displayed above the table by default<thead>Table header section, typically containing column heading rows<tbody>Table body, containing the data rows<tfoot>Table footer section, ideal for summaries or statistics
❓ FAQ
Q Can I use tables for page layout?
A Absolutely not. Using tables for layout is a practice from 20 years ago — completely obsolete. Reasons: 1) Table layouts are hard to maintain — changing one place can affect the entire page; 2) Tables aren't semantic layout tools — search engines and screen readers misinterpret the content structure; 3) Table layouts look terrible on mobile. Use tables only for displaying data (like grade sheets, price lists, schedules); use CSS Flexbox or Grid for layout.
Q What are
colspan and rowspan? How do I use them?A
colspan merges cells horizontally (across columns), and rowspan merges cells vertically (across rows). Example: <td colspan="2"> means this cell spans 2 columns; <td rowspan="3"> means it spans 3 rows. Common scenarios: header spanning multiple columns (like "Total" spanning Chinese, Math, English columns), group titles spanning multiple rows. Important: after merging, remove the cells at merged positions, or the table will misalign.Q Are
<thead>, <tbody>, and <tfoot> required?A Not required, but strongly recommended. They semanticize table structure:
<thead> wraps header rows, <tbody> wraps data rows, <tfoot> wraps summary rows. Benefits: 1) Browsers can scroll headers and data independently; 2) Print mode repeats headers on each page; 3) Screen readers better understand table structure; 4) Easier CSS styling control. Even with just one row of data, wrap it in <tbody>.📖 Summary
<table>defines a table;<tr>rows;<th>headers;<td>data cells<caption>table title;<thead>header;<tbody>body;<tfoot>footercolspanmerges cells horizontally;rowspanmerges cells vertically- Never use tables for page layout (that's CSS's job); tables are only for displaying data
📝 Exercises
- Class schedule: Use
<table>to create a class schedule with headers (Monday through Friday) and at least 4 rows of classes. - Merging practice: Create a grade report with merged cells — the header has "Student Name" and "Subject Scores" (colspan covering Chinese, Math, and English columns).