I have a few Sudoku puzzles on my site.
http://www.stewartsplace.org.uk/mindbenders/
But adding extra columns and rows to separate the 3x3 blocks seems a
rather kludgy approach, and the result isn't aesthetically the best either.
There ought to be a way of making the grids look nicer. I've played
about a bit with rowgroups and colgroups before discovering that
rowgroup is called tbody.
The code below is the nearest to a decent look I've got so far (input
fields removed for simplicity of illustration). However, it seems that
browser support isn't at its best:
- SeaMonkey (fka Mozilla) build 2005090109 shows it as intended, once I
finally got it right.
- IE 5.2 seems to understand it, but its rendering doesn't look right.
- Safari 1.3.1 shows slightly wider gaps between the tbodies, but
otherwise doesn't seem to support tbody/colgroup formatting.
And that's before you count browsers in which CSS has been disabled, IWC
the user won't see the division into 3x3 blocks at all. Moreover, what
about plain text browsers such as Lynx?
Suggestions?
Stewart.
----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html40/loose.dtd">
<html><head><title>Sudoku test</title>
<style type="text/css">
tbody, colgroup {
border: 2px solid blue;
}
td {
border: 1px solid blue;
}
</style>
</head>
<body>
<table align="center" rules="groups">
<colgroup span="3">
<colgroup span="3">
<colgroup span="3">
<tbody>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">8</td>
<td align="center">3</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">9</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">6</td>
<td align="center"> </td>
<td align="center">4</td>
</tr>
<tr>
<td align="center"> </td>
<td align="center">5</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">1</td>
<td align="center"> </td>
</tr>
</tbody>
<tbody>
<tr>
<td align="center">3</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">1</td>
<td align="center"> </td>
<td align="center">2</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">7</td>
</tr>
<tr>
<td align="center">7</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">5</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">4</td>
<td align="center"> </td>
<td align="center">3</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">1</td>
</tr>
</tbody>
<tbody>
<tr>
<td align="center"> </td>
<td align="center">6</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">5</td>
<td align="center"> </td>
</tr>
<tr>
<td align="center">5</td>
<td align="center"> </td>
<td align="center">1</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">9</td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">4</td>
<td align="center">8</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
</tbody>
</table>
</body></html>
--
-----BEGIN GEEK CODE BLOCK-----
Version: 3.1
GCS/M d- s:- C++@ a->--- UB@ P+ L E@ W++@ N+++ o K-@ w++@ O? M V? PS-
PE- Y? PGP- t- 5? X? R b DI? D G e++>++++ h-- r-- !y
------END GEEK CODE BLOCK------
My e-mail is valid but not my primary mailbox. Please keep replies on
the 'group where everyone may benefit.