Tables

We use different types of tables to display complex information in a format that can be easily scanned by a site visitor.

Variable column table

The variable column table allows for anywhere from two to four columns of information that break down as stacked responsive content.

Example & Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem	Ipsum	Dolor	Consectetur
amet	elit	risus	nunc
ligula	sodales	quis	urna
vitae	varius	gravida	orci
ac	sit	eu	ac

<div>
    <table class="content-table">  
    <caption class="table-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</caption>  
    <thead>
        <tr>      
        <th scope="col">Lorem</th>      
        <th scope="col">Ipsum</th>
        <th scope="col">Dolor</th>      
        <th scope="col">Consectetur</th>
        </tr>
    </thead>
    <tbody>
      <tr>
        <td data-th="Lorem">
            <p>amet</p>
          </td>
          <td data-th="Ipsum">
            <p>elit</p>
          </td>
          <td data-th="Dolor">
            <p>risus</p>
          </td>
        <td data-th="Consectetur">
            <p>nunc</p>
          </td>

      </tr>   
      
      <tr>
        <td data-th="Lorem">
            <p>ligula</p>
          </td>
          <td data-th="Ipsum">
            <p>sodales</p>
          </td>
          <td data-th="Dolor">
            <p>quis</p>
          </td>
        <td data-th="Consectetur">
            <p>urna</p>
          </td>

      </tr>
         

      <tr>
        <td data-th="Lorem">
            <p>vitae</p>
          </td>
          <td data-th="Ipsum">
            <p>varius</p>
          </td>
          <td data-th="Dolor">
            <p>gravida</p>
          </td>
        <td data-th="Consectetur">
            <p>orci</p>
          </td>

      </tr>
      <tr>
        <td data-th="Lorem">
            <p>ac</p>
          </td>
          <td data-th="Ipsum">
            <p>sit</p>
          </td>
          <td data-th="Dolor">
            <p>eu</p>
          </td>
        <td data-th="Consectetur">
            <p>ac</p>
          </td>

      </tr>

    </tbody>
    </table>
</div>