Size and Styling of Table

Hi,

to adjust the size of cells, you will need to add some “Custom CSS”. I suggest that you take a look at the FAQ page at https://tobias.baethge.com/wordpress-plugins/wp-table-reloaded-english/faq/ where you will find an example for this, especially for the column widths. I don’t really see where exactly you feel a need for adjusting the size, but that should at least be a starting point.

To merge cells together, you can use the “colspan” feature, for which you can find a button (and help on how to use it) below the data input fields on the “Edit” screen of your table.

Regards,
Tobias

Thanks.

I have tried to add the colspan function and cannot seem to get it to work.

I have added #colspan# to the cell on the right of the cell that I want to merge into. The cell I have added the colspan function to has an image inside!

Please can you help?

Thanks

Hi,

I’m a little bit confused now…
The table on your page has not been created with the WP-Table Reloaded plugin, so obviously you won’t be able to use the features of the plugin (like #colspan#) here…

Regards,
Tobias

Hi,

Apologies for not explaining correctly!

My web page with the WP Reloaded table is here:

This website!</p>

The other webpage has a table displayed that I am trying to copy!!

As you can see the cell spaces are too big. I want merge the cells titled “Payday Lender & “Logo” together.

Many thanks

Chris

Hi Chris,

ah, ok, thanks for the explanation ??

Unfortunately, I can view the page with the new table, as it is not yet published. Can you maybe publish the page?

Regards,
Tobias

Now published!

Thanks

Chris

Hi Chris,

thanks for publishing the page, now I can see it.

I’m however unsure what you now want to achieve. You say that you want to make the cells wider, but as I see it there simply is no more space for this on the page, as the table already takes up the entire width.

And what do you mean with “merging” cells, as we seem to have a different understanding of this.

Thanks,
Tobias

Hi

I want to make the cells smaller, similar to the size in the table here

I want to merge the contents of the first and second rows together, as in the example here!. I want the text and also the image in the same cell under the heading Payday Lender!

Thanks

Hi,

thanks for the explanation.

You probably (and especially) want to reduce the height of the cells, as the width is already similar to your original table.
Now, the large height of the cells comes from a few HTML <br/> tags in the HTML code. That is added by WP-Table Reloaded as the result of manual line breaks being in the HTML code you added in to the cells for the links and images.
So, to reduce the height, you will need to go through all table cells and remove all manual line breaks that are in there. There must not be any line break in the content of a cell, except for the line breaks that get added by the browser automatically, due to the width of the text input field.

I suggest that you first do this and then we’ll go on with the merging of the cells.

Regards,
Tobias

Thanks for the reply!

I’m not sure how to remove the html
tags. Could you give quick explanation how I do this first?

Many thanks

Hi,

you don’t have to remove HTML tags, you just have to remove line breaks, especially in columns 2 and 14. There, you pasted in code which also has line breaks or empty lines after it. Those need to be removed.

Regards,
Tobias

Hi

Sorry for sounding stupid but how do I remove the line breaks?

If I go to the HTML view on the page all I can see is the shortcode!!

Thanks

Hi,

the line breaks are in the table cells, so you will need to the “Edit” screen of your table.
There, in the text fields, you must not have any manual line breaks, but only those that the browser adds due to the small width of the text field.
As this is kind of hard to check in those fields, I suggest that you copy the content from a cell (by pressing “Ctrl+A” and then “Ctrl+C” in a cell) and paste that into a text editor, like Notepad. There, removing all line breaks means that everything stands on one line (again except for automatic word wrapping by the program). When you then have removed the line breaks there, just copy/paste the content back into its cell, replacing the existing content.

Regards,
Tobias

Hi Tobias

Ok I understand now!

The table looks much better now!

Please can you help with merging the cells?

I presume I can adjust the width of the cells by adding code to the Plugin Options page? Can I centre all the text content there also?

Many thanks

Hi,

very nice, good job! There are still some line breaks left though, however not in the middle of the content, but right at the end. So, in columns 2 and 14, bring the cursor right behind the </a> and press “Del” a few times. That will remove all line breaks after the link HTML, to make the spacing even more consistent.

Now for the merging: This is actually a little bit tricky. I suggest that you do it in the same way as in your original table: Just put the link/name and the image in the cell. Then add the following to the “Custom CSS” textarea on the “Plugin Options” screen of WP-Table Reloaded. That will align the images to the right of the cell.

.wp-table-reloaded-id-2 img {
  margin: 0px!important;
  float: right;
}

(Now, out of curiosity, why do you want to merge the cells? I actually like the current state much better.)

And yes, adjusting the cell widths is possible through CSS. Please take a look at the FAQ page at https://tobias.baethge.com/wordpress-plugins/wp-table-reloaded-english/faq/ where this is explained.
In your case, you should however try this code first, as your theme adds some “padding” within the cells:

.wp-table-relaoded-id-2 th,
.wp-table-relaoded-id-2 td {
  padding: 4px!important;
}

That code should reduce this padding.
To center all text in the cells, use

.wp-table-relaoded-id-2 td {
  text-align: center!important;
}

Best wishes,
Tobias