The <table> element is used to display tabular
data - information presented in a two-dimensional table comprised of
rows and columns of cells.
table component is used to style specific
instances of the <table> element.caption should be used if the table
requires a title or brief explanation. The <caption>
element is only permitted immediately after the <table>
start tag. A <table> element may only contain one
<caption> element.<thead> should be used to contain header rows<tbody> should be used to contain non-header
body rows<th> should be used for header cells| header one | header two | header three |
|---|---|---|
| col1 row1 | col1 row1 | col1 row1 |
| col1 row2 | col1 row2 | col1 row2 |
| col1 row3 | col1 row3 | col1 row3 |
| col1 row4 | col1 row4 | col1 row4 |
<div class="table-container">
<table class="table">
...
</table>
</div>
The <table> element can also include a caption.
| header one | header two | header three |
|---|---|---|
| col1 row1 | col1 row1 | col1 row1 |
| col1 row2 | col1 row2 | col1 row2 |
| col1 row3 | col1 row3 | col1 row3 |
| col1 row4 | col1 row4 | col1 row4 |
<div class="table-container">
<table class="table">
<caption>Table caption</caption>
...
</table>
</div>
Used where a clear distinction between rows is desired.
| header one | header two | header three |
|---|---|---|
| col1 row1 | col1 row1 | col1 row1 |
| col1 row2 | col1 row2 | col1 row2 |
| col1 row3 | col1 row3 | col1 row3 |
| col1 row4 | col1 row4 | col1 row4 |
<div class="table-container">
<table class="table--striped">
...
</table>
</div>
Use where a hover state is desired for each row.
| header one | header two | header three |
|---|---|---|
| col1 row1 | col1 row1 | col1 row1 |
| col1 row2 | col1 row2 | col1 row2 |
| col1 row3 | col1 row3 | col1 row3 |
| col1 row4 | col1 row4 | col1 row4 |
<div class="table-container">
<table class="table--hover">
...
</table>
</div>
Used where borders are required all around each cell.
| header one | header two | header three |
|---|---|---|
| col1 row1 | col1 row1 | col1 row1 |
| col1 row2 | col1 row2 | col1 row2 |
| col1 row3 | col1 row3 | col1 row3 |
| col1 row4 | col1 row4 | col1 row4 |
<div class="table-container">
<table class="table--border">
...
</table>
</div>