Making tables more accessible with CSS
Tags: a11y, css
Published: 2020-10-12 02:39:35

---
title: Making tables more accessible with CSS
published: true
description: Adding some styles to the HTML tables will make them more accessible and usable. Here are some tips on how to achieve it.
tags: a11y,CSS
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/32h1l1053hcd3ohhio64.png
series: Web Accessibility with CSS
---

Many things can be done to make an HTML table accessible: add a `<caption>`, use semantic HTML (`<thead>`, `<tbody>`, `<tfoot>`...), associate date with the right headers (using `role`, `id` and `headers`)...

Most of those changes will go on the HTML side, but some things can be done exclusively on CSS to improve the accessibility and usability of tables.

Let's see them starting with an example:

```html
<table>
  <thead>
    <tr>
      <th>Col1</th> <th>Col2</th> <th>Col3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ABC</td> <td>DEF</td> <td>GHI</td>
    </tr>
    <tr>
      <td>JKL</td> <td>MNO</td> <td>PQR</td>
    </tr>
    <tr>
      <td>STU</td> <td>VWX</td> <td>YZ.</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>123</td> <td>456</td> <td>789</td>
    </tr>
  </tfoot>
</table>
```

That code will generate a table like this one on most browsers:

<figure>
![Screenshot of a table with 3 rows and 3 columns. There are no styles](https://dev-to-uploads.s3.amazonaws.com/i/fln0atiqn34u70g1ef1y.png)
<figcaption>Without styles, the table content is <em>clogged</em> and can be confusing.</figcaption>
</figure>

This is a table with no styles whatsoever. And needless to say, it looks terrible. Many issues need to be addressed to improve accessibility and usability in general. Sighted users (even ones with 20/20 vision) will have many problems:

- It's tough to differentiate table head rows from the rest of the rows (even with the bold from the `<th>`).
- Content within the rows is too close together, and it may not be easy to see where a column ends, and the next one starts.
- In bigger tables, users could "lose track" of the line and jump between lines.
- It's impossible to differentiate between rows in the table body and rows in the table footer.

This post will review some easy fixes for those issues and how they can be implemented just on the CSS side.


## 1. Add spacing between the content

Adding space will help unclutter and unclog the table. We can achieve this by adding padding to the table cells –and don't forget the `<th>` too:

```css
th, td {
  padding: 0.5rem 1rem;
}
```

The original table with this change will look like this:

<figure>
![Same table as before, but now the columns are separated](https://dev-to-uploads.s3.amazonaws.com/i/fmf0mlnlbcxjmtihlpct.png)
<figcaption>Now the columns are clearly differentiated</figcaption>
</figure>

Note that the padding values could be adjusted to make the separation bigger or smaller, but at this point, the table columns are clearly differentiated and obvious, which was our goal.

To better differentiate the content, we could have gone for a different approach adding borders in the table –and that would have addressed several of the issues noted above–, but personally, the result is still subpar and would require some of the suggestions below to make it look better.

## 2. Add a visual separation between table regions

The only visual indication that the first row is a header is that the text is written in bold letters. This happens because we are using `<th>`. If he used `<td>` instead, it would be impossible to say.

The same thing happens with the `<tfoot>`; it is visually impossible to know if the last row is a table footer or another row in the `<tbody>`.

One thing that can be done is adding a line below the `<thead>` and above the `<tfoot>`. We could do that by applying a border to the head and foot cells, but that could lead to (easily solvable) problems.

Another option is using a `box-shadow` that will be applied to the `thead` and `tbody` elements. Like this:

```css
thead {
  box-shadow: inset 0 -2px;
}
  
tfoot {
  box-shadow: inset 0 2px;
}
```

Now you can clearly distinguish what the head, the body, and the footer in our table are:

<figure>
![Table with lines between the first and second rows, and between the last and second to last rows](https://dev-to-uploads.s3.amazonaws.com/i/pvgb41w6bw140d6xmhdz.png)
<figcaption>Each section of the table is defined</figcaption>
</figure>

While the sections are easily identifiable, if the table had many rows and columns, users reading data horizontally may jump from line to line and lose track of where they are.

## 3. Add a distinction between consecutive rows

To avoid this jumping from line to line and from row to row, we can change the row color alternatively. To do so, we can target odd rows using `:nth-child(odd)` and even rows by using `:nth-child(even)`:

```css
table > tr:nth-child(even),
tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.05);
}
  
table > tr:nth-child(odd),
tbody tr:nth-child(odd) {
  box-shadow: 0 -1px rgba(0,0,0,0.1), 0 1px rgba(0,0,0,0.1);
}
```

As you may have noticed, if you applied the code above, it leaves a small spacing between rows that doesn't look great. To avoid it, we can collapse the borders:

```css
table, thead, tbody, tfoot, tr, td, th {
  border-collapse: collapse;
}
```
Which will generate this table:

<figure>
![Table with borders after table head, and before table footer, also the lines alternate colors](https://dev-to-uploads.s3.amazonaws.com/i/maae3wby6ohdlxsqv9l3.png)
<figcaption>Alternating rows make content easier to follow</figcaption>
</figure>

Now our table has clearly separated sections, and the alternating rows make the content easier to follow.

## 4. Add highlight to active/hovered row

One final touch would be highlighting the row that is currently "active" or, more specifically, where the mouse is over.

We do by applying a different background on the `:hover` state of each row:

```css
table > tr:hover,
tbody tr:hover {
  background: #bdf;
}
```

Now we have the same table as before, but when we move the mouse over each row, it is displayed in a shade of blue:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jhxff3qn39yz0vnchdzw.png)

And with this one, we are done. As you may have noticed, these tips and tricks are not specific to accessibility, but more related to the table's visualization and its usability.

They will impact how sighted, and low-vision users interact and with the tables. And in that sense, they are important for accessibility too.

---

**Create tables in which the data is clearly sorted and distinguishable.**