HTML and CSS

RSS

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

Please support our HTML and CSS advertiser: Programming Forums

Thread Solved

•

Posts: 2,896

Reputation: VernonDozier has much to be proud of

Solved Threads: 366

VernonDozier VernonDozier is offline

Offline

Posting Maven

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

Jan 12th, 2009

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.

 Help with Code Tags 
 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>

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

Attached Images

TableExperiment.GIF (5.4 KB, 4 views)

•

Posts: 39

Reputation: cfajohnson is an unknown quantity at this point

Solved Threads: 10

cfajohnson cfajohnson is offline

Offline

Light Poster

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

Jan 12th, 2009

•

Originally Posted by VernonDozier

Help with Code Tags

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?

•

Help with Code Tags

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.

•

Help with Code Tags

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

Help with Code Tags

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

•

Posts: 2,896

Reputation: VernonDozier has much to be proud of

Solved Threads: 366

VernonDozier VernonDozier is offline

Offline

Posting Maven

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

Jan 12th, 2009

•

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?

•

Originally Posted by cfajohnson

Help with Code Tags

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

That did it. Thank you.

•

Posts: 75

Reputation: ccube921 is an unknown quantity at this point

Solved Threads: 6

ccube921

Offline

Junior Poster in Training

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

Jan 12th, 2009

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 9:02 pm.

If I have been helpful add to my reputation!

•

Posts: 2,896

Reputation: VernonDozier has much to be proud of

Solved Threads: 366

VernonDozier VernonDozier is offline

Offline

Posting Maven

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

Jan 12th, 2009

•

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.

Thread Tools Display Modes

Quick Reply to Thread

•

Only community members can participate in forum threads. You must register or log in to contribute.

Other Threads in the HTML and CSS Forum

Previous Thread: IIS FTP
Next Thread: How do I create a cool navigation menu using Adobe Photoshop?

•

Views: 1274 | Replies: 4 | Currently Viewing: 1 (0 members and 1 guests)

•

Thread Tools	Display Modes
Show Printable Version Email this Page	Linear Mode Switch to Hybrid Mode Switch to Threaded Mode