A table in HTML displays tabular data, just like a spreadsheet.
A table has rows, columns, and, optionally, a header and a footer.
It takes at least 3 different tags to create a table: <table>, <tr>, and <td>.
A <table> with three rows and three columns. The top row is a header row.
| Firstname | Lastname | Country |
|---|---|---|
| Christina | Berglund | Sweden |
| Maria | Larsson | Sweden |
<style>
.tb { border-collapse: collapse; width:400px; }
.tb th, .tb td { padding: 5px; border: solid 1px #777; }
.tb th { background-color: aliceblue; }
</style>
<table class="tb">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Country</th>
</tr>
<tr>
<td>Christina</td>
<td>Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Maria</td>
<td>Larsson</td>
<td>Sweden</td>
</tr>
</table>
Tags to create a table:
The <table> tag creates a table.
The <tr> tag creates a row in a table.
The <td> tag creates a data cell in a row.
The <th> tag creates a header cell in a row.
For details on the table element, see our HTML table tag reference.
By default, tables have no borders, but they are added with CSS.
A <table> with highlighted borders.
| Firstname | Lastname | Country |
|---|---|---|
| Christina | Berglund | Sweden |
| Maria | Larsson | Sweden |
<style>
.tbb { border-collapse: collapse; width:400px; }
.tbb th, .tbb td { padding: 5px; border: solid 1px orangered; }
.tbb th { background-color: aliceblue; }
</style>
<table class="tbb">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Country</th>
</tr>
<tr>
<td>Christina</td>
<td>Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Maria</td>
<td>Larsson</td>
<td>Sweden</td>
</tr>
</table>
For details on border, see our CSS border property reference.
Border spacing is defined with the CSS border-spacing property.
The border-collapse property defines whether cells share the borders or have separate borders.
A <table> with separate borders for each cell.
| Firstname | Lastname | Country |
|---|---|---|
| Christina | Berglund | Sweden |
| Maria | Larsson | Sweden |
<style>
.tbs { border-collapse: separate; border-spacing: 10px; width:400px; }
.tbs th, .tbs td { padding: 5px; border: solid 1px #777; }
.tbs th { background-color: aliceblue; }
</style>
<table class="tbs">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Country</th>
</tr>
<tr>
<td>Christina</td>
<td>Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Maria</td>
<td>Larsson</td>
<td>Sweden</td>
</tr>
</table>
For details on border-spacing, see our CSS border-spacing property reference.
The CSS padding attribute sets the space between the cell content and its borders.
A <table> with extra padding for each cell, giving them some extra room.
| Firstname | Lastname | Country |
|---|---|---|
| Christina | Berglund | Sweden |
| Maria | Larsson | Sweden |
<style>
.tbp { border-collapse: collapse; width:400px; }
.tbp th, .tbp td { padding: 10px; border: solid 1px #777; }
.tbp th { background-color: aliceblue; }
</style>
<table class="tbp">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Country</th>
</tr>
<tr>
<td>Christina</td>
<td>Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Maria</td>
<td>Larsson</td>
<td>Sweden</td>
</tr>
</table>
For details on padding, see our CSS padding property reference.
By default, table headings are bold and centered.
A <table> styled with a left-aligned, aliceblue heading.
| Firstname | Lastname | Age |
|---|---|---|
| Cecilia | Smith | 40 |
| Maria | Jackson | 44 |
| Albert | de Wei | 66 |
<style>
.tba { border-collapse: collapse; width:400px; }
.tba th, .tba td { padding: 5px; border: solid 1px #777; text-align:left; }
.tba th { background-color: aliceblue; font-weight:bold; }
</style>
<table class="tba">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Cecilia</td>
<td>Smith</td>
<td>40</td>
</tr>
<tr>
<td>Maria</td>
<td>Jackson</td>
<td>44</td>
</tr>
<tr>
<td>Albert</td>
<td>de Wei</td>
<td>66</td>
</tr>
</table>
For details on text alignment, see our CSS text-align property reference.
The horizontal positioning is set with the CSS text-align property: either left, center, or right.
Vertical alignment is set with vertical-align. Possible values are
baseline, sub, super, text-top, text-bottom, middle, top, bottom, or as a percentage.
A <table> with text that aligns in the middle, both horizontally and vertically.
| Firstname | Lastname | Age |
|---|---|---|
| Cecilia | Smith | 40 |
| Maria | Jackson | 44 |
| Albert | de Wei | 66 |
<style>
.tbv { border-collapse: collapse; width:400px; }
.tbv th, .tbv td { padding: 10px; vertical-align: middle;
border: solid 1px #777; text-align: center; }
.tbv th { background-color: aliceblue; font-weight:bold; }
</style>
<table class="tbv">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Cecilia</td>
<td>Smith</td>
<td>40</td>
</tr>
<tr>
<td>Maria</td>
<td>Jackson</td>
<td>44</td>
</tr>
<tr>
<td>Albert</td>
<td>de Wei</td>
<td>66</td>
</tr>
</table>
For details on vertical-align, see our CSS vertical-align property reference.
Use the colspan attribute to merge two or more columns into a single column.
In this <table>, two header cells have been merged.
| Fullname | Country | |
|---|---|---|
| Christina | Berglund | Sweden |
| Maria | Larsson | Sweden |
<style>
.tbc { border-collapse: collapse; width:400px; }
.tbc th, .tbc td { padding: 5px; border: solid 1px #777; }
.tbc th { background-color: aliceblue; }
</style>
<table class="tbc">
<tr>
<th colspan="2">Fullname</th>
<th>Country</th>
</tr>
<tr>
<td>Christina</td>
<td>Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Maria</td>
<td>Larsson</td>
<td>Sweden</td>
</tr>
</table>
Use the rowspan attribute to merge two or more rows into a single row.
In this <table>, three rows have been merged into one.
| Name | Christina Berglund |
|---|---|
| Countries | Sweden |
| USA | |
| Italy |
<style>
.tbr { border-collapse: collapse; width:400px; }
.tbr th, .tbr td { padding: 5px; border: solid 1px #777; }
.tbr th { background-color: aliceblue; }
</style>
<table class="tbr">
<tr>
<th>Name</th>
<td>Christina Berglund</td>
</tr>
<tr>
<th rowspan="3">Countries</th>
<td>Sweden</td>
</tr>
<tr>
<td>USA</td>
</tr>
<tr>
<td>Italy</td>
</tr>
</table>
With the CSS tr:nth-child(odd) selector you can style alternating rows in a table.
This is refered to as "Zebra Stripes".
A <table> styled with zebra stripes.
| Firstname | Lastname | Country |
|---|---|---|
| Christina | Berglund | Sweden |
| Maria | Larsson | Sweden |
| Olav | Helmland | Sweden |
| Lara | Peterson | Sweden |
<style>
.zebra { border-collapse: collapse; width:400px; }
.zebra tr:nth-child(odd) { background: aliceblue; }
.zebra th, .zebra td { padding: 5px; border: solid 1px #777; }
.zebra th { background-color: aliceblue; }
</style>
<table class="zebra">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Country</th>
</tr>
<tr>
<td>Christina</td>
<td>Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Maria</td>
<td>Larsson</td>
<td>Sweden</td>
</tr>
<tr>
<td>Olav</td>
<td>Helmland</td>
<td>Sweden</td>
</tr>
<tr>
<td>Lara</td>
<td>Peterson</td>
<td>Sweden</td>
</tr>
</table>
A table is a complex UI feature and to define one in HTML requires multiple tags.
Here is a list of all table tags that you can use to create comprehensive tables.
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <tr> | Defines a row in a table |
| <th> | Defines a header cell in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a colgroup element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
