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 |