Table

Example Code

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Area</th>
      <th>Job Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Johnson</td>
      <td>Analytics</td>
      <td>Data Analyst</td>
    </tr>
    <tr>
      <td>Jack</td>
      <td>Jackson</td>
      <td>Analytics</td>
      <td>Manager</td>
    </tr>
    <tr>
      <td>Robin</td>
      <td>Robinson</td>
      <td>Engineering</td>
      <td>Software Engineer</td>
    </tr>
  </tbody>
</table>

Result

First Name Last Name Job Area Job Title
John Johnson Analytics Data Analyst
Jack Jackson Analytics Manager
Robin Robinson Engineering Software Engineer

Options

Caption and Footer

If you choose to include a title (using the caption element) or a footer (using the tfoot element), they will be styled.

Sales Figures
Quarter Gross Revenue
Q1 $1,202,133
Q2 $2,001,259
Q3 $997,673
Q4 $1,012,422
Total $5,213,487

Subtle Variant

You can make the styling softer by adding the class subtle.

Quarter Gross Revenue
Q1 $1,202,133
Q2 $2,001,259
Q3 $997,673
Q4 $1,012,422

Density

You can make the table more compact by adding the class dense, or more spread out by adding the class sparse.

Dense
Quarter Gross Revenue
Q1 $1,202,133
Q2 $2,001,259
Q3 $997,673
Q4 $1,012,422
Sparse
Quarter Gross Revenue
Q1 $1,202,133
Q2 $2,001,259
Q3 $997,673
Q4 $1,012,422