Rebeckah's Treasures Posted October 28, 2014 Share Posted October 28, 2014 I wonder if anyone here can help me... I am having troubles with the table code. It is messing with other elements on my page. Does anyone know how I can fix it so that it only adds a border to the sections I want to have borders and not to everywhere on the page? Every time I add html code bits to my page to create these: It makes the Header look like this: When it is supposed to look like this: *I use weebly as my website building platform, so the elements in the first picture above was created with the custom element tool. Each product block is a single cell table, and this is the code I am using for each product block (apart from a few URLs and Text, etc... each one is the same): <!DOCTYPE html> <html> <head> <style> table, th, td { border: 2px solid #DCDCDC; padding: 1px; } table { border-spacing: 1px; } th, td { padding: 5px; } a { text-decoration: none; } p.small { line-height: 60%; } </style> </head> <body> <table style="width:100%"> <tr> <td><div align="center"> <a href="http://www.rebeckahstreasures.com/happily-ever-after-crochet-pattern-for-fashion-dolls.html"><img src="http://www.weebly.com/uploads/1/4/3/9/14399682/1012548_orig.jpg" alt=”Happily Ever After Fashion Doll Crochet Pattern PDF $10.00 by Rebeckah’s Treasures - You can be a designer too when you mix and match necklines & silhouettes! Grab your copy today here: http://goo.gl/5bXO46 #crochet #pattern #barbie #toys” border="0" width="100%" style="margin:3px 0px"/><h4 style="margin:0px 0px">"Happily Ever After"</h4><h5 style="margin:0px 0px">Crochet Pattern</h5></a> <p class="small" style="margin:0px 0px"><em> $10.00 USD</em></p> <a href="#" onclick="R.cart.add(36645, 220124); return false;"><img src="http://www.weebly.com/uploads/1/4/3/9/14399682/_8947683_orig.png" border="0" width="120"style="margin:0px 0px"/></a></div></td> </tr> </table> </body> </html> Thanks in advance! Link to comment Share on other sites More sharing options...
dsonesuk Posted October 28, 2014 Share Posted October 28, 2014 Thistable, th, td { border: 2px solid #DCDCDC; padding: 1px;}table { border-spacing: 1px;}th, td { padding: 5px;}Will target ALL tables, table headers, and cells, you need to separate new styling of table from others, by using class.<table class="tablestyle01" style="width:100%">Then you would usetable.tablestyle01, .tablestyle01 th, .tablestyle01 td { border: 2px solid #DCDCDC; padding: 1px;}table.tablestyle01 { border-spacing: 1px;} 1 Link to comment Share on other sites More sharing options...
Rebeckah's Treasures Posted October 28, 2014 Author Share Posted October 28, 2014 Oh my gosh... Thank you so much dsonesuk!!! It worked. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now