DEV Community

A Guide to Styling Tables

Mads Stoumann on January 28, 2024

I've recently noticed a small paradox: Many years ago – before CSS grid — we used <table>s to simulate grid layouts. Now that we have grid la...

Read full post

Eckehard • Jan 29

Thank you for the writeup. Maybe we should have some interactive table wizzard to manage those options.

I recognized that things get even trickier if you want cell selection and a hover effect for tables. Any recommendations for this?

Mads Stoumann • Jan 29

You mean selecting the text within a cell or editable cells? You can add a contenteditable attribute to each cell, or contenteditable=plaintext. However, this is easier to control from script. When you click on a cell, you can get the cellIndex of the event.target, and the rowIndex from it's parent.

Eckehard • Jan 29 • Edited

There are some interactive table generators like this or this, but they do not seem to use the full potential of CSS. There are so many options we can use.

I am also struggling with cell selection by click. Contenteditable makes the content ediable, but often you just want so select a cell. Applying an effect on hovering is simple, but how to show a selection? See this example

Mads Stoumann • Jan 29 • Edited

Still not completely sure what you mean! If you want to add a visual clue to the "active cell being edited", either add and remove a class dynamically from JS, or use td:focus or td:focus-visible in CSS. If you add contenteditable directly on cells instead of the whole table, you can tab through the cells and edit as you like (but better to do in JS!). If you want to select all text on selection, look into Selection and Range.

So:

<table>
  <tr>
    <td contenteditable>cell1</td>
    <td contenteditable>cell2</td>
    <td contenteditable>cell3</td>
    <td contenteditable>cell 4</td>
  </tr>
</table>

And:

td:focus {
  background: crimson;
}

But again: better to control in JS!

Eckehard • Jan 29

See this example
If you click on a cell, it stays selected. If I select another cell, the previous selection is removed. But this is a library that is quite heavy and relies on jQuery, so I would like to have a solution with CSS only.

I tried td:focus, td: visited, but neither seems to have any effect. "active" works only while i press the mouse only. Surely I can use Javascript, but as anything else is done in CSS, this is kind of awkward.

Tables might also have some options like:

Multiselect
range select
row select

This are options you usually find on data grids in most programming languages, but HTML does not seem to have any option for this. But how can we prevent to implement all this by hand or - at least - make it pretty lightweuight?

Mads Stoumann • Jan 29

The example you provided does exactly what I wrote: Adds a class to the cell. You can hack this with contenteditable per cell and :focus, but it's not really recommended. For selecting a row, you could add a checkbox to the first cell per row, and then use CSS:

/* simplified */
tr:has(:checked) { background: hotpink; }

Eckehard • Jan 29

Some Jyvascript may do the trick, but it´s not really handy:

let oc = null, or=null 
bc = (el, col) => el.style.backgroundColor = col

mytable.onclick = (el) => {
  if (oc) {
    bc(oc,null)
    bc(or,null)
  }
  bc(oc = el.target,"red")
  bc(or = oc.parentElement,"silver")
}

see example

Anmol Baranwal • Feb 1

You can also check out the styled table in my old project.

I was a beginner at that time, so I may not have been aware of these awesome tips you mentioned. Repository on GitHub

Rob OLeary • Jan 28

Great info. Would be good to cover making tables responsive (fluid) in a follow-up. If you learn grid first, then tables can feel rigid and uncompromising!

Mads Stoumann • Jan 28

Good idea! I was also planning to write an article on how to navigate tables/datagrids with keyboards, following W3C's standard.

RioBrewster • Jan 31

You don't need:
<colgroup><col><col><col><col></colgroup>
You do need: <th scope="col"> for each of the column headers.

And you would do better to make "Known as" the first column, and make that
<tr><th scope="row">Batman</th><td>Bruce</td><td>Wayne</td><td>Gotham City</td></tr>

This is how you make the table accessible to screen reader users.