954,153 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Table cells have small gap between them that I want to get rid of

Hi, I'm creating a maze game. The layout is basically a big 21 x 21 square, with 441 (21 times 21) smaller squares inside of it. Each square will be a different color, representing a wall, a character, a passage, etc., so I figured I'd make a 21 x 21 table. However, when I do so, there is a small gap between each cell where the white background shows through. I'd like all the cells to jut against each other with no gaps so that the white background cannot be seen between cells. Is this possible and if so, how? I took a screenshot (attached), which shows the thin white lines between cells that I would like to get rid of, and my code is below (simple 3 x 3 table with different colors for adjacent cells). It's hard to see with the small version, but if you make it full-size, you see the thin white lines I am trying to remove more easily. Thank you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Table Experiment</title>
<style type="text/css">
<!--
body {
	background-color: #FFFFFF;
}
-->
</style></head>

<body>
<table width="600" height="600" border="0">
  <tr>
    <td bgcolor="#0000FF">&nbsp;</td>
    <td bgcolor="#FF0000">&nbsp;</td>
    <td bgcolor="#00FF00">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#FF0000">&nbsp;</td>
    <td bgcolor="#00FF00">&nbsp;</td>
    <td bgcolor="#0000FF">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#00FF00">&nbsp;</td>
    <td bgcolor="#0000FF">&nbsp;</td>
    <td bgcolor="#FF0000">&nbsp;</td>
  </tr>
</table>

<p>&nbsp;</p>

</body>
</html>
Attachments TableExperiment.GIF 5.42KB
VernonDozier
Posting Expert
5,527 posts since Jan 2008
Reputation Points: 2,633
Solved Threads: 711
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

[indent]
Why XHTML and why transitional?
[/indent]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Table Experiment</title>
<style type="text/css">
<!--
[indent]
The HTML comment hasn't been necessary since Netscape 4.
[/indent]
body {
background-color: #FFFFFF;
}
[indent]

table
{
  border-collapse: collapse;
}


[/indent]

cfajohnson
Junior Poster
196 posts since Dec 2008
Reputation Points: 25
Solved Threads: 23
 
[indent] Why XHTML and why transitional? [/indent][indent] The HTML comment hasn't been necessary since Netscape 4. [/indent]

Dreamweaver 8 put all of that there. Is that bad?[indent]

table
{
  border-collapse: collapse;
}


[/indent]

That did it. Thank you.

VernonDozier
Posting Expert
5,527 posts since Jan 2008
Reputation Points: 2,633
Solved Threads: 711
 

Hi, its simple just add this by your table declaration: cellspacing="0",
so our table declaration will look like this:

That should just about do it.

Sorry, didnt notice above post.

ccube921
Junior Poster in Training
93 posts since Oct 2008
Reputation Points: 13
Solved Threads: 6
 

Hi, its simple just add this by your table declaration: cellspacing="0", so our table declaration will look like this:

That should just about do it.

Yep. That did the trick too. Thanks.

VernonDozier
Posting Expert
5,527 posts since Jan 2008
Reputation Points: 2,633
Solved Threads: 711
 

This question has already been solved

Post: Markdown Syntax: Formatting Help
You