Web Typography: 11 Tips for Readable Tables

Design Tables for Reading, Not Just Looking

Good web designers always carefully balance the choice of font and font size for website body text. However, tables are often neglected. Sometimes these tables resemble images more than text, completely obscuring the information they're meant to convey. Our tips will show you how to design tables that keep the focus on the content but still look really good.

What's the Purpose of Tables on Websites?

We most often encounter tables in spreadsheet programs, where they serve to calculate and process data. On websites, though, they serve an entirely different purpose: the presentation of results and information.

Well-designed tables present data in a multi-dimensional and clear manner so that it can be correlated or compared. Therefore, the information contained in the table must always be the focus of optimal presentation.

1. Design Each Table for the Reader

Tables come in the most varied forms. Some consist solely of numbers, others are a complex mix of data and text information. Some tables are meant to be scanned from top to bottom, while others can be read row by row. Subway schedules, technical specifications, or price comparisons – tables are everywhere.

No matter what specific data they contain, one aspect remains the same for all tables: The reader should be able to understand the presented information at first glance. Therefore, resist the urge to pack data too densely. Instead, put yourself in the reader's shoes. Prepare each table so that it is easy for the reader to process the information contained.

2. Keep the Table Flexible

The first impulse might be to set a fixed width for a table so that surrounding text flows well around it. However, this relegates the table to being a visual styling element. Strong background colors and a conspicuous border reinforce this effect and cause the table's content to fade into the background.

Therefore, think of the table as text, not a graphic. If the table's content doesn't dictate otherwise, avoid setting identical widths for columns. Columns with a lot of text should be wider, while those with fewer digits should be narrower to facilitate overview for the reader.

Assigning an individual width to each column may seem cumbersome, but it can be handled straightforwardly. Simply do not set column widths and leave the determination of optimal widths to the web browser, which uses suitable and proven algorithms.

3. Minimal Design Supports Legibility

Lines and borders enclose the information in the table. Clever table design can do without fills and strokes entirely. Take the first step by dispensing with the border. After that, check all lines between columns and rows for their necessity and remove any redundant elements accordingly.

Background fills may look good at first glance, but they also distract from the content. This is especially true for fills that highlight every second row, thereby disadvantaging the surrounding rows in perception.

The most important tools for minimal table design are text alignment, grouping, and white space. With the skillful use of these three tools, you can create tables that are both visually appealing and exceptionally readable.

4. Align Text Left, and Numbers Right

Readability of text and numbers suffers when they are centered. Text is most comfortably read when aligned to the left. Ragged-right is appropriate and is to be preferred over justified for these generally very short texts.

Numbers, however, should generally be formatted right-aligned. This allows the reader to better gauge the magnitude of the numbers. Headings should follow the alignment of the data below them, so text should be left-aligned and numbers should be right-aligned.

5. Align with the Decimal Point

Sometimes numbers with a different number of decimal places have to be displayed. To make it easy for the reader to get a quick overview in this case, our recommendation is to display the numbers aligned with the decimal point.

This method of presentation was already provided for in HTML 4 but was not supported in practice. Even though support is not yet widespread, CSS offers the same possibility with text-align.

The syntax of the function is presented in the example below. Put the chosen decimal symbol in quotes and then specify the desired alignment. The decimal symbol is relatively free to choose.

td { text-align: "." center; }

6. Use Monospaced Digits

Temperature trends, financial overviews, or bus schedules: Many tables are made up predominantly or entirely of digits. Readers will often skim these tables from top to bottom to find specific data points or draw comparisons.

This quick overview is easy when the units, tens, and hundreds places of the digits lie exactly on top of each other vertically. To prevent the digits from shifting, all must have the same width. In typography, this is referred to as tabular figures.

Digits with the same width are known from non-proportional, or monospace, fonts. However, it's often possible to avoid using a second font because many well-equipped proportional fonts include so-called tabular digits.

These tabular digits have the same width and additional minor adjustments that facilitate the reading of large quantities of numbers. In particular, the tabular digit 1 often features an underscore, and the tabular 0 is somewhat narrower than in proportional setting. The font-variant-numeric definition is used to call up the digits optimized for use in tables:

table {
    font-variant-numeric: lining-nums tabular-nums;
}

7. Use White Space to Group

After eliminating lines and fills, the remaining white space is used to make it easier for users to read the table. At this point, it is useful to throw all thoughts of grid lines overboard and instead dive deep into the toolbox of typography.

In traditional HTML, each individual cell has its own border. To optimally control placement, start by eliminating the space between adjacent cell borders:

table {
    border-collapse: collapse;
}

Next, define the padding, which is the space between the cell content and its border on the top, right, bottom, and left.

Our example shows good starting values. The mentioned, small space at the top serves to visually separate the rows from each other. Adjust the specific values as needed depending on the amount of text and chosen font.

td, th {
    padding: .125rem .25rem;
    line-height: 1;
}

8. Positioning of Headings

If you embed your table in a <figure> element, preferably use <figcaption> for the heading. The <figcaption> can be defined above or below the table.

However, avoid using <figure> as the surrounding element for your table. Instead, use the appropriately named HTML element <caption>. In the code, <caption> must be placed immediately after the <table> tag and before the first rows of the table.

On the webpage, the title row can be displayed below the actual table using CSS, if desired:

caption { caption-side: bottom; }

9. Adaptability for Small Screens

Tables require a reasonable minimum width to display all information meaningfully. An engaging body text often requires only 45 to 75 characters to be appropriately displayed. This is too little for most tables.

Therefore, choose a font with a narrow set width. Another option is to reduce the font size. Legibility must always be the forefront concern, so you may choose only one of these options if necessary.

Vertical space for a table on small screens is often limited. Save valuable vertical space by slanting the column headings slightly. This requires some CSS manipulation, but the readability remains very good.

Pay attention in our example to the positioning of the heading as absolute. This keeps the data column itself narrow:

th {
    transform-origin: bottom left;
    position: absolute;
}
th {
    transform: translate(2.58em,-2em) rotate(-60deg);
}
th {
    transform: translate(5.14em,-2em) rotate(-60deg);
}

10. Enable Horizontal Scrolling

However, some tables are so wide that they can hardly be fully displayed on small screens or are partially unreadable with the adjustments available. In this case, it helps to set the table in a comfortably readable font size and let the web browser do some work.

If you leave the display of the table to the web browser, it will display part of the table outside the visible window area. This is no problem as long as you give the reader the opportunity to reach these parts of the screen that are outside.

Establish this with the following CSS rules. This allows the reader to move the table horizontally independent of the rest of the text, giving access to all parts of the table:

table {
    max-width: 100%;
    overflow-x: scroll;
}

To compress the table as much as possible, it is important not to specify a fixed width. Good readability of the table is achieved through the clever use of non-breaking spaces and white-space:nowrap.

11. Linearization of Simple Tables

Another way to format wide tables for very narrow screens is to linearize them. This is especially suitable for very simply structured tables, such as an employee directory.

The same text formatting can be used to display a table very narrowly or at normal width, depending on how much lateral space is available. This is made possible by adding the data-title attribute to each cell:

<th data-title="Name">Mustermann, Eva</th>
<td data-title="Team">Support</td>
<td data-title="Etage">3</td>
<td data-title="Raum">1234</td>

To produce the linearization on small screens, four steps are necessary. In the first step, the page width at which the altered display shall occur is named. In the second step, display:block is set to align the table elements vertically instead of horizontally. The next step involves hiding empty cells. The final step, displaying the previously defined labeling, is optional.

The CSS lines below are sufficient to generate the functionality described. Add aesthetic features as needed depending on the information displayed:

@media (max-width: 25em) {
  table, caption, tbody, tr, th, td {
    display: block;
    text-align: left;
  }
  thead, th:empty, td:empty {
    display: none;
    visibility: hidden;
  }
  th[data-title]:before, td[data-title]:before {
    content: attr(data-title) ": ";
    display: inline-block;
    width: 3.5em;
  }
}

Well-Readable Tables Require Thoughtful Styling

It's often the little things that make a big difference. With the methods shown here from our web design practice, we want to show you how easy it can be to make any data presentation in a table readable with a few clever tricks.