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 →
PromoSimple is a simple online giveaway maker. Connect it to your Social Accounts and Email Tools. Kick back and watch your lists grow. Click here to get started.
[stack_hero image=”38″]
[/stack_hero]
[stack_boxed_content padding=”boxed–lg” background=”bg–secondary”]
[/stack_boxed_content]
Standard Tables
This code will display a standard, variable-width table using basic HTML table markup.
| Value 1 | Value 2 | Value 3 | Value 4 |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
[stack_boxed_content padding=”boxed–lg” background=”bg–secondary”]
[/stack_boxed_content]
Alternating Columns
Add the class .table–alternate-column to the table element to offset every second column with a slightly darker background colour. This is useful when creating wide tables with many values.
| Value 1 | Value 2 | Value 3 | Value 4 |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
[stack_boxed_content padding=”boxed–lg” background=”bg–secondary”]
[/stack_boxed_content]
Alternating Rows
Add the class .table–alternate-row to the table element to offset every second row with a slightly darker background colour. This is useful when creating wide tables with many values.
| Value 1 | Value 2 | Value 3 | Value 4 |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |