Solution 1 :

(edited after edited question)

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:

.mynewtable1 {
  border: 3px solid black;
  border-collapse: collapse;
}
.mynewtable1 td, .mynewtable1 th {
   border: 1px solid #999;
}

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:

table {
  border: 3px solid black;
  border-collapse: collapse;
}
td, th {
   border: 1px solid #999;
}

Solution 2 :

EDIT: My apologies I didn’t see this:

This solution wouldn’t work either because I have multiple tables going forward.

In order to generate a border on every table, you would need to use javascript.

document.querySelectorAll('table').forEach(el => {
  el.style.outline="2px solid black"
)}

Original response

You need to add a css style to the table, which can be done directly (inline) as follows:

<table class="has-subtle-pale-blue-background-color has-background" style="outline: 2px solid black"> 

Alternately, you could add a css style like this:

<table class="has-outline has-subtle-pale-blue-background-color has-background">

And then in your css file:

.has-outline {
    outline: 2px solid black;
 }

Of course, 2px width and black is just as an example and you can set those values to whatever you like.

Problem :

I tried adding a table on a WordPress site by using the gutenberg editor.

The table has the following code:

<figure class="wp-block-table aligncenter is-style-stripes">
   <table class="has-subtle-pale-blue-background-color has-background">
      <thead>
         <tr>
            <th class="has-text-align-center" data-align="center">Heading1</th>
            <th><strong>Heading2</strong></th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td class="has-text-align-center" data-align="center">text1</td>
            <td>value1</td>
         </tr>
         <tr>
            <td class="has-text-align-center" data-align="center">text2</td>
            <td>value2</td>
         </tr>
         <tr>
            <td class="has-text-align-center" data-align="center"></td>
            <td></td>
         </tr>
      </tbody>
   </table>
</figure>

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.

By