<table class="">
<caption>This is the table caption</caption>
<thead>
<tr>
<th scope="col" class=""></th>
<th scope="col" class="">Column 1</th>
<th scope="col" class="">Column 2</th>
<th scope="col" class="">Column 3</th>
<th scope="col" class="">Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="">Row 1</th>
<td class="">Row 1, Column 1</td>
<td class="">Row 1, Column 2</td>
<td class="">Row 1, Column 3</td>
<td class="">Row 1, Column 4</td>
</tr>
<tr>
<th scope="row" class="">Row 2</th>
<td class="">Row 2, Column 1</td>
<td class="">Row 2, Column 2</td>
<td class="">Row 2, Column 3</td>
<td class="">Row 2, Column 4</td>
</tr>
<tr>
<th scope="row" class="">Row 3</th>
<td class="">Row 3, Column 1</td>
<td class="">Row 3, Column 2</td>
<td class="">Row 3, Column 3</td>
<td class="">Row 3, Column 4</td>
</tr>
<tr>
<th scope="row" class="">Row 4</th>
<td class="">Row 4, Column 1</td>
<td class="">Row 4, Column 2</td>
<td class="">Row 4, Column 3</td>
<td class="">Row 4, Column 4</td>
</tr>
</tbody>
</table>
<table class="{{data.modifier}}">
{{#if data.caption}}
<caption>{{data.caption}}</caption>
{{/if}}
{{#if data.thead}}
<thead>
<tr>
{{#each data.thead}}
<th scope="col" class="{{type}}">{{content}}</th>
{{/each}}
</tr>
</thead>
{{/if}}
{{#if data.tfoot}}
<tfoot>
<tr>
{{#each data.tfoot}}
{{#if row-head}}
<th scope="row" class="{{type}}">{{row-head}}</th>
{{else}}
<td class="{{type}}">{{content}}</td>
{{/if}}
{{/each}}
</tr>
</tfoot>
{{/if}}
<tbody>
{{#each data.tbody.rows}}
<tr>
{{#each cells}}
{{#if row-head}}
<th scope="row" class="{{type}}">{{row-head}}</th>
{{else}}
<td class="{{type}}">{{content}}</td>
{{/if}}
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
{
"data": {
"tbody": {
"rows": [
{
"cells": [
{
"row-head": "Row 1"
},
{
"content": "Row 1, Column 1"
},
{
"content": "Row 1, Column 2"
},
{
"content": "Row 1, Column 3"
},
{
"content": "Row 1, Column 4"
}
]
},
{
"cells": [
{
"row-head": "Row 2"
},
{
"content": "Row 2, Column 1"
},
{
"content": "Row 2, Column 2"
},
{
"content": "Row 2, Column 3"
},
{
"content": "Row 2, Column 4"
}
]
},
{
"cells": [
{
"row-head": "Row 3"
},
{
"content": "Row 3, Column 1"
},
{
"content": "Row 3, Column 2"
},
{
"content": "Row 3, Column 3"
},
{
"content": "Row 3, Column 4"
}
]
},
{
"cells": [
{
"row-head": "Row 4"
},
{
"content": "Row 4, Column 1"
},
{
"content": "Row 4, Column 2"
},
{
"content": "Row 4, Column 3"
},
{
"content": "Row 4, Column 4"
}
]
}
]
},
"caption": "This is the table caption",
"thead": [
{
"content": ""
},
{
"content": "Column 1"
},
{
"content": "Column 2"
},
{
"content": "Column 3"
},
{
"content": "Column 4"
}
]
}
}
/**
* Table base styles
*/
@media screen {
table {
border-collapse: collapse;
border-spacing: 0;
}
table,
th,
td {
border: 0;
}
th {
vertical-align: bottom;
}
th,
td {
text-align: left;
padding: 0.1em 0.5em;
}
tbody tr:nth-child(even) {
background-color: var(--table-zebra);
}
/* Numerical value cells */
th.num,
td.num {
text-align: right;
}
td.num {
white-space: nowrap;
}
/* One-liner cells (nowrap) */
td.one-line {
white-space: nowrap;
}
/* Dashboard table */
.dashboard-table {
width: 100%;
}
.dashboard-table caption {
caption-side: bottom;
margin-top: 0.5em;
font-size: 0.9em;
font-style: italic;
text-align: left;
}
}
The HTML <table> element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. Relevant MDN article.
This pattern library has support for a number of variations, as shown.