FEC Pattern Library

Simple table

Simple tables are the standard table styling component. They create a bold row header and basic text entries.

The .simple-table--display modifier class adds vertical rules, alternating background colors, and more padding between the cell content and the top/bottom cell borders. Simple tables with display modifiers are visually similar to .datatables and are most commonly used for legal resources search results lists, which present legal case results in a format that’s visually consistent with filtered data results.

When to use

  • When a collection of information requires vertical alignment through columns for quick scanning and discovery of information

When to consider something else

  • If you need a row header and a column header, or if you need to present financial data, consider the custom table component

GitHub issues

<div style="padding: 2rem">Standard simple table</div>
<div class="container">
    <table class="simple-table">
        <thead class="simple-table__header">
            <tr>
                <th class="simple-table__header-cell">Report type</th>
                <th class="simple-table__header-cell">Dates covered</th>
                <th class="simple-table__header-cell">Due</th>
            </tr>
        </thead>
        <tbody>
            <tr class="simple-table__row">
                <td class="simple-table__cell">April Quarterly <br>(Form 3, 3Z, 3L)</td>
                <td class="simple-table__cell">January 1 through March 31</td>
                <td class="simple-table__cell">April 15</td>
            </tr>
            <tr class="simple-table__row">
                <td class="simple-table__cell">July Quarterly <br>(Form 3, 3Z, 3L)</td>
                <td class="simple-table__cell">April 1 through June 30</td>
                <td class="simple-table__cell">July 15</td>
            </tr>
            <tr class="simple-table__row">
                <td class="simple-table__cell">October Quarterly <br>(Form 3, 3Z, 3L)</td>
                <td class="simple-table__cell">July 1 through September 30</td>
                <td class="simple-table__cell">October 15</td>
            </tr>
            <tr class="simple-table__row">
                <td class="simple-table__cell">Year-End <br>(Form 3, 3Z, 3L)</td>
                <td class="simple-table__cell">October 1 through December 31 of non-election year; Close of books of last report filed (October quarterly or Post-general) through December 31 of election year</td>
                <td class="simple-table__cell">January 31 of following year</td>
            </tr>
        </tbody>
    </table>
</div>

<div style="padding: 2rem">Standard simple table with display</div>
<div class="container">
    <table class="simple-table simple-table--display">
        <thead class="simple-table__header">
            <tr>
                <th class="simple-table__header-cell">Report type</th>
                <th class="simple-table__header-cell">Dates covered</th>
                <th class="simple-table__header-cell">Due</th>
            </tr>
        </thead>
        <tbody>
            <tr class="simple-table__row">
                <td class="simple-table__cell">April Quarterly <br>(Form 3, 3Z, 3L)</td>
                <td class="simple-table__cell">January 1 through March 31</td>
                <td class="simple-table__cell">April 15</td>
            </tr>
            <tr class="simple-table__row">
                <td class="simple-table__cell">July Quarterly <br>(Form 3, 3Z, 3L)</td>
                <td class="simple-table__cell">April 1 through June 30</td>
                <td class="simple-table__cell">July 15</td>
            </tr>
            <tr class="simple-table__row">
                <td class="simple-table__cell">October Quarterly <br>(Form 3, 3Z, 3L)</td>
                <td class="simple-table__cell">July 1 through September 30</td>
                <td class="simple-table__cell">October 15</td>
            </tr>
            <tr class="simple-table__row">
                <td class="simple-table__cell">Year-End <br>(Form 3, 3Z, 3L)</td>
                <td class="simple-table__cell">October 1 through December 31 of non-election year; Close of books of last report filed (October quarterly or Post-general) through December 31 of election year</td>
                <td class="simple-table__cell">January 31 of following year</td>
            </tr>
        </tbody>
    </table>
</div>
 
<div style="padding: 2rem">Standard simple table</div>
<div class="container">
  <table class="simple-table">
    <thead class="simple-table__header">
    <tr>
      <th class="simple-table__header-cell">Report type</th>
      <th class="simple-table__header-cell">Dates covered</th>
      <th class="simple-table__header-cell">Due</th>
    </tr>
    </thead>
    <tbody>
      <tr class="simple-table__row">
        <td class="simple-table__cell">April Quarterly <br>(Form 3, 3Z, 3L)</td>
        <td class="simple-table__cell">January 1 through March 31</td>
        <td class="simple-table__cell">April 15</td>
      </tr>
      <tr class="simple-table__row">
        <td class="simple-table__cell">July Quarterly <br>(Form 3, 3Z, 3L)</td>
        <td class="simple-table__cell">April 1 through June 30</td>
        <td class="simple-table__cell">July 15</td>
      </tr>
      <tr class="simple-table__row">
        <td class="simple-table__cell">October Quarterly <br>(Form 3, 3Z, 3L)</td>
        <td class="simple-table__cell">July 1 through September 30</td>
        <td class="simple-table__cell">October 15</td>
      </tr>
      <tr class="simple-table__row">
        <td class="simple-table__cell">Year-End  <br>(Form 3, 3Z, 3L)</td>
        <td class="simple-table__cell">October 1 through December 31 of non-election year; Close of books of last report filed (October quarterly or Post-general)  through December 31 of election year</td>
        <td class="simple-table__cell">January 31 of following year</td>
      </tr>
    </tbody>
  </table>
</div>

<div style="padding: 2rem">Standard simple table with display</div>
<div class="container">
  <table class="simple-table simple-table--display">
    <thead class="simple-table__header">
    <tr>
      <th class="simple-table__header-cell">Report type</th>
      <th class="simple-table__header-cell">Dates covered</th>
      <th class="simple-table__header-cell">Due</th>
    </tr>
    </thead>
    <tbody>
      <tr class="simple-table__row">
        <td class="simple-table__cell">April Quarterly <br>(Form 3, 3Z, 3L)</td>
        <td class="simple-table__cell">January 1 through March 31</td>
        <td class="simple-table__cell">April 15</td>
      </tr>
      <tr class="simple-table__row">
        <td class="simple-table__cell">July Quarterly <br>(Form 3, 3Z, 3L)</td>
        <td class="simple-table__cell">April 1 through June 30</td>
        <td class="simple-table__cell">July 15</td>
      </tr>
      <tr class="simple-table__row">
        <td class="simple-table__cell">October Quarterly <br>(Form 3, 3Z, 3L)</td>
        <td class="simple-table__cell">July 1 through September 30</td>
        <td class="simple-table__cell">October 15</td>
      </tr>
      <tr class="simple-table__row">
        <td class="simple-table__cell">Year-End  <br>(Form 3, 3Z, 3L)</td>
        <td class="simple-table__cell">October 1 through December 31 of non-election year; Close of books of last report filed (October quarterly or Post-general)  through December 31 of election year</td>
        <td class="simple-table__cell">January 31 of following year</td>
      </tr>
    </tbody>
  </table>
</div>
 
/* No context defined. */
  • Handle: @simple-table
  • Preview:
  • Filesystem Path: components/02-components/tables/01-simple-table/simple-table.html