Jump to content
Rebeckah's Treasures

Help! Table Code is Adding Borders to other elements on my page...

Recommended Posts

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:

1431210_orig.jpg

 

It makes the Header look like this:

2820666_orig.jpg

 

When it is supposed to look like this:

5052881_orig.jpg

 

 

*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!

 

Share this post


Link to post
Share on other sites

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;}

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...