Ad:

HTML and CSS Discussion Thread
Marked Solved
Views: 7491

Jan 12th, 2009

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

Expand Post »

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.

html Syntax (Toggle Plain Text)
<!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>
<!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>

Attached Thumbnails

Click image for larger version

Name: TableExperiment.GIF
Views: 129
Size: 5.4 KB
ID: 8825

Last edited by VernonDozier; Jan 12th, 2009 at 3:45 pm.

VernonDozier

Featured Poster

Reputation Points: 2614

Solved Threads: 687

Posting Expert

Offline

5,372 posts
since Jan 2008

Permalink

Jan 12th, 2009

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

Click to Expand / Collapse Quote originally posted by VernonDozier ...

html Syntax (Toggle Plain Text)
<!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">
<!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">

Why XHTML and why transitional?

Quote ...

html Syntax (Toggle Plain Text)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Table Experiment</title>
<style type="text/css">
<!--
 
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Table Experiment</title> <style type="text/css"> <!--

The HTML comment hasn't been necessary since Netscape 4.

Quote ...

html Syntax (Toggle Plain Text)
body {
	background-color: #FFFFFF;
}
body { background-color: #FFFFFF; }

html Syntax (Toggle Plain Text)
table
{
  border-collapse: collapse;
}
table { border-collapse: collapse; }

cfajohnson

Reputation Points: 25

Solved Threads: 23

Junior Poster

Offline

193 posts
since Dec 2008

Permalink

Jan 12th, 2009

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

Click to Expand / Collapse Quote originally posted by cfajohnson ...

Why XHTML and why transitional?

The HTML comment hasn't been necessary since Netscape 4.

Dreamweaver 8 put all of that there. Is that bad?

Click to Expand / Collapse Quote originally posted by cfajohnson ...

html Syntax (Toggle Plain Text)
table
{
  border-collapse: collapse;
}
table { border-collapse: collapse; }

That did it. Thank you.

VernonDozier

Featured Poster

Reputation Points: 2614

Solved Threads: 687

Posting Expert

Offline

5,372 posts
since Jan 2008

Permalink

Jan 12th, 2009

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

Hi, its simple just add this by your table declaration: cellspacing="0",
so our table declaration will look like this:
<table width="600" height="600" border="0" cellspacing="0">

That should just about do it.

Sorry, didnt notice above post.

Last edited by ccube921; Jan 12th, 2009 at 10:02 pm.

ccube921

Reputation Points: 13

Solved Threads: 6

Junior Poster in Training

Offline

93 posts
since Oct 2008

Permalink

Jan 12th, 2009

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

Click to Expand / Collapse Quote originally posted by ccube921 ...

Hi, its simple just add this by your table declaration: cellspacing="0",
so our table declaration will look like this:
<table width="600" height="600" border="0" cellspacing="0">

That should just about do it.

Yep. That did the trick too. Thanks.

VernonDozier

Featured Poster

Reputation Points: 2614

Solved Threads: 687

Posting Expert

Offline

5,372 posts
since Jan 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: IIS FTP

Next Thread in HTML and CSS Forum Timeline: How do I create a cool navigation menu using Adobe Photoshop?

DaniWeb Message

Cancel Changes

User Name
Password