Tables
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack's modular elements
at the Element Index Page →
Standard Tables
This code will display a standard, variable-width table using basic HTML table markup.
<table class="border--round"> <thead> <tr> <th>Value 1</th> <th>Value 2</th> <th>Value 3</th> <th>Value 4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody></table>
| Value 1 | Value 2 | Value 3 | Value 4 |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
Alternating Columns
Add the class .table--alternate-columnto the table element to offset every second column with a slightly darker background colour. This is useful when creating wide tables with many values.
<table class="border--round table--alternate-column"> <thead> <tr> <th>Value 1</th> <th>Value 2</th> <th>Value 3</th> <th>Value 4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody></table>
| Value 1 | Value 2 | Value 3 | Value 4 |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
Alternating Rows
Add the class .table--alternate-rowto the table element to offset every second row with a slightly darker background colour. This is useful when creating wide tables with many values.
<table class="border--round table--alternate-row"> <thead> <tr> <th>Value 1</th> <th>Value 2</th> <th>Value 3</th> <th>Value 4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody></table>
| Value 1 | Value 2 | Value 3 | Value 4 |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |