Skip Navigation

[Resolved] Table not centered on page

This thread is resolved. Here is a description of the problem and solution.

Problem:

The issue here is that the user has a table on their page but this table was not centered. They also wanted to remove the borders from the table.

Solution:

In this user's case they were under the impression that if they centered the texts in the table then it would be aligned correctly with the centered text on the page itself.

Unfortunately this is not so because the texts are centered relatively to the table.

http://html-tuts.com/center-div-image-table-ul-inside-div/

To remove the border all that is needed is to use the border = '0' attribute

example


<table border="0">

This support ticket is created 5 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

Tagged: 

This topic contains 2 replies, has 2 voices.

Last updated by philippeS-4 5 years, 11 months ago.

Assisted by: Shane.

Author
Posts
#1222545

I am trying to: center a 3 columns table on the page. The text above the table is centered, when you look at the table middle column it is slightly off centered in relation the text above.

Also how do I remove the table borders, thanks.

Link to a page where the issue can be seen: hidden link

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<table width="100%" class="wpv-loop js-wpv-loop">
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<tr>
<td>
[wpv-post-body view_template="loop-item-in-exhibitors"]
</td>
[wpv-item index=other]
<td>
[wpv-post-body view_template="loop-item-in-exhibitors"]
</td>
[wpv-item index=4]
<td>
[wpv-post-body view_template="loop-item-in-exhibitors"]
</td>
</tr>
[wpv-item index=pad]
<td></td>
[wpv-item index=pad-last]
<td></td>
</tr>
</wpv-loop>
</table>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

#1222781

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Philippe,

Thank you for contacting our support forum.

Actually the problem is not that the text isn't centered. The text is actually centered, it is the table that is not centered on the page. The text is centered within the table.

So to center the table you will need to wrap it in a container div and center it from there. Have a look at this link below.
hidden link

To remove the border you need to add the border attribute to your table and set it to 0

Example


<table border="0">

Please let me know if this helps.
Thanks,
Shane

#1223022

My issue is resolved now. Thank you!