Improving table styling and readability

[hrh_ginsterbusch]

So what has always irked me kinda the wrong way: HTML tables always look so untidy, less legible, bland, and to some extend even chaotic.

Hence I suggest adding a bit more, but simple styling - which I did using the DevTools for a test (Images: Left one is before, right one is after adding a bit of CSS):

a) For one, add a zebra-striping to the tables, at least for the default "Dark Red" design, plus a bit of padding for the table cells.

b) For tables with a table head, add a bit more distinction to improve legibility, eg. light background, dark text, and maybe a bit bigger font size.

cu, w0lf.

 

[confusis]

I considered along the same lines when creating the table.

Some folks use the light mode themes, so we'd have to have an automatic way to change any styling to still be legible for the light mode heathens.

Also, we're using a relatively basic Wordpress WYSIWYG editor (the inbuilt one with some extra buttons) and I can't customise table backgrounds! Do you have any plugin recommendations to do it for us? As I said to other staff a while back, I'm a writer, I shouldn't have to code to write an article

 

[hrh_ginsterbusch]

I considered along the same lines when creating the table.

Some folks use the light mode themes, so we'd have to have an automatic way to change any styling to still be legible for the light mode heathens.

Also, we're using a relatively basic Wordpress WYSIWYG editor (the inbuilt one with some extra buttons) and I can't customise table backgrounds! Do you have any plugin recommendations to do it for us? As I said to other staff a while back, I'm a writer, I shouldn't have to code to write an article

These "customizations" are all done with CSS, and are best applied using eg. CSS classes. So, web 101 basics.

In WordPress, you can just edit the style.css of your theme, or add it as a custom css file ..

Edit: After a bit looking up other stuff, and removing a bit of text that could be seen as snarky (I am a neurodivergent person, hence I realize a lot of what I write or say is being seen as rude, snarky and impolite, despite it being just direct, plain unpolished infodumping), I found this very excellent tutorial, which explains and demonstrates all the main choices: https://wpastra.com/guides-and-tutorials/custom-css-wordpress/

It also mentions the Simple Custom CSS & JS plugin (among others), which one of my webdesigner colleagues seems to use a lot.

Additionally, I could just drop a quick snippet for both dark and light color schemes in a gist and link to it here in a reply, so you'd have something to start with

cu, w0lf.

 

[confusis]

As I avoid touching the code at all costs, I'll leave this with our dev @jØrd

 

[hrh_ginsterbusch]

As I avoid touching the code at all costs, I'll leave this with our dev @jØrd

I gonna put together a few variants and drop em in a gist when I got more time at hand, like the end of this week. Should be a good starting point for @jØrd

cu, w0lf.