🍷 Digital Wine Cellar – Pattern Library

Table: Column headers 

<table class="">
    <thead>
        <tr>
            <th scope="col" class="">Column 1</th>
            <th scope="col" class="">Column 2</th>
            <th scope="col" class="">Column 3</th>
            <th scope="col" class="">Column 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="">Row 1, Column 1</td>
            <td class="">Row 1, Column 2</td>
            <td class="">Row 1, Column 3</td>
            <td class="">Row 1, Column 4</td>
        </tr>
        <tr>
            <td class="">Row 2, Column 1</td>
            <td class="">Row 2, Column 2</td>
            <td class="">Row 2, Column 3</td>
            <td class="">Row 2, Column 4</td>
        </tr>
        <tr>
            <td class="">Row 3, Column 1</td>
            <td class="">Row 3, Column 2</td>
            <td class="">Row 3, Column 3</td>
            <td class="">Row 3, Column 4</td>
        </tr>
        <tr>
            <td class="">Row 4, Column 1</td>
            <td class="">Row 4, Column 2</td>
            <td class="">Row 4, Column 3</td>
            <td class="">Row 4, Column 4</td>
        </tr>
    </tbody>
</table>
 
<table class="{{data.modifier}}">
  {{#if data.caption}}
    <caption>{{data.caption}}</caption>
  {{/if}}
  {{#if data.thead}}
    <thead>
      <tr>
        {{#each data.thead}}
          <th scope="col" class="{{type}}">{{content}}</th>
        {{/each}}
      </tr>
    </thead>
  {{/if}}
  {{#if data.tfoot}}
    <tfoot>
      <tr>
        {{#each data.tfoot}}
          {{#if row-head}}
            <th scope="row" class="{{type}}">{{row-head}}</th>
          {{else}}
            <td class="{{type}}">{{content}}</td>
          {{/if}}
        {{/each}}
      </tr>
    </tfoot>
  {{/if}}
  <tbody>
    {{#each data.tbody.rows}}
      <tr>
        {{#each cells}}
          {{#if row-head}}
            <th scope="row" class="{{type}}">{{row-head}}</th>
          {{else}}
            <td class="{{type}}">{{content}}</td>
          {{/if}}
        {{/each}}
      </tr>
    {{/each}}
  </tbody>
</table>
 
{
  "data": {
    "tbody": {
      "rows": [
        {
          "cells": [
            {
              "content": "Row 1, Column 1"
            },
            {
              "content": "Row 1, Column 2"
            },
            {
              "content": "Row 1, Column 3"
            },
            {
              "content": "Row 1, Column 4"
            }
          ]
        },
        {
          "cells": [
            {
              "content": "Row 2, Column 1"
            },
            {
              "content": "Row 2, Column 2"
            },
            {
              "content": "Row 2, Column 3"
            },
            {
              "content": "Row 2, Column 4"
            }
          ]
        },
        {
          "cells": [
            {
              "content": "Row 3, Column 1"
            },
            {
              "content": "Row 3, Column 2"
            },
            {
              "content": "Row 3, Column 3"
            },
            {
              "content": "Row 3, Column 4"
            }
          ]
        },
        {
          "cells": [
            {
              "content": "Row 4, Column 1"
            },
            {
              "content": "Row 4, Column 2"
            },
            {
              "content": "Row 4, Column 3"
            },
            {
              "content": "Row 4, Column 4"
            }
          ]
        }
      ]
    },
    "thead": [
      {
        "content": "Column 1"
      },
      {
        "content": "Column 2"
      },
      {
        "content": "Column 3"
      },
      {
        "content": "Column 4"
      }
    ]
  }
}
  • Content: 
    /**
 * Table base styles
 */

@media screen {

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  table,
  th,
  td {
    border: 0;
  }

  th {
    vertical-align: bottom;
  }

  th,
  td {
    text-align: left;
    padding: 0.1em 0.5em;
  }

  tbody tr:nth-child(even) {
    background-color: var(--table-zebra);
  }

  /* Numerical value cells */
  th.num,
  td.num {
    text-align: right;
  }

  td.num {
    white-space: nowrap;
  }

  /* One-liner cells (nowrap) */
  td.one-line {
    white-space: nowrap;
  }

  /* Dashboard table */
  .dashboard-table {
    width: 100%;
  }

  .dashboard-table caption {
    caption-side: bottom;
    margin-top: 0.5em;
    font-size: 0.9em;
    font-style: italic;
    text-align: left;
  }
}
  • URL: /components/raw/table/table.css
  • Filesystem Path: components/02_molecules/table/table.css
  • Size: 758 Bytes

Table

The HTML <table> element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. Relevant MDN article.

This pattern library has support for a number of variations, as shown.