Custom tables are used in statistical press releases to present financial information. This component was designed specifically to work within the constraints the existing Wagtail table block at the time. The styling right-aligns content in cells that aren’t headers, which is only appropriate for integer data.

When to use

  • When you need both a header row and a header column
  • When the table holds columns of integer data

Github issues

<div class="container">
    <h4>Six-month financial activity of Congressional candidates</h4>
    <div class="rich-text">
        <p>(<i>dollar figures in millions</i>)</p>
    </div>
    <div class="custom-table">
        <table>
            <thead>
                <tr>
                    <th>Year</th>
                    <th>Number of candidates</th>
                    <th>Receipts</th>
                    <th>Disbursements</th>
                    <th>Debts owed</th>
                    <th>Cash on hand</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>2017</th>
                    <td>977</td>
                    <td>$386.5</td>
                    <td>$187.6</td>
                    <td>$39.7</td>
                    <td>$508.0</td>
                </tr>
                <tr>
                    <th>2015</th>
                    <td>658</td>
                    <td>$285.0</td>
                    <td>$120.1</td>
                    <td>$34.8</td>
                    <td>$449.8</td>
                </tr>
                <tr>
                    <th>2013</th>
                    <td>704</td>
                    <td>$287.2</td>
                    <td>$137.9</td>
                    <td>$29.0</td>
                    <td>$351.0</td>
                </tr>
                <tr>
                    <th>2011</th>
                    <td>778</td>
                    <td>$281.3</td>
                    <td>$118.9</td>
                    <td>$46.8</td>
                    <td>$340.0</td>
                </tr>
                <tr>
                    <th>2009</th>
                    <td>794</td>
                    <td>$238.3</td>
                    <td>$104.5 </td>
                    <td>$29.8</td>
                    <td>$360.2</td>
                </tr>
                <tr>
                    <th>2007</th>
                    <td>713</td>
                    <td>$230.1</td>
                    <td>$94.8</td>
                    <td>$38.2</td>
                    <td>$313.8</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="t-sans custom_footnote">*Includes activity from January 1 of the pre-election year through June 30 of the same year. Contribution limits are indexed for inflation every cycle. The totals in the 2017 row may differ slightly from the sum of the numbers in the two subsequent paragraphs as the numbers have been rounded. The number of candidates reflects the number of candidate committees that filed reports with financial activity in a given election cycle.</div>
</div>
<div class="container">
  <h4>Six-month financial activity of Congressional candidates</h4>
  <div class="rich-text"><p>(<i>dollar figures in millions</i>)</p></div>
  <div class="custom-table">
    <table>
      <thead>
        <tr>
          <th>Year</th>
          <th>Number of candidates</th>
          <th>Receipts</th>
          <th>Disbursements</th>
          <th>Debts owed</th>
          <th>Cash on hand</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>2017</th>
          <td>977</td>
          <td>$386.5</td>
          <td>$187.6</td>
          <td>$39.7</td>
          <td>$508.0</td>
        </tr>
        <tr>
          <th>2015</th>
          <td>658</td>
          <td>$285.0</td>
          <td>$120.1</td>
          <td>$34.8</td>
          <td>$449.8</td>
        </tr>
        <tr>
          <th>2013</th>
          <td>704</td>
          <td>$287.2</td>
          <td>$137.9</td>
          <td>$29.0</td>
          <td>$351.0</td>
        </tr>
        <tr>
          <th>2011</th>
          <td>778</td>
          <td>$281.3</td>
          <td>$118.9</td>
          <td>$46.8</td>
          <td>$340.0</td>
        </tr>
        <tr>
          <th>2009</th>
          <td>794</td>
          <td>$238.3</td>
          <td>$104.5  </td>
          <td>$29.8</td>
          <td>$360.2</td>
        </tr>
        <tr>
          <th>2007</th>
          <td>713</td>
          <td>$230.1</td>
          <td>$94.8</td>
          <td>$38.2</td>
          <td>$313.8</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="t-sans custom_footnote">*Includes activity from January 1 of the pre-election year through June 30 of the same year. Contribution limits are indexed for inflation every cycle. The totals in the 2017 row may differ slightly from the sum of the numbers in the two subsequent paragraphs as the numbers have been rounded. The number of candidates reflects the number of candidate committees that filed reports with financial activity in a given election cycle.</div>
</div>
/* No context defined. */
  • Handle: @custom-table
  • Preview:
  • Filesystem Path: components/02-components/tables/03-custom-table/custom-table.html