Table
Tables display tabular data.
Markup structure
Simple table
| Name | Role | ||
|---|---|---|---|
| 1 | Jane Doe | jane@doe.com | Designer |
| 2 | Jane Doe | jane@doe.com | Designer |
<div class="Avatar">
<span>CT</span>
</div>
<div class="Avatar">
<img width="32" height="32" alt="Colm Tuite">
</div>Zebra rows
Simple table
| Name | Role | ||
|---|---|---|---|
| 1 | Jane Doe | jane@doe.com | Designer |
| 2 | Jane Doe | jane@doe.com | Designer |
| 3 | Jane Doe | jane@doe.com | Designer |
| 4 | Jane Doe | jane@doe.com | Designer |
<div class="Avatar">
<span>CT</span>
</div>
<div class="Avatar">
<img width="32" height="32" alt="Colm Tuite">
</div>Interactive rows
Interactive rows
| Name | Role | ||
|---|---|---|---|
| 1 | Jane Doe | jane@doe.com | Designer |
| 2 | Jane Doe | jane@doe.com | Designer |
| 3 | Jane Doe | jane@doe.com | Designer |
| 4 | Jane Doe | jane@doe.com | Designer |
<div class="Avatar">
<span>CT</span>
</div>
<div class="Avatar">
<img width="32" height="32" alt="Colm Tuite">
</div>