Tables

Column A Column B Column C
Cell 1A Cell 1B Cell 1C
Cell 2A Cell 2B Cell 2C
... ... ... 
<table class="table">
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1A</td>
      <td>Cell 1B</td>
      <td>Cell 1C</td>
    </tr>
    <tr>
      <td>Cell 2A</td>
      <td>Cell 2B</td>
      <td>Cell 2C</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Numeric Tables

Source: src/elements/tables/tables-numeric

Numerical tables are used to show the income limits for applicants with different situations (like household size or marital status).

Family Size Yearly Income Weekly Income
1 $27,816 $535
2 $36,372 $699
... ... ... 
<table class="table-numeric">
  <thead>
    <tr>
      <th>Family Size</th>
      <th>Yearly Income</th>
      <th>Weekly Income</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>$27,816</td>
      <td>$535</td>
    </tr>
    <tr>
      <td>2</td>
      <td>$36,372</td>
      <td>$699</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

First Column Header

Source: src/elements/tables/tables-headers-first-column

  Column A Column B
Row 1 Cell 1A Cell 1B
Row 2 Cell 2A Cell 2B
Row 3 ... ... 
<table class="table-headers-first-column">
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Column A</th>
      <th>Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row 1</th>
      <td>Cell 1A</td>
      <td>Cell 1B</td>
    </tr>
    <tr>
      <th>Row 2</th>
      <td>Cell 2A</td>
      <td>Cell 2B</td>
    </tr>
    <tr>
      <th>Row 3</th>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Sticky Headers

Source: src/elements/tables/tables-headers-sticky

  Column A Column B
Row 1 Cell 1A Cell 1B
Row 2 Cell 2A Cell 2B
Row 3 ... ... 
<table class="table-headers-sticky">
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Column A</th>
      <th>Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row 1</th>
      <td>Cell 1A</td>
      <td>Cell 1B</td>
    </tr>
    <tr>
      <th>Row 2</th>
      <td>Cell 2A</td>
      <td>Cell 2B</td>
    </tr>
    <tr>
      <th>Row 3</th>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Utilities

The following table alignment options and table utilities are available.

Utility Description
.table-header-start Align th elements at the start of the cell.
.table-header-center Align th elements in the center of the cell.
.table-header-end Align th elements at the end of the cell.
.table-header-top Align th elements at the top of the cell.
.table-header-middle Align th elements in the middle of the cell.
.table-header-bottom Align th elements at the bottom of the cell.
.table-body-start Align td elements at the start of the cell.
.table-body-center Align td elements in the center of the cell.
.table-body-end Align td elements at the end of the cell.
.table-body-top Align td elements at the top of the cell.
.table-body-middle Align td elements in the middle of the cell.
.table-body-bottom Align td elements at the bottom of the cell.
.border-spacing-0 Set table border spacing to 0.
tailwindcss Additional table utilities are available through tailwindcss.