Recognize a fact: tables are meant for viewing, not for fancy visual use.

Recently, there has been a frequent need for using tables in the backend. Designing a user-friendly table is a challenge, especially when dealing with a large number of data records and columns. Users can easily be distracted by additional elements. In terms of data presentation, tables are still an effective way of formatting, and their features can help us format more easily.

Tables in HTML

In HTML, a table consists of several tags:

• thead: defines the table header
  • tr: defines the header row
  • th: defines the header
• tbody: defines the table content
• tfoot: defines the table footer

Avoid stretching the table width

Let the content of the table determine its own width. If the table width is stretched, the distance between two columns can become too long and hinder readability.

Choose displayed columns

If there are too many columns in the data (e.g., more than 10), users can be given the option to choose which columns they want to display through checkboxes or other means.

Add <caption>

A <caption> can be added to the table to provide a title. For example:

<table>
  <caption>
    <h4>Billing List</h4>
  </caption>
  <thead>
    <tr>
      <th>Date</th>
      <th>Name</th>
      <th>Population</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2017-11-11</td>
      <td>kalan.chen</td>
      <td>12375</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

The positioning can be done using caption-side: top | bottom.

caption {
  caption-side: top;
}

Remove unnecessary colors and borders

Although it may seem colorful at first glance, borders and background colors can create visual noise for users. While it may seem like a thoughtful design, it can make it difficult to find the desired information.

Use simple grayscale for distinction and eliminate (or lighten) the color of the borders to remove unnecessary visual noise and make it easier for users to find information.

Align headers and content

In general, text should be left-aligned, while numbers should be right-aligned. In cases where numbers vary, font-variant-numeric: tabular-nums can be added (if the font supports it) to prevent the width from constantly changing due to varying numbers.

Provide simple sorting and searching

For backend systems, users may frequently search for data within tables. One way is to update the data with each AJAX request or implement it on the frontend. We can provide simple sorting functionality to allow users to quickly find data or provide a basic search feature.

Side note: Sorting can actually be done using element.appendChild. If the appended node already exists in the parent, it will replace the position instead of adding a new node.

Additionally, to help screen readers understand the current sorting method, aria-sort can be added:

<th aria-sort="ascending">
</th>

Consider simple @print styling

For systems like billing or records, operators may need to print the contents of the table in addition to viewing them on the web page. In this case, details for printing can be handled using @media print. For example, font sizes may need to be expressed in pt, colors may need to be changed to black and white, and spacing may need to be reduced. These are all details to consider.

Responsive design

Traditionally, when supporting mobile versions of tables, horizontal scrolling is often used to display the content. However, frequent scrolling on a mobile device is still not an ideal user experience.

This can be achieved using data attributes combined with CSS pseudo-elements. On mobile devices, we can change the display of each row to be vertical. Like this:

<table>
  <caption>
    Payment Records
  </caption>
  <thead>
    <tr>
      <th>Package</th>
      <th>Amount</th>
      <th>Quantity</th>
      <th>Date</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Package">A Blade of Grass, A Drop of Dew, $100 Support</td>
      <td data-label="Amount">$100</td>
      <td data-label="Quantity">1</td>
      <td data-label="Date">2016-12-26</td>
      <td data-label="Status">Payment Successful</td>
    </tr>
    <tr>
      <td data-label="Package">A Blade of Grass, A Drop of Dew, $100 Support TingChi</td>
      <td data-label="Amount">$100</td>
      <td data-label="Quantity">1</td>
      <td data-label="Date">2016-12-26</td>
      <td data-label="Status" data-status="fail">
        Payment Failed
        <div class="repay-information">
          <button>Repay</button>
          <button>Delete Record</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Transformed to:

This way, scrolling is not necessary even on mobile devices.

{% raw %}

table {
  width: 100%;
  font-family: "PingFang TC";
  td {
    text-align: center;
  }
}

@media screen and (max-width: 500px) {
  table > thead {
    border: 0;
    display: none;
    position: absolute;
  }
  tbody tr {
    border: 1px solid #aaa;
    margin-bottom: 1em;
    display: block;
  }

  td:first-child {
    display: block;
    font-weight: bold;
    text-align: center;
  }

  td:not(:first-child) {
    margin-top: 1em;
    margin-bottom: 1em;
    display: block;
    text-align: right;
    &:before {
      float: left;
      content: attr(data-label);
    }
  }
}

Conclusion

Tables are convenient for presenting data, as the calculations for width and equal height are already implemented. Tables are almost indispensable for viewing data when creating backend systems.

There are some aspects to consider when designing tables. This article provides several points to pay attention to when creating tables and offers simple implementations. Other considerations will be added in the future if necessary.