[Resolved] Help With Tables

[Pearl]

Hello!

I love your theme & all of the amazing options!
I am working on converting a current HTML site into a wordpress site using your theme.
I have been able to make table lines disapear by adding style=”border:1px solid #ffffff
to both table & td sections. However, I can not seem to make the most important tables on my site work in your theme – these are the buy boxes for our product. Could you PLEASE help me, as I have many pages to convert!

Here is a link to an example page: http://www.medicalbillinglive.com/chiropractic-billing-made-easy.shtml

The buy box is all the way at the bottom.

Here is the code. It will be the same for every page, I will just change the product info inside of the table.

<TABLE style=”BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: ” border=0 cellSpacing=0 cellPadding=0 width=650>
<TBODY>
<TR height=17>
<TD style=”BACKGROUND-IMAGE: url(http://www.medicalbillinglive.com/images/Edges_TopLeft.png); BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BACKGROUND-REPEAT: no-repeat; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: ” height=17 background=http://www.medicalbillinglive.com/images/Edges_TopLeft.png width=19></TD>
<TD style=”BACKGROUND-IMAGE: url(http://www.medicalbillinglive.com/images/Edges_MidTop.png); BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BACKGROUND-REPEAT: repeat-x; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: ” height=17 background=http://www.medicalbillinglive.com/images/Edges_MidTop.png></TD>
<TD style=”BACKGROUND-IMAGE: url(http://www.medicalbillinglive.com/images/Edges_TopRight.png); BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BACKGROUND-REPEAT: no-repeat; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: ” height=17 background=http://www.medicalbillinglive.com/images/Edges_TopRight.png width=19></TD></TR>
<TR>
<TD style=”BACKGROUND-IMAGE: url(http://www.medicalbillinglive.com/images/Edges_MidLeft.png); BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BACKGROUND-REPEAT: repeat; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: ” background=http://www.medicalbillinglive.com/images/Edges_MidLeft.png width=19></TD>
<TD style=”BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: “>
<TABLE style=”BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: ” border=0 cellSpacing=0 cellPadding=20 width=”100%” bgColor=white>
<TBODY>
<TR>
<TD style=”BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: “>
<H1 align=center>Get Instant Access Now!</H1>
<P align=left><INPUT name=C1 value=ON type=checkbox> <SPAN style=”FONT-FAMILY: Arial”><FONT color=#cc0000 size=+3>Yes!</FONT> <FONT face=Verdana>I want to order “Chiropractic Billing Made Easy“!</FONT></SPAN></P>
<P>I understand:</P>
<P> That I will be brought to the verified safe & secure checkout page, where I can purchase my ebook with a credit card, or by using PayPal.</P>
<P> That after I check out, I will be given <U>immediate</U> access to my new ebook!</P>
<P align=center><STRIKE><FONT size=5>Retail Price</FONT></STRIKE> <FONT color=#cc0000 size=5>Now Only $47</FONT><BR></P><BR>
<P align=center> </P>
<P align=center><!– (c) 2006. Authorize.Net is a registered trademark of Lightbridge, Inc. –><script type=”text/javascript”
language=”javascript”>
var ANS_customer_id=”2e76279d-516a-46be-b03d-cec1c1299835″;
</script> <script type=”text/javascript”
language=”javascript”
src=”//VERIFY.AUTHORIZE.NET/anetseal/seal.js”>
</script><BR><BR>To Order by Phone, Call Toll Free: 1-800-490-4299</P></TD></TR></TBODY></TABLE></TD>
<TD style=”BACKGROUND-IMAGE: url(http://www.medicalbillinglive.com/images/Edges_MidRight.png); BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BACKGROUND-REPEAT: repeat; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: ” background=http://www.medicalbillinglive.com/images/Edges_MidRight.png width=19></TD></TR>
<TR height=17>
<TD style=”BACKGROUND-IMAGE: url(http://www.medicalbillinglive.com/images/Edges_BottomLeft.png); BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BACKGROUND-REPEAT: no-repeat; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: ” height=17 background=http://www.medicalbillinglive.com/images/Edges_BottomLeft.png width=19></TD>
<TD style=”BACKGROUND-IMAGE: url(http://www.medicalbillinglive.com/images/Edges_MidBottom.png); BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BACKGROUND-REPEAT: repeat; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: ” height=17 background=http://www.medicalbillinglive.com/images/Edges_MidBottom.png></TD>
<TD style=”BACKGROUND-IMAGE: url(http://www.medicalbillinglive.com/images/Edges_BottomRight.png); BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BACKGROUND-REPEAT: no-repeat; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: ” height=17 background=http://www.medicalbillinglive.com/images/Edges_BottomRight.png width=19></TD></TR></TBODY></TABLE></CENTER></CENTER>

Also – I saw someone mention a sales letter for the theme, but I can’t seem to find that?

Thank you SO VERY MUCH!!

Pearl

[Tom]

Hi there,

You’ll want to try and move away from using tables. They’re meant for tabular data, and while they used to be used to build websites, it’s not best practice to do so.

Are you trying to mimic that buy box on your new site? If so, do you have a link to what you have so far?

[Pearl]

Yes – because I’m converting all of the website over to the wordpress platform, I am trying to add the buy box at the bottom of each product page. The code that I posted is the code from the working site. Here’s a page that I am currently working on from the wordpress platform. I copied & pasted the table code as is: http://medicalbillinglive.com/wordpress/chiropractic-billing-made-easy/

And again – here’s the original – http://www.medicalbillinglive.com/chiropractic-billing-made-easy.shtml

[Tom]

Ah, it’s close!

Try adding this CSS:

table, th, td {
    border: 0;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

[Pearl]

That helped a lot! I’ve been working on this all day trying to get this one table right, so I can simply copy & paste for the other pages.

I still have a spacing problem. I know it must be a css issue?

If you look at: http://medicalbillinglive.com/wordpress/chiropractic-billing-made-easy

I have things going pretty good, but whenever there’s a table, there’s a large space gap before & after. Especially look at the buy box at the bottom. Between the last line
“You can recover the cost of this book on one claim!” and the buy box is a large space gap that I can not get rid of no matter what I do????
Thank you!!!!

[Tom]

It just looks like you have a bunch of empty lines between that text and the table.

Go into the “Text” editor and delete the empty lines between the two elements 🙂

[Pearl]

But that’s the thing… there are no spaces whatsoever in the code?

Here is where the code meets the table:

<CENTER><FONT color=#214e79 face=Georgia size=6>You can recover the cost of this book on one claim!</FONT><TABLE style=”WIDTH:65%; BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: ” border=0 cellSpacing=0 cellPadding=0″>

[Pearl]

I think I figured it out (not sure the reasoning though).

I NEVER use the visual tab in wordpress – always the HTML. I decided to toggle between the two & see if I could get the space to disappear. I was able to get the space to disappear, even though I had to go through & rework all of the other tables due to scrambled code. I’m not sure what’s going on between the two tabs, but I’m glad I was finally able to find a work around.

Thank you again for all of your help!

[Tom]

Very weird, but glad you found a solution 🙂

[Deyana]

Hi,

Would you help me about the following problem:

If I use code

table, th, td {
    border: 0;
}

then all table borders are hidden, but I want some tables to have borders, other – to be without borders.

I tried to create class “custom table”:

.my-custom-table {
    border-width: 0px;	
  }

In this case, right and bottom borders of “my-custom-table” are not hidden.

If I use:

.my-custom-table, th, td {
    border-width: 0px;	
  }

then right and bottom borders of standard “table” are hidden 🙁

[Tom]

You could do this:

.hide-table-border, .hide-table-border th, .hide-table-border td {
    border-width: 0px;	
}

Then add that class to the tables where you don’t want a border:

<table class="hide-table-border">

</table>

• This reply was modified 10 years, 1 month ago by Tom.

[Deyana]

Thanks, but the result is the same: right and bottom borders of the table with class “hide-table border” are visible.

[Tom]

Can you link me to a page where it’s happening?

[Deyana]

This is a post, where i try tables:

http://zbut.eu/news/tables/

[Tom]

Sorry about that, can you try the updated CSS?: https://generatepress.com/forums/topic/help-with-tables/#post-177625

[Author]

Posts