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...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
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?
You mean selecting the text within a cell or editable cells? You can add a
contenteditable
attribute to each cell, orcontenteditable=plaintext
. However, this is easier to control from script. When you click on a cell, you can get thecellIndex
of theevent.target
, and therowIndex
from it's parent.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
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
ortd:focus-visible
in CSS. If you addcontenteditable
directly on cells instead of the whole table, you cantab
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:
And:
But again: better to control in JS!
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:
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?
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:Some Jyvascript may do the trick, but it´s not really handy:
see example
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
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!
Good idea! I was also planning to write an article on how to navigate tables/datagrids with keyboards, following W3C's standard.
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.
See my reply in the update.
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
Cool — happy to hear that!
Thanks for sharing. This post is very enlightening about styling tables. Very cool.
Thank you!
I wish I had known this earlier, well no knowledge is wasted. Great guide, btw.
Thanks!
Now I feel I need more CSS in my life. Great article!
Thanks!
Loved the post ! I recently started writing online and appreciate the quality of this article!
Thank you!
So... what if you want a responsive table?
I have to write part 2, I guess
This is great stuff. Thank you
Thank you!