Improving table styling and readability

hrh_ginsterbusch

Master of Cramming
Original poster
Nov 18, 2021
420
164
wp-devil.com
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

John Morrison. Founder and Team Leader of SFF.N
SFF Network
SFF Workshop
SFFn Staff
Jun 19, 2015
4,156
7,111
sff.network
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 XD
 

hrh_ginsterbusch

Master of Cramming
Original poster
Nov 18, 2021
420
164
wp-devil.com
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 XD
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.