Typography & Layout

Notes: A variety of markup using reset CSS and basic styling.

Associated Files: styles.css

Examples

Table Data

Heading	Heading	Heading
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

Table Data + Condensed

Heading	Heading	Heading
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

Table Data + Condensed + Stripe

Heading	Heading	Heading
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

Table List

Heading	Heading	Heading
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

Table List + Condensed

Heading	Heading	Heading
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

Table List + Condensed + Stripe

Heading	Heading	Heading
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

HTML



<h3>Table Data</h3>

<table class="table_data">
	<thead>
		<tr>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
	</tbody>
</table>

<h3>Table Data + Condensed</h3>

<table class="table_data table_condensed">
	<thead>
		<tr>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
	</tbody>
</table>

<h3>Table Data + Condensed + Stripe</h3>

<table class="table_data table_condensed table_stripe">
	<thead>
		<tr class="stripe_row">
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr class="stripe_row">
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr class="stripe_row">
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr class="stripe_row">
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
	</tbody>
</table>

<h3>Table List</h3>

<table class="table_list">
	<thead>
		<tr>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
	</tbody>
</table>

<h3>Table List + Condensed</h3>

<table class="table_list table_condensed">
	<thead>
		<tr>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
	</tbody>
</table>

<h3>Table List + Condensed + Stripe</h3>

<table class="table_list table_condensed table_stripe">
	<thead>
		<tr>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
		</tr>
	</thead>
	<tbody>
		<tr class="stripe_row">
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr class="stripe_row">
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr class="stripe_row">
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
	</tbody>
</table>