Lapus | 多用途HTML模板+网页构建器
通过电子邮箱注册
已经拥有账号？ 登录

Tables

These modular elements can be readily used and customized across pages and in different blocks.

Explore all of Lapus'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