<!-- Default -->
<h2 class="label">Table Class Default</h2>

<table class="table ">
    <thead class="">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
        </tr>
    </thead>
    <tbody class="">
        <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>Photographer</td>
        </tr>
        <tr>
            <td>Clark</td>
            <td>Kent</td>
            <td>Journalist</td>
        </tr>
        <tr>
            <td>Diane</td>
            <td>Price</td>
            <td>Nurse</td>
        </tr>
        <tr>
            <td>Bruce</td>
            <td>Banner</td>
            <td>Physicist</td>
        </tr>
    </tbody>
</table>

<!-- Boxes -->
<h2 class="label">Boxes</h2>

<table class="table boxes">
    <thead class="">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
        </tr>
    </thead>
    <tbody class="">
        <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>Photographer</td>
        </tr>
        <tr>
            <td>Clark</td>
            <td>Kent</td>
            <td>Journalist</td>
        </tr>
        <tr>
            <td>Diane</td>
            <td>Price</td>
            <td>Nurse</td>
        </tr>
        <tr>
            <td>Bruce</td>
            <td>Banner</td>
            <td>Physicist</td>
        </tr>
    </tbody>
</table>

<!-- Striped Odd -->
<h2 class="label">Striped Odd Rows</h2>

<table class="table stripe-row-odd">
    <thead class="">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
        </tr>
    </thead>
    <tbody class="">
        <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>Photographer</td>
        </tr>
        <tr>
            <td>Clark</td>
            <td>Kent</td>
            <td>Journalist</td>
        </tr>
        <tr>
            <td>Diane</td>
            <td>Price</td>
            <td>Nurse</td>
        </tr>
        <tr>
            <td>Bruce</td>
            <td>Banner</td>
            <td>Physicist</td>
        </tr>
    </tbody>
</table>

<!-- Striped Even -->
<h2 class="label">Striped Even Rows</h2>

<table class="table stripe-row-even">
    <thead class="">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
        </tr>
    </thead>
    <tbody class="">
        <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>Photographer</td>
        </tr>
        <tr>
            <td>Clark</td>
            <td>Kent</td>
            <td>Journalist</td>
        </tr>
        <tr>
            <td>Diane</td>
            <td>Price</td>
            <td>Nurse</td>
        </tr>
        <tr>
            <td>Bruce</td>
            <td>Banner</td>
            <td>Physicist</td>
        </tr>
    </tbody>
</table>

<!-- Striped Even -->
<h2 class="label">Striped Even Columns</h2>

<table class="table stripe-col-even">
    <thead class="">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
        </tr>
    </thead>
    <tbody class="">
        <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>Photographer</td>
        </tr>
        <tr>
            <td>Clark</td>
            <td>Kent</td>
            <td>Journalist</td>
        </tr>
        <tr>
            <td>Diane</td>
            <td>Price</td>
            <td>Nurse</td>
        </tr>
        <tr>
            <td>Bruce</td>
            <td>Banner</td>
            <td>Physicist</td>
        </tr>
    </tbody>
</table>

<!-- Striped Even -->
<h2 class="label">Striped Odd Columns</h2>

<table class="table stripe-col-odd">
    <thead class="">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
        </tr>
    </thead>
    <tbody class="">
        <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>Photographer</td>
        </tr>
        <tr>
            <td>Clark</td>
            <td>Kent</td>
            <td>Journalist</td>
        </tr>
        <tr>
            <td>Diane</td>
            <td>Price</td>
            <td>Nurse</td>
        </tr>
        <tr>
            <td>Bruce</td>
            <td>Banner</td>
            <td>Physicist</td>
        </tr>
    </tbody>
</table>

<!-- Head Coloured -->
<h2 class="label">Head Coloured</h2>

<table class="table ">
    <thead class="csu-blue">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
        </tr>
    </thead>
    <tbody class="">
        <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>Photographer</td>
        </tr>
        <tr>
            <td>Clark</td>
            <td>Kent</td>
            <td>Journalist</td>
        </tr>
        <tr>
            <td>Diane</td>
            <td>Price</td>
            <td>Nurse</td>
        </tr>
        <tr>
            <td>Bruce</td>
            <td>Banner</td>
            <td>Physicist</td>
        </tr>
    </tbody>
</table>

<!-- First Col -->
<h2 class="label">First Column</h2>

<table class="table stripe-col-first">
    <tbody>
        <tr>
            <th>First Name</th>
            <td>Peter</td>
            <td>Clark</td>
            <td>Diane</td>
            <td>Bruce</td>
        </tr>
        <tr>
            <th>Last Name</th>
            <td>Parker</td>
            <td>Kent</td>
            <td>Price</td>
            <td>Banner</td>
        </tr>
        <tr>
            <th>Job Title</th>
            <td>Photographer</td>
            <td>Journalist</td>
            <td>Nurse</td>
            <td>Physicist</td>
        </tr>
    </tbody>
</table>

<!-- Row Fades -->
<h2 class="label">Individual Row Colours</h2>

<table class="table">
    <thead>
        <tr class="csu-blue">
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
        </tr>
    </thead>
    <tbody>
        <tr class="csu-red-fade">
            <td>Peter</td>
            <td>Parker</td>
            <td>Photographer</td>
        </tr>
        <tr class="csu-green-fade">
            <td>Clark</td>
            <td>Kent</td>
            <td>Journalist</td>
        </tr>
        <tr class="csu-orange-fade">
            <td>Diane</td>
            <td>Price</td>
            <td>Nurse</td>
        </tr>
        <tr class="csu-purple-fade">
            <td>Bruce</td>
            <td>Banner</td>
            <td>Physicist</td>
        </tr>
    </tbody>
</table>

<!-- Default -->
<h2 class="label">{{ modifier }}</h2>

<table class="table {{ table-class }}">
  <thead class="{{ table-head }}">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
    </tr>
  </thead>
  <tbody class="{{ table-body }}">
    <tr>
      <td>Peter</td>
      <td>Parker</td>
      <td>Photographer</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Kent</td>
      <td>Journalist</td>
    </tr>
    <tr>
      <td>Diane</td>
      <td>Price</td>
      <td>Nurse</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Banner</td>
      <td>Physicist</td>
    </tr>
  </tbody>
</table>

<!-- Boxes -->
<h2 class="label">{{ modifier }}</h2>

<table class="table {{ table-class }}">
  <thead class="{{ table-head }}">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
    </tr>
  </thead>
  <tbody class="{{ table-body }}">
    <tr>
      <td>Peter</td>
      <td>Parker</td>
      <td>Photographer</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Kent</td>
      <td>Journalist</td>
    </tr>
    <tr>
      <td>Diane</td>
      <td>Price</td>
      <td>Nurse</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Banner</td>
      <td>Physicist</td>
    </tr>
  </tbody>
</table>

<!-- Striped Odd -->
<h2 class="label">{{ modifier }}</h2>

<table class="table {{ table-class }}">
  <thead class="{{ table-head }}">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
    </tr>
  </thead>
  <tbody class="{{ table-body }}">
    <tr>
      <td>Peter</td>
      <td>Parker</td>
      <td>Photographer</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Kent</td>
      <td>Journalist</td>
    </tr>
    <tr>
      <td>Diane</td>
      <td>Price</td>
      <td>Nurse</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Banner</td>
      <td>Physicist</td>
    </tr>
  </tbody>
</table>

<!-- Striped Even -->
<h2 class="label">{{ modifier }}</h2>

<table class="table {{ table-class }}">
  <thead class="{{ table-head }}">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
    </tr>
  </thead>
  <tbody class="{{ table-body }}">
    <tr>
      <td>Peter</td>
      <td>Parker</td>
      <td>Photographer</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Kent</td>
      <td>Journalist</td>
    </tr>
    <tr>
      <td>Diane</td>
      <td>Price</td>
      <td>Nurse</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Banner</td>
      <td>Physicist</td>
    </tr>
  </tbody>
</table>

<!-- Striped Even -->
<h2 class="label">{{ modifier }}</h2>

<table class="table {{ table-class }}">
  <thead class="{{ table-head }}">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
    </tr>
  </thead>
  <tbody class="{{ table-body }}">
    <tr>
      <td>Peter</td>
      <td>Parker</td>
      <td>Photographer</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Kent</td>
      <td>Journalist</td>
    </tr>
    <tr>
      <td>Diane</td>
      <td>Price</td>
      <td>Nurse</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Banner</td>
      <td>Physicist</td>
    </tr>
  </tbody>
</table>

<!-- Striped Even -->
<h2 class="label">{{ modifier }}</h2>

<table class="table {{ table-class }}">
  <thead class="{{ table-head }}">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
    </tr>
  </thead>
  <tbody class="{{ table-body }}">
    <tr>
      <td>Peter</td>
      <td>Parker</td>
      <td>Photographer</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Kent</td>
      <td>Journalist</td>
    </tr>
    <tr>
      <td>Diane</td>
      <td>Price</td>
      <td>Nurse</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Banner</td>
      <td>Physicist</td>
    </tr>
  </tbody>
</table>

<!-- Head Coloured -->
<h2 class="label">{{ modifier }}</h2>

<table class="table {{ table-class }}">
  <thead class="{{ table-head }}">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
    </tr>
  </thead>
  <tbody class="{{ table-body }}">
    <tr>
      <td>Peter</td>
      <td>Parker</td>
      <td>Photographer</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Kent</td>
      <td>Journalist</td>
    </tr>
    <tr>
      <td>Diane</td>
      <td>Price</td>
      <td>Nurse</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Banner</td>
      <td>Physicist</td>
    </tr>
  </tbody>
</table>

<!-- First Col -->
<h2 class="label">{{ modifier }}</h2>

<table class="table {{ table-class }}">
  <tbody>
    <tr>
      <th>First Name</th>
      <td>Peter</td>
      <td>Clark</td>
      <td>Diane</td>
      <td>Bruce</td>
    </tr>
    <tr>
      <th>Last Name</th>
      <td>Parker</td>
      <td>Kent</td>
      <td>Price</td>
      <td>Banner</td>
    </tr>
    <tr>
      <th>Job Title</th>
      <td>Photographer</td>
      <td>Journalist</td>
      <td>Nurse</td>
      <td>Physicist</td>
    </tr>
  </tbody>
</table>

<!-- Row Fades -->
<h2 class="label">{{ modifier }}</h2>

<table class="table">
  <thead>
    <tr class="{{ row1 }}">
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
    </tr>
  </thead>
  <tbody>
    <tr class="{{ row2 }}">
      <td>Peter</td>
      <td>Parker</td>
      <td>Photographer</td>
    </tr>
    <tr class="{{ row3 }}">
      <td>Clark</td>
      <td>Kent</td>
      <td>Journalist</td>
    </tr>
    <tr class="{{ row4 }}">
      <td>Diane</td>
      <td>Price</td>
      <td>Nurse</td>
    </tr>
    <tr class="{{ row5 }}">
      <td>Bruce</td>
      <td>Banner</td>
      <td>Physicist</td>
    </tr>
  </tbody>
</table>

Tables by default are left unstyled - but adding the table class applies a range of formating options for outlines, headings and highlighting.