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-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.

<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-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.

<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