Tables

GitHub Source Link src/elements/tables/tables

Demonstration
Column A Column B Column C
Cell 1A Cell 1B Cell 1C
Cell 2A Cell 2B Cell 2C
... ... ...
Markup
<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>

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

Demonstration
Family Size Yearly Income Weekly Income
1 $27,816 $535
2 $36,372 $699
... ... ...
Markup
<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>
Demonstration
  Column A Column B
Row 1 Cell 1A Cell 1B
Row 2 Cell 2A Cell 2B
Row 3 ... ...
Markup
<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>
Demonstration
  Column A Column B
Row 1 Cell 1A Cell 1B
Row 2 Cell 2A Cell 2B
Row 3 ... ...
Markup
<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>