HTML tables display tabular information such as financial statements, product specifications, pricing plans, and data schedules. You create tables using the <table> element along with table rows (<tr>), table headers (<th>), and table data cells (<td>).
HTML tables use semantic container tags to group data rows logically:
<table>
<caption>Quarterly Revenue Summary</caption>
<thead>
<tr>
<th>Quarter</th>
<th>Revenue</th>
</tr>
</thead>
<tbody>
<tr>
<td>Q1 2026</td>
<td>$45,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$45,000</td>
</tr>
</tfoot>
</table>
Core table elements explained:
<table>: The outer wrapper for all tabular contents.<thead>: Groups header rows containing category names (<th>).<tbody>: Encloses the main data rows (<tr>) and cells (<td>).<tfoot>: Contains summary rows (totals, averages, notes).colspan & rowspan: Attributes used to merge cells across multiple columns or rows.flowchart TD
A["table"] --> B["caption (Optional Title)"]
A --> C["thead (Header Section)"]
A --> D["tbody (Data Rows Section)"]
A --> E["tfoot (Summary / Totals Section)"]
C --> C1["tr -> th (Header Cells)"]
D --> D1["tr -> td (Data Cells)"]
E --> E1["tr -> td (Total Cells)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Tables Demonstration</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Pricing Plans Comparison</h2>
<!-- Styled accessible data table -->
<table style="width: 100%; border-collapse: collapse; background-color: #1e293b; border-radius: 8px; overflow: hidden;">
<caption style="padding: 10px; font-weight: bold; color: #38bdf8;">Plan Features Breakdown</caption>
<thead>
<tr style="background-color: #334155; text-align: left;">
<th style="padding: 12px;">Feature</th>
<th style="padding: 12px;">Starter</th>
<th style="padding: 12px;">Pro</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid #334155;">
<td style="padding: 12px;">Projects</td>
<td style="padding: 12px;">5</td>
<td style="padding: 12px;">Unlimited</td>
</tr>
<tr style="border-bottom: 1px solid #334155;">
<td style="padding: 12px;">Storage</td>
<td style="padding: 12px;">10 GB</td>
<td style="padding: 12px;">500 GB</td>
</tr>
</tbody>
<tfoot>
<tr style="background-color: #0f172a; font-weight: bold;">
<td style="padding: 12px;">Monthly Price</td>
<td style="padding: 12px;">$9/mo</td>
<td style="padding: 12px;">$29/mo</td>
</tr>
</tfoot>
</table>
</body>
</html>
<table> strictly for true 2D grid dataset presentation.scope="col" or scope="row" on header cells: Helps screen readers announce table headers clearly when navigating individual data cells.border-collapse: collapse in CSS: Prevents awkward double borders between adjacent table cells.Create an HTML table listing 3 student names, their exam scores, and a final row merging 2 columns with colspan="2" to display the class average score!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.