DEV Community

Cover image for A Guide to Styling Tables

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...
Collapse
 
efpage profile image
Eckehard

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?

Collapse
 
madsstoumann profile image
Mads Stoumann

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.

Collapse
 
efpage profile image
Eckehard • 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

Thread Thread
 
madsstoumann profile image
Mads Stoumann • 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>
Enter fullscreen mode Exit fullscreen mode

And:

td:focus {
  background: crimson;
}
Enter fullscreen mode Exit fullscreen mode

But again: better to control in JS!

Thread Thread
 
efpage profile image
Eckehard

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?

Thread Thread
 
madsstoumann profile image
Mads Stoumann

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; }
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
efpage profile image
Eckehard

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")
}
Enter fullscreen mode Exit fullscreen mode

see example

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

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

Image description

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

Collapse
 
robole profile image
Rob OLeary

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!

Collapse
 
madsstoumann profile image
Mads Stoumann

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

Collapse
 
riobrewster profile image
RioBrewster

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.

Collapse
 
madsstoumann profile image
Mads Stoumann

See my reply in the update.

Collapse
 
kanetu profile image
kanetu

This post is so wonderful, turns out I have been doing it wrong ever since, some guys tell me that do not using raw HTML

because of its tricky and difficult to style now you change my mind.
Collapse
 
madsstoumann profile image
Mads Stoumann

Cool — happy to hear that!

Collapse
 
chrisburkssn profile image
Chris Burks

Thanks for sharing. This post is very enlightening about styling tables. Very cool.

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Collapse
 
beacamphq profile image
BeacampHQ

I wish I had known this earlier, well no knowledge is wasted. Great guide, btw.

Collapse
 
madsstoumann profile image
Mads Stoumann

Thanks!

Collapse
 
ashishk1331 profile image
Ashish Khare😎

Now I feel I need more CSS in my life. Great article!

Collapse
 
madsstoumann profile image
Mads Stoumann

Thanks!

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

Loved the post ! I recently started writing online and appreciate the quality of this article!

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Collapse
 
stevevail profile image
Steve-Vail

So... what if you want a responsive table?

Collapse
 
madsstoumann profile image
Mads Stoumann

I have to write part 2, I guess

Collapse
 
ssjoy profile image
Md. Sakil Sazzad Joy

This is great stuff. Thank you

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Some comments have been hidden by the post's author - find out more