[SOLVED] Sudoku Grid

gazever · March 1, 2007

Hi I'm trying to create a sudoku grid in css using nested tables, however I'm getting gaps between the cells and cannot seem to get rid of them, any suggestions, on gapless nested tables.

Hope that made sense.

Gaz

ToonMariner · March 1, 2007

set the margin on the cells to 0.

why nested tables?? this is a case where one table will do...

gazever · March 1, 2007

I am nesting them so that I can have the borders thicker for each internal 3x3 grid within the 9x9 grid, any other suggestions how to do this?

obsidian · March 1, 2007

Let me make a suggestion... this sounds to me like a good use for using divs in a creative way. The content is definitely tabular, but I would probably handle the layout with divs instead of tables anyway, just to give the extra edge of creativity to it. Here's an idea of what I've come up with:

<?php
$grid = array();
for ($i = 0; $i < 9; $i++) {
$grid[$i] = array();
for ($j = 0; $j < 9; $j++) {
	$grid[$i][$j] = rand(0, 9);
}
}
?>
<!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>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="styles.css" />
<style type="text/css">
#sudokuBoard {
border: 1px solid #454545;
height: 174px;
width: 174px;
}

#sudokuBoard .cell {
float: left;
border-top: 1px solid #454545;
border-left: 1px solid #454545;
height: 18px;
width: 18px;
}

#sudokuBoard .floor {
border-bottom: 1px solid #454545;
}

#sudokuBoard .wall {
border-right: 1px solid #454545;
}
</style>
</head>

<body>
<div id="sudokuBoard">
<?php
foreach ($grid as $y => $row) {
foreach ($row as $x => $cell) {
	$class = "cell";
	if (($y + 1) % 3 == 0) $class .= " floor";
	if (($x + 1) % 3 == 0) $class .= " wall";
	echo "<div class=\"$class\"></div>\n";
}
}
?>
</div>
</body>
</html>

This contains the CSS and PHP required to generate the markup. It works in both FF and IE for sure.

gazever · March 1, 2007

Obsidian,

Thanks I love it, this is exactly what I need, I already have the php script to run through my array and make it into a table, but I would rather have divs any day and control it all by css, just been to lunch at work, and was considering using this option anyway, however not too clever with php yet, now just got to work out how to translate your script into my script.

Thanks

Gazever,

I'll post the link when its all running.

obsidian · March 1, 2007

Thanks I love it, this is exactly what I need... I'll post the link when its all running.

Excellent. I look forward to seeing your finished product.

gazever · March 1, 2007

???

Please help with this, don't really understand the 2d array, basically what i had before was this code to open my array which is in a txt file,

<?php
function makepuzzle($file)
{
//set initial variables -----
$majorcounter = 1;
$rowounter = 1;
$col = 1;
$row = 1;
// load data, make it an array -----------------
$myFile = $file;
$fh = fopen($myFile, 'r');
$data = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
$array = explode(',', $data);
array_unshift($array, "notneeded");
//print_r($array);
echo $file;

// use this array to draw the table ---------

echo '<div class="sudoku">
<table border="1">
<tr><TH COLSPAN="9">'; 
echo 'This is the puzzle';
echo '</TH></tr>
<tr>
';

// loop through all the numbers in the grid to draw them in the table
for ($i = 1; $i <=81; $i+=1) :

// check if the array is empty if so replace it with a space character
if ($array[$i] == "") {
$array[$i] = " ";
}
// check to see if its the end of a table row, if so close it then start a new one
if ($i == 9 || $i == 18 || $i == 27 || $i == 36 || $i == 45 || $i == 54 || $i == 63 || $i == 72) {
echo '<td>'.$array[$i].'</td></tr>
<tr>';
	}
// else draw the usual <td> cell if its within a table row			
	else {
echo '<td>'.$array[$i].'</td>';
		}
endfor;

// draw the end of the table and close the div
echo '</tr>
</table>
</div>';
}
?>

and the file looks like this

7,,4,8,,9,6,5,,1,,,,,6,3,4,7,,6,5,4,,3,,,,3,4,,2,9,8,,,,,,,7,6,5,,,,,,,1,3,4,,2,9,,,,6,,2,7,3,,8,2,6,3,,,,,4,,7,3,9,,1,2,,8

How do I get my array into the 2d type array you have, and what do I put in the <div>here bit</div>.

Thanks

gazever · March 1, 2007

Excellent. I look forward to seeing your finished product.

Sorry need a little more help first

gazever · March 1, 2007

Ignore the

$majorcounter = 1;
$rowounter = 1;
$col = 1;
$row = 1;

they were for the previous version.

obsidian · March 1, 2007

OK, here's how you can very easily load the numbers in your file into the array I'm using for my layout. Keep in mind that I'm going from left to right, top to bottom.

<?php
$string = "7,,4,8,,9,6,5,,1,,,,,6,3,4,7,,6,5,4,,3,,,,3,4,,2,9,8,,,,,,,7,6,5,,,,,,,1,3,4,,2,9,,,,6,,2,7,3,,8,2,6,3,,,,,4,,7,3,9,,1,2,,8";
$array = explode(',', $string);

$x = 0;
$grid = array();
for ($i = 0; $i < 9; $i++) {
$grid[$i] = array();
for ($j = 0; $j < 9; $j++) {
	$grid[$i][$j] = $array[$x++];
}
}

// Then, when you display it, you need to access the "$cell" variable:
foreach ($grid as $y => $row) {
foreach ($row as $x => $cell) {
	$class = "cell";
	if (($y + 1) % 3 == 0) $class .= " floor";
	if (($x + 1) % 3 == 0) $class .= " wall";
	echo "<div class=\"$class\">$cell</div>\n"; // Right here
}
}
?>

Make sense?

gazever · March 1, 2007

Kind of makes sense, Think I'm just a bit thick though.

Nevertheless works an absolute treat,

Thanks a bunch.

Gazever

gazever · March 5, 2007

Another problem,

Obsidian, I used the code and worked great, however resized it slightly larger, still looked fine, then opened up safari (main browser is firefox), gap round the outside container div, so just removed the border around this, still looked ok, however showed my g/f that night on her IE6 machine (promptly downloaded FF for her), and even more problems, when printed (these would need to be 100%reliable printed) lots of the cells reflowed. would it be more stable to develop this in a table, as I plan on HTML emailing these, so I guess this has even worse CSS capabilities than the major browsers, would using tables be more reliable?

Thanks

Gaz

obsidian · March 6, 2007

Gaz, with the additional information you've provided, you may be better off using tables (especially for the emailing). I prefer to set it up with divs and CSS for screen display, but for printing and the variety of email clients that have their own rendering engine, you really may want to switch back to the tables for this. I'd say try something like this for the tables (Tested and printed in FF and IE6):

<?php
$string = "7,,4,8,,9,6,5,,1,,,,,6,3,4,7,,6,5,4,,3,,,,3,4,,2,9,8,,,,,,,7,6,5,,,,,,,1,3,4,,2,9,,,,6,,2,7,3,,8,2,6,3,,,,,4,,7,3,9,,1,2,,8";
$array = explode(',', $string);

$x = 0;
$grid = array();
for ($i = 0; $i < 9; $i++) {
$grid[$i] = array();
for ($j = 0; $j < 9; $j++) {
	$grid[$i][$j] = $array[$x++];
}
}
?>
<!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>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="styles.css" />
<style type="text/css">
#sudokuBoard {
border: 1px solid #454545;
}

#sudokuBoard .cell {
float: left;
border-top: 1px solid #454545;
border-left: 1px solid #454545;
line-height: 1.3em;
text-align: center;
vertical-align: middle;
width: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

#sudokuBoard .floor td {
border-bottom: 1px solid #454545;
}

#sudokuBoard .wall {
border-right: 1px solid #454545;
}
</style>
</head>

<body>
<table id="sudokuBoard" border="0" cellpadding="0" cellspacing="0">
<?php
$a = -1;
echo ($a > 1);
foreach ($grid as $y => $row) {
echo "<tr";
if (($y + 1) % 3 == 0) echo " class=\"floor\"";
echo ">";
foreach ($row as $x => $cell) {
	$class = "cell";
	if (($x + 1) % 3 == 0) $class .= " wall";
	echo "<td class=\"$class\">";
	echo empty($cell) ? ' ' : $cell;
	echo "</td>\n";
}
echo "</tr>\n";
}
?>
</table>
</body>
</html>

I found the issue with display in IE6: IE likes to not display an element if there is nothing contained within it. So, that's why there is the little empty() check now that inserts a non breaking space into those cells with no numbers. This will require IE to display those cells as well.

Hope this helps.

gazever · March 6, 2007

Obsidian,

Thanks, thats exactly what I need, I'll incorporate that into my scripts later and test, but cant see this not working,

Thank You so much for your help.

PM me your paypal or moneybookers email address, so i can show you a little appreciation!

Sign In

[SOLVED] Sudoku Grid

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information