Skip to Content Skip to Navigation

User Experience Toolkit

Distinct Columns and Rows Seperator

When working with large set of data, it can be helpful to provide distinctive guides for users to visually connect related columns and rows.

Example:
Profits for the last two years broken down at mid year.
2012 2013
January - July July - December January - July July - December
Company A Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Company B Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Total Row 3, Col 1 Row 3, Col 2 Row 3, Col 3 Row 3, Col 4
HTML:
<table>
	<caption>Profits for the last two years broken down at mid year.</caption>
	<thead>
		<tr>
			<th colspan="2" class="align-center left-border right-border">
				January - July
			</th>
			<th colspan="2">July - December</th>
		</tr>
		<tr>
			<th class="left-border">January - July</th>
			<th class="right-border">July - December</th>
			<th>January - July</th>
			<th>July - December</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Company A</td>
			<td class="left-border">Row 1, Col 1</td>
			<td class="right-border">Row 1, Col 2</td>
			<td>Row 1, Col 3</td>
			<td>Row 1, Col 4</td>
		</tr>
		<tr>
			<td>Company B</td>
			<td class="left-border">Row 2, Col 1</td>
			<td class="right-border">Row 2, Col 2</td>
			<td>Row 2, Col 3</td>
			<td>Row 2, Col 4</td>
		</tr>
		<tr class="top-border">
			<td>Total</td>
			<td class="left-border">Row 3, Col 1</td>
			<td class="right-border">Row 3, Col 2</td>
			<td>Row 3, Col 3</td>
			<td>Row 3, Col 4</td>
		</tr>
	</tbody>
</table>

When creating a table, if a Particular set of column(s) need to be visually separated from other using the utility classes left-border and right-border. If rows require extra distinction, simple use the class of top-border or bottom-border.

Thanks for the feedback! It will help us improve your experience.