HTML Table Examples
A runnable gallery of everyday HTML table patterns — header cells, data rows, captions, column and row spans, striped rows, grouped sections, borders and column alignment — each a short editable demo.
Examples · Updated
Overview
A gallery of runnable HTML table patterns — edit any one live in the editor. New to the model? Start with HTML Tables — the basics, build one via how to create a table, or read the <table> reference and colspan and rowspan. For inputs rather than data, see HTML Forms.
Examples
Header cells with th
Multiple data rows
Table with a caption
Column span with colspan
Row span with rowspan
Striped rows for readability
Grouped with thead and tbody
Collapsed borders
Aligned number columns
Frequently asked questions
How do I make a cell span two columns in HTML?
Add
colspan="2" to the <th> or <td>, and give that row one fewer cell so the totals still match the column count. See colspan and rowspan.How do I stripe alternating table rows?
Use CSS with
tr:nth-child(even) td { background: #f1f5f9 } to shade every other body row. No extra markup is needed — the selector targets alternating rows automatically.How do I right-align a column of numbers?
Add a class to the number cells and set
text-align: right on it, or target the column with a CSS selector. Right-aligning numbers lines up their digits for easy comparison.