Tables

Tables can be very useful as a way to display simple data sets to clients.

Unclassified table

HTML
<table>
  <thead>
    <tr>
      <th scope="col">Header</th>
      <th>Header</th>
	  <th>Header</th>
	</tr>
  </thead>
  <tbody>
    <tr>
	  <th scope="row">Data</th>
	  <td>Data</td>
	  <td>Data</td>
	</tr>
	<tr>
	  <th scope="row">Data</th>
	  <td>Data</td>
	  <td>Data</td>
	</tr>
	<tr>
	  <th scope="row">Data</th>
	  <td>Data</td>
	  <td>Data</td>
	</tr>
  </tbody>
</table>
Rendered HTML
Header Header Header
Data Data Data
Data Data Data
Data Data Data

Table striped

HTML
<table class="table-striped">
  <thead>
    <tr>
      <th scope="col">Header</th>
      <th>Header</th>
	  <th>Header</th>
	</tr>
  </thead>
  <tbody>
    <tr>
	  <th scope="row">Data</th>
	  <td>Data</td>
	  <td>Data</td>
	</tr>
	<tr>
	  <th scope="row">Data</th>
	  <td>Data</td>
	  <td>Data</td>
	</tr>
	<tr>
	  <th scope="row">Data</th>
	  <td>Data</td>
	  <td>Data</td>
	</tr>
  </tbody>
</table>
Rendered HTML
Header Header Header
Data Data Data
Data Data Data
Data Data Data

Table Bordered

HTML
<table class="table-bordered">
  <thead>
    <tr>
      <th scope="col">Header</th>
      <th>Header</th>
	  <th>Header</th>
	</tr>
  </thead>
  <tbody>
    <tr>
	  <th scope="row">Data</th>
	  <td>Data</td>
	  <td>Data</td>
	</tr>
	<tr>
	  <th scope="row">Data</th>
	  <td>Data</td>
	  <td>Data</td>
	</tr>
	<tr>
	  <th scope="row">Data</th>
	  <td>Data</td>
	  <td>Data</td>
	</tr>
  </tbody>
</table>
Rendered HTML
Header Header Header
Data Data Data
Data Data Data
Data Data Data