In the WordPress block editor (Gutenberg), for every block you add, there is the option to add a CSS class. It’s the very last option in the block settings (while that block is selected). So add any term there, for example “mynewtable1”.
Then open the theme customizer (menu Design > Customizer in the left admin sidebar), in there the field for “custom CSS”, and add two css rules like this:
The first rule will create the thicker border around the table and make sure cell borders won’t double, the second one is for the cell borders themselves.
Choose whatver border thickness and color you like in there.
This should do the trick…
ANOTHER ADDITION:
If you want this to work for every table, forget about the class and just insert the following rules in the customizers custom CSS field:
How can I add a border to this table? Google points to a huge range of plugins centered around wordpress tables and I absolutely do not want to add one more plugin to my site for something as simple as a table.
Besides the plugin solution all other solutions that I’ve come across instruct to edit the HTML code and add a code in every <td> tag for a border. This solution wouldn’t work either because I have multiple tables going forward.
How can I add a table to WordPress that contains a border between all cells and which contains a strong external border all around the cells?
Comments
Comment posted by imgur.com/a/Dn09k1h.png
I tried out this method. The table border solution works. The td border on the other hand seems to be getting overridden by some other CSS. It’s not clear what exactly is overriding it or how to prevent the overriding. I tried out both the ways (via a class and directly). Here is a screenshot that shows what the CSS looks like:
Comment posted by Johannes
@Mugen The CSS you posted as a screenshot png is the CSS of the
Comment posted by Mugen
This solution worked out! I found out about the important tag and tried it out. By the time I came here to post this comment you had already added the previous one mentioning about adding the “!important” tag.
Comment posted by Mugen
We also need to make another entry for the th tag. I’m going to edit your answer and add that code as well so that this solution stands as more complete. Thanks for answering!
Comment posted by Mugen
The CSS solution works. However, I’m not sure where to add the JavaScript code to the HTML. Do I need to add a script tag before the table? Sorry, I’m not so well acquainted with WordPress.
Comment posted by Riley Hemphill
like this: it should go at the end of the html file.
Comment posted by Riley Hemphill
Also I made a mistake in my original answer: table needs to go in quotes. It’s all corrected now.
Comment posted by Mugen
Thanks for responding! It seems like WordPress doesn’t allow the user to add a Javascript code directly on the HTML page. I tried editing the page and adding the code but WordPress converts it into a play button for the user. Is it not possible to add the cell borders using CSS somehow?
Comment posted by Mugen
Thanks for answering! My query got resolved with the other response that shows how to use the CSS.