Member Avatar for VernonDozier

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>
TableExperiment.GIF 5.42 KB
  • 3 Contributors
  • 4 Replies
  • 391 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by VernonDozier

Dani AI

Generated

A short, practical addendum to the thread (builds on and ):

Both answers in the thread hit the common fixes for table hairlines: collapse/remove the default cell spacing. Two further explanations and practical alternatives help when a simple fix still leaves “thin white lines.”

First, the most common remaining cause is fractional-pixel rounding. With a fixed table width that isn’t evenly divisible by the column count (600px / 21 ≈ 28.57px), browsers must split subpixels and that can show as hairlines between cells. Fixes that avoid rounding are: pick a container width divisible by the number of columns (for example 630px → 30px per cell) or give each cell an explicit integer pixel size.

Second, for tighter control and easier styling, consider using CSS Grid (or canvas for game rendering) instead of a table. Grid guarantees zero gap when configured with exact cell sizes and gap: 0, and it’s simpler to script and style cell backgrounds. Minimal example:

.maze {
  display: grid;
  grid-template-columns: repeat(21, 30px);
  grid-auto-rows: 30px;
  gap: 0;
}
.maze-cell { width: 30px; height: 30px; /* set background-color per cell */ }

Other practical notes: avoid deprecated bgcolor attributes in favor of CSS classes; set cell padding and borders to zero if needed; test at different zoom levels (hairlines often appear only at non-100% zoom). For a 21×21 game, a canvas-based approach gives pixel-perfect control and usually better performance than 441 DOM elements.

Recommended Answers

All 4 Replies

Member Avatar for cfajohnson 
<!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?

<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.

body {
	background-color: #FFFFFF;
}
table
{
  border-collapse: collapse;
}
Member Avatar for VernonDozier


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?

table
{
  border-collapse: collapse;
}

That did it. Thank you.

Member Avatar for 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.

Sorry, didnt notice above post.

Member Avatar for VernonDozier

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.