Skip to Main Content
Concord
InfoComponentsUtilities
GitHubNPM

Table

A grid designed to show large amounts of information using rows and columns.

Basic Usage

You can style a Table by adding the cd-table class to any table element.

First Name Last Name Job Area Job Title
John Johnson Analytics Data Analyst
Jack Jackson Analytics Manager
Robin Robinson Engineering Software Engineer
HTMLCopied!
<table class="cd-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>

Caption/Footer

The caption and tfoot elements are styled automatically.

Sales Figures
Quarter Gross Revenue
Q1 $1,202,133
Q2 $2,001,259
Q3 $997,673
Q4 $1,012,422
Total $5,213,487
HTMLCopied!
<table class="cd-table">
  <caption>
    Sales Figures
  </caption>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Gross Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$1,202,133</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$2,001,259</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$997,673</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$1,012,422</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$5,213,487</td>
    </tr>
  </tfoot>
</table>

Caption Position

You can place the caption below the table by adding the class cd-caption-position-bottom to the table element.

Sales Figures
Quarter Gross Revenue
Q1 $1,202,133
Q2 $2,001,259
Q3 $997,673
Q4 $1,012,422
HTMLCopied!
<table class="cd-table cd-caption-position-bottom">
  <caption>
    Sales Figures
  </caption>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Gross Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$1,202,133</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$2,001,259</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$997,673</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$1,012,422</td>
    </tr>
  </tbody>
</table>

Subtle

You can make the styling softer by adding the class cd-variant-subtle to the table element.

Quarter Gross Revenue
Q1 $1,202,133
Q2 $2,001,259
Q3 $997,673
Q4 $1,012,422
HTMLCopied!
<table class="cd-table cd-variant-subtle">
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Gross Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$1,202,133</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$2,001,259</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$997,673</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$1,012,422</td>
    </tr>
  </tbody>
</table>

Spacing

You can make a Table more compact by adding the class cd-spacing-dense or more spread out with the class cd-spacing-sparse.

To further customize the spacing, you can set the --cd-table-spacing CSS variable on the Table element. The value of this variable must be a unitless number. A value of 1 corresponds to the default density.

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
HTMLCopied!
<table class="cd-table cd-spacing-dense">
  <caption>
    Dense
  </caption>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Gross Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$1,202,133</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$2,001,259</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$997,673</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$1,012,422</td>
    </tr>
  </tbody>
</table>
<table class="cd-table cd-spacing-sparse">
  <caption>
    Sparse
  </caption>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Gross Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$1,202,133</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$2,001,259</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$997,673</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$1,012,422</td>
    </tr>
  </tbody>
</table>