PDA

View Full Version : Table Gap Between Cells


arrr_matey
04-17-2006, 12:41 AM
Hi all...

I could really use some advice on a problem I'm having putting a site together. This seems like it shouldn't be difficult, so maybe I'm just overlooking something really simple?

I want to make a table with two cells, each with a different background colour. But the table always has a small gap between the two cells. I want the two colours to touch each other with no gap. How can I do this?

Below is a link to a visual example of my problem with a simple table with two colours and a white gap between them.

Thanks *very* much for any help.

http://www3.telus.net/public/chrislav/table.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<table width="100%" >
<tr>
<td bgcolor="#660000">

</p>


</p>


</p></td>

<td bgcolor="#99CCcc"></td>
</tr>
</table>
</body>
</html>

MissChankley
04-17-2006, 04:52 AM
:)

Hi:

I am a fairly new developer myself, but I know what you're missing. Tables automatically default to cellspacing of 2 (cellpadding of 2 also). The reason your cells have a space between them is the cellspacing value. Just go into your table tag and specify cellspacing=0.

arrr_matey
04-17-2006, 06:30 AM
Awesome! Thanks a million. That totally works.

Cheers

domedia
04-17-2006, 02:39 PM
a CSS version (valid and not deprecated) will work great as well:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Inert Your Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
<!--
table#ProductsTable, table#ProductsTable td {
margin: 0;
padding: 0;
border: 0;
width: 100%;
border-collapse: collapse;
}
td#ProductsPrice {background-color: #600;}
td#ProductsColor {background-color: #9cc;}
-->
</style>
</head>
<body>
<table id="ProductsTable">
<tr>
<td id="ProductsPrice">


</p>


</p>


</p>
</td>
<td id="ProductsColor">

</td>
</tr>
</table>
</body>
</html>

You'll see that the markup is cleaner than the normal HTML way of doing it, and I've seperated all the style information to the CSS.