Table
This section shows the different styling options of HTML tables.
Table
| First name | Last name | |
|---|---|---|
| Roland | May Frontend developer | rolandmay@yoveo.foo |
| Mark | Ross Scrum master | mark.ross@skivee.name |
| Melissa | Anton Frontend key developer | m.anton@grkeo.foo |
| Tyler | Nichols Frontend developer | tyler.nichols@cogibox.foo |
| Amanda Maria | Kennedy Chief product expert | amanda-maria-kennedy@gmail.foo |
<table class="table">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>E-Mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Roland
</td>
<td>
May
<div class="td__description">
Frontend developer
</div>
</td>
<td>
<a href="mailto:rolandmay@yoveo.foo">
rolandmay@yoveo.foo
</a>
</td>
</tr>
<tr>
<td>
Mark
</td>
<td>
Ross
<div class="td__description">
Scrum master
</div>
</td>
<td>
<a href="mailto:mark.ross@skivee.foo">
mark.ross@skivee.name
</a>
</td>
</tr>
<tr>
<td>Melissa</td>
<td>
Anton
<div class="td__description">
Frontend key developer
</div>
</td>
<td>
<a href="mailto:m.anton@grkeo.foo">
m.anton@grkeo.foo
</a>
</td>
</tr>
<tr>
<td>Tyler</td>
<td>
Nichols
<div class="td__description">
Frontend developer
</div>
</td>
<td>
<a href="mailto:tyler.nichols@cogibox.foo">
tyler.nichols@cogibox.foo
</a>
</td>
</tr>
<tr>
<td>Amanda Maria</td>
<td>
Kennedy
<div class="td__description">
Chief product expert
</div>
</td>
<td>
<a href="mailto:amanda-maria-kennedy@gmail.foo">
amanda-maria-kennedy@gmail.foo
</a>
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
Small table
| First name | Last name | |
|---|---|---|
| Roland | May Frontend developer | rolandmay@yoveo.foo |
| Mark | Ross Scrum master | mark.ross@skivee.foo |
| Melissa | Anton Frontend key developer | m.anton@grkeo.foo |
| Tyler | Nichols Frontend developer | tyler.nichols@cogibox.foo |
| Amanda Maria | Kennedy Chief product expert | amanda-maria-kennedy@gmail.foo |
<table class="table table--small">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>E-Mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Roland</td>
<td>
May
<div class="td__description">
Frontend developer
</div>
</td>
<td>
<a href="mailto:roymay@yoveo.foo">
rolandmay@yoveo.foo
</a>
</td>
</tr>
<tr>
<td>
Mark
</td>
<td>
Ross
<div class="td__description">
Scrum master
</div>
</td>
<td>
<a href="mailto:mark.ross@skivee.foo">
mark.ross@skivee.foo
</a>
</td>
</tr>
<tr>
<td>Melissa</td>
<td>
Anton
<div class="td__description">
Frontend key developer
</div>
</td>
<td>
<a href="mailto:m.anton@grkeo.foo">
m.anton@grkeo.foo
</a>
</td>
</tr>
<tr>
<td>Tyler</td>
<td>
Nichols
<div class="td__description">
Frontend developer
</div>
</td>
<td>
<a href="mailto:tyler.nichols@cogibox.foo">
tyler.nichols@cogibox.foo
</a>
</td>
</tr>
<tr>
<td>Amanda Maria</td>
<td>
Kennedy
<div class="td__description">
Chief product expert
</div>
</td>
<td>
<a href="mailto:amanda-maria-kennedy@gmail.foo">
amanda-maria-kennedy@gmail.foo
</a>
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
Table with leading column
| Roland | May Frontend developer | rolandmay@yoveo.foo |
| Mark | Ross Scrum master | mark.ross@skivee.foo |
| Melissa | Anton Frontend key developer | m.anton@grkeo.foo |
| Tyler | Nichols Frontend developer | tyler.nichols@cogibox.foo |
| Amanda Maria | Kennedy Chief product expert | amanda-maria-kennedy@gmail.foo |
<table class="table table--leading">
<tbody>
<tr>
<td>Roland</td>
<td>
May
<div class="td__description">
Frontend developer
</div>
</td>
<td>
<a href="mailto:roymay@yoveo.foo">
rolandmay@yoveo.foo
</a>
</td>
</tr>
<tr>
<td>
Mark
</td>
<td>
Ross
<div class="td__description">
Scrum master
</div>
</td>
<td>
<a href="mailto:mark.ross@skivee.foo">
mark.ross@skivee.foo
</a>
</td>
</tr>
<tr>
<td>Melissa</td>
<td>
Anton
<div class="td__description">
Frontend key developer
</div>
</td>
<td>
<a href="mailto:m.anton@grkeo.foo">
m.anton@grkeo.foo
</a>
</td>
</tr>
<tr>
<td>Tyler</td>
<td>
Nichols
<div class="td__description">
Frontend developer
</div>
</td>
<td>
<a href="mailto:tyler.nichols@cogibox.foo">
tyler.nichols@cogibox.foo
</a>
</td>
</tr>
<tr>
<td>Amanda Maria</td>
<td>
Kennedy
<div class="td__description">
Chief product expert
</div>
</td>
<td>
<a href="mailto:amanda-maria-kennedy@gmail.foo">
amanda-maria-kennedy@gmail.foo
</a>
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
Table with alternating rows
| First name | Last name | |
|---|---|---|
| Roland | May Frontend developer | rolandmay@yoveo.foo |
| Mark | Ross Scrum master | mark.ross@skivee.foo |
| Melissa | Anton Frontend key developer | m.anton@grkeo.foo |
| Tyler | Nichols Frontend developer | tyler.nichols@cogibox.foo |
| Amanda Maria | Kennedy Chief product expert | amanda-maria-kennedy@gmail.foo |
<table class="table table--alternate">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>E-Mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Roland</td>
<td>
May
<div class="td__description">
Frontend developer
</div>
</td>
<td>
<a href="mailto:roymay@yoveo.foo">
rolandmay@yoveo.foo
</a>
</td>
</tr>
<tr>
<td>
Mark
</td>
<td>
Ross
<div class="td__description">
Scrum master
</div>
</td>
<td>
<a href="mailto:mark.ross@skivee.foo">
mark.ross@skivee.foo
</a>
</td>
</tr>
<tr>
<td>Melissa</td>
<td>
Anton
<div class="td__description">
Frontend key developer
</div>
</td>
<td>
<a href="mailto:m.anton@grkeo.foo">
m.anton@grkeo.foo
</a>
</td>
</tr>
<tr>
<td>Tyler</td>
<td>
Nichols
<div class="td__description">
Frontend developer
</div>
</td>
<td>
<a href="mailto:tyler.nichols@cogibox.foo">
tyler.nichols@cogibox.foo
</a>
</td>
</tr>
<tr>
<td>Amanda Maria</td>
<td>
Kennedy
<div class="td__description">
Chief product expert
</div>
</td>
<td>
<a href="mailto:amanda-maria-kennedy@gmail.foo">
amanda-maria-kennedy@gmail.foo
</a>
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
Responsive scrolling table
| First name | Last name | Country | City | Department | Age | Hobbies | Month of Birth | Favourite color | |
|---|---|---|---|---|---|---|---|---|---|
| Roland | May Frontend developer | rolandmay@yoveo.foo | Austria | Linz | Development | 41 | Cycling, Skiing and Running | February | Orange |
| Mark | Ross Scrum master | mark.ross@skivee.name | Germany | Erlangen | Management | 44 | Surfing and Snowboarding | March | Green |
| Melissa | Anton Frontend key developer | m.anton@grkeo.foo | United States | Milwaukee | Research | 52 | Cooking and Arts | April | Purple |
| Tyler | Nichols Frontend developer | tyler.nichols@cogibox.foo | United States | Boston | UI | 38 | Family activities | May | Black |
| Amanda Maria | Kennedy Chief product expert | amanda-maria-kennedy@gmail.foo | Germany | Munich | Development | 42 | Painting and Photographing | December | Dark blue |
<div class="scrollableTableWrapper">
<table class="table">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>E-Mail</th>
<th>Country</th>
<th>City</th>
<th>Department</th>
<th>Age</th>
<th>Hobbies</th>
<th>Month of Birth</th>
<th>Favourite color</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Roland
</td>
<td>
May
<div class="td__description">
Frontend developer
</div>
</td>
<td>
<a href="mailto:rolandmay@yoveo.foo">
rolandmay@yoveo.foo
</a>
</td>
<td>
Austria
</td>
<td>
Linz
</td>
<td>
Development
</td>
<td>
41
</td>
<td>
Cycling, Skiing and Running
</td>
<td>
February
</td>
<td>
Orange
</td>
</tr>
<tr>
<td>
Mark
</td>
<td>
Ross
<div class="td__description">
Scrum master
</div>
</td>
<td>
<a href="mailto:mark.ross@skivee.foo">
mark.ross@skivee.name
</a>
</td>
<td>
Germany
</td>
<td>
Erlangen
</td>
<td>
Management
</td>
<td>
44
</td>
<td>
Surfing and Snowboarding
</td>
<td>
March
</td>
<td>
Green
</td>
</tr>
<tr>
<td>Melissa</td>
<td>
Anton
<div class="td__description">
Frontend key developer
</div>
</td>
<td>
<a href="mailto:m.anton@grkeo.foo">
m.anton@grkeo.foo
</a>
</td>
<td>
United States
</td>
<td>
Milwaukee
</td>
<td>
Research
</td>
<td>
52
</td>
<td>
Cooking and Arts
</td>
<td>
April
</td>
<td>
Purple
</td>
</tr>
<tr>
<td>Tyler</td>
<td>
Nichols
<div class="td__description">
Frontend developer
</div>
</td>
<td>
<a href="mailto:tyler.nichols@cogibox.foo">
tyler.nichols@cogibox.foo
</a>
</td>
<td>
United States
</td>
<td>
Boston
</td>
<td>
UI
</td>
<td>
38
</td>
<td>
Family activities
</td>
<td>
May
</td>
<td>
Black
</td>
</tr>
<tr>
<td>Amanda Maria</td>
<td>
Kennedy
<div class="td__description">
Chief product expert
</div>
</td>
<td>
<a href="mailto:amanda-maria-kennedy@gmail.foo">
amanda-maria-kennedy@gmail.foo
</a>
</td>
<td>
Germany
</td>
<td>
Munich
</td>
<td>
Development
</td>
<td>
42
</td>
<td>
Painting and Photographing
</td>
<td>
December
</td>
<td>
Dark blue
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>Usage
| Element | Class | Description |
|---|---|---|
.table | .table--small | Reduces the padding in the first column of the table. |
.table | .table--leading | Adds a border to the top of the table if no table header is used. Additionally, it sets the first column bold. |
.table | .table--alternate | Adds a light background color to every second table row and highlights the currently hovered row. |
Table wrapper / parent element | .scrollableTableWrapper | Adds a scrolling behavior to the child table. If the table is too wide compared to the screen size, the table is scrollable horizontally. A drop shadow indicates that there are more hidden columns. |