LP6 Style Guide: Tables

HTML Code Snippet

					
	<div class="table-container">
		<table class="table-default">
			<caption>This is a caption. Below is an example of our defalt data table style.</caption>
			<thead>
				<tr>
					<th scope="col">Date Payment Due</th>
					<th scope="col">Amount Due</th>
					<th scope="col">Amount Due</th>
					<th scope="col">Amount Due</th>
					<th scope="col">Amount Due</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td scope="row">Upon Registration</td>
					<td>1/4 tuition due + technology fee</td>
					<td>1/4 tuition due + technology fee</td>
					<td>1/4 tuition due + technology fee</td>
					<td>1/4 tuition due + technology fee</td>
				</tr>
				<tr>
					<td scope="row"><a href="#">15th of Session's First Month</a></td>
					<td>1/4 of tuition due (i.e., for May 5th course, payment due 5/15)</td>
					<td>1/4 tuition due + technology fee</td>
					<td>1/4 tuition due + technology fee</td>
					<td>1/4 tuition due + technology fee</td>
				</tr>
				<tr>
					<td scope="row">15th of Session's Second Month</td>
					<td>1/4 of tuition due (i.e., for May 5th course, <a href="#">payment due 6/15</a>)</td>
					<td>1/4 tuition due + technology fee</td>
					<td>1/4 tuition due + technology fee</td>
					<td>1/4 tuition due + technology fee</td>
				</tr>
				<tr>
					<td scope="row">15th of Session's Third Month</td>
					<td>1/4 of tuition due (i.e., for May 5th course, payment due 7/15)</td>
					<td>1/4 tuition due + technology fee</td>
					<td>1/4 tuition due + technology fee</td>
					<td>1/4 tuition due + technology fee</td>
				</tr>
			</tbody>
		</table>
	</div>
					
				

HTML Code Snippet

					
		<!-- Note table-primary class added to <table> -->
		<div class="table-container">
			<table class="table-default table-primary">
				<!-- same as default -->
			</table>
		</div>
					
				

HTML Code Snippet

					
		<!-- Note table-secondary class added to <table> -->
		<div class="table-container">
			<table class="table-default table-secondary">
				<!-- same as default -->
			</table>
		</div>
					
				

HTML Code Snippet

					
		<!-- Note table-tertiary class added to <table> -->
		<div class="table-container">
			<table class="table-default table-tertiary">
				<!-- same as default -->
			</table>
		</div>
					
				

General Guidance

The table component is designed to display tabular data. Use tables to logically structure tabular data to make it easier to see relationships, comparisons, etc.

Organize columns and rows based on the needs of the user. To help people read the table, order the columns by importance from left to right, with the key pieces of content opening the row.

Container

By default tables are nested inside a div with the class table-container. This is container allows the table to scroll when the content of the table overflow the viewport width.

Brevity

Table headings shoud describe the content in the column. Try to stick to a single word and be as concise and descriptive as possible. Table data content should also be worded as concisely as possible.

Accessibility

Data tables should include brief descriptive text before or after the table that indicates the content of that table. One means of doing this is to include a descriptive heading tag just prior to the table. Even with a heading we recommend captioning each table using the <caption> element. The <caption> element must be the first thing after the opening <table> tag.

If a heading exists the caption can be hidden visually but available to screen readers and assistive technology. To hide the caption add the class hidden to the <caption> element. If no heading exists, the caption should always be displayed. It will be styled to mimic the heading itself.

The scope attribute identifies whether a table header is a column header or a row header. Here is example markup for table header using the scope attribute: <th scope="col">.

Don't be a Noob

Do not use tables for layout purposes.

Modifiers are extra classes used to modify the appearance, alignment, size, behavior etc. of standard component styles.

Note: modifier classes can interact with each other to create versions not demonstrated below.

Note: Making a table responsive with this modifier class also requires adding new data- attributes to each td in the tbody. These attributes should be named data-label and match the corresponding th value.

HTML Code Snippet

					
	<!-- add table-responsive class -->
	<div class="table-container table-responsive">
		<h3>Responsive Table</h3>
		<p>Note: Use a standard phone viewport to see responsive layout.</p>
		<table class="table-default">
			<thead>
				<tr>
					<th scope="col">Date Payment Due</th>
					<th scope="col">Amount Due</th>
					<th scope="col">Amount Due</th>
					<th scope="col">Amount Due</th>
					<th scope="col">Amount Due</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<!-- add data-label attributes and values to td elements -->
					<td data-label="Date Payment Due">Upon Registration</td>
					<td data-label="Amount Due">1/4 tuition due + technology fee</td>
					<td data-label="Amount Due">1/4 tuition due + technology fee</td>
					<td data-label="Amount Due">1/4 tuition due + technology fee</td>
					<td data-label="Amount Due">1/4 tuition due + technology fee</td>
				</tr>
				<!-- repeat for each row -->
			</tbody>
		</table>
	</div>
					
				

HTML Code Snippet

					
	<!-- Note table-zebra class added to <table> -->
	<div class="table-container">
		<table class="table-default table-zebra">
			<!-- same as default -->
		</table>
	</div>
					
				

HTML Code Snippet

					
	<!-- Note table-primary table-zebra class added to <table> -->
	<div class="table-container">
		<table class="table-default table-primary table-zebra">
			<!-- same as default -->
		</table>
	</div>
					
				

HTML Code Snippet

					
	<!-- Note table-secondary and table-zebra class added to <table> -->
	<div class="table-container">
		<table class="table-default table-secondary table-zebra">
			<!-- same as default -->
		</table>
	</div>
					
				

HTML Code Snippet

					
	<!-- Note table-tertiary and table-zebra class added to <table> -->
	<div class="table-container">
		<table class="table-default table-tertiary table-zebra">
			<!-- same as default -->
		</table>
	</div>
					
				

HTML Code Snippet

					
	<!-- Note table-primary table-monochromatic class added to <table> -->
	<div class="table-container">
		<table class="table-default table-primary table-monochromatic">
			<!-- same as default -->
		</table>
	</div>
					
				

HTML Code Snippet

					
	<!-- Note table-secondary table-monochromatic class added to <table> -->
	<div class="table-container">
		<table class="table-default table-secondary table-monochromatic">
			<!-- same as default -->
		</table>
	</div>
					
				

HTML Code Snippet

					
	<!-- Note table-tertiary table-monochromatic class added to <table> -->
	<div class="table-container">
		<table class="table-default table-tertiary table-monochromatic">
			<!-- same as default -->
		</table>
	</div>