473,322 Members | 1,504 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

[Repost] Sudoku grids

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">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">8</td>
<td align="center">3</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
</tr>
<tr>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">9</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">6</td>
<td align="center">&nbsp;</td>
<td align="center">4</td>
</tr>
<tr>
<td align="center">&nbsp;</td>
<td align="center">5</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">1</td>
<td align="center">&nbsp;</td>
</tr>
</tbody>
<tbody>
<tr>
<td align="center">3</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">1</td>
<td align="center">&nbsp;</td>
<td align="center">2</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">7</td>
</tr>
<tr>

<td align="center">7</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">5</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">4</td>
<td align="center">&nbsp;</td>
<td align="center">3</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">1</td>
</tr>
</tbody>
<tbody>
<tr>
<td align="center">&nbsp;</td>
<td align="center">6</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">5</td>
<td align="center">&nbsp;</td>
</tr>
<tr>
<td align="center">5</td>
<td align="center">&nbsp;</td>
<td align="center">1</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">9</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
</tr>
<tr>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">4</td>
<td align="center">8</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</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.
Sep 15 '05 #1
5 9935

Stewart Gordon wrote:
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.


See my suggested boilerplate at

http://tinyurl.com/b8qh8

Nigel

Sep 15 '05 #2

Stewart Gordon wrote:
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.


I may not have understood exactly what the problem is: please forgive
me if what follows isn't relevant!

If you want to emphasize the 3x3 sub-blocks, the simplest approach
might be to start with a 3x3 super-table, each cell of which then
contains a further 3x3 sub-table. You can then play around with the
borders & styles of the different tables to get the effect you want.
The HTML may look messy, but it's very quick to create by copying &
pasting.

If this isn't clear I can post a simple example on my website.

Nigel

--
ScriptMaster language resources (Chinese/Modern & Classical
Greek/IPA/Persian/Russian/Turkish):
http://www.elgin.free-online.co.uk

Sep 15 '05 #3
Stewart Gordon wrote:
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.


There is. Use CSS *only* (no empty rows or columns), apply borders to
all cells, with a distinctive style applied to the right borders of the
third and sixth cell in each row and to the bottom borders of the third
and sixth row in the table.
Sep 15 '05 #4
Harlan Messinger <hm*******************@comcast.net> writes:
There is. Use CSS *only* (no empty rows or columns), apply borders to
all cells, with a distinctive style applied to the right borders of
the third and sixth cell in each row and to the bottom borders of the
third and sixth row in the table.


For standard compliant browsers (i.e., not IE), you can make the borders
more generally using borders on tbody and colgroup elements. E.g.,
something like this for a 2x2 grid:
---style---
table.sudoku {
border-collapse: collapse;
empty-cells: show;
font-size: 4em;
}
table.sudoku colgroup, table.sudoku tbody {
border: 3px solid black;
}
table.sudoku td {
border: 1px solid black;
width:1em;
height:1em;
text-align:center;
}
---end style---

---html---
<table class="sudoku">
<colgroup><col><col></colgroup> <colgroup><col><col></colgroup>
<tbody>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</tbody>
<tbody>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
---end html---

But that's what I do for my own pages, with my self as the only
audience. For the internet, something that works in IE would
probably be required :(

/l
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Sep 15 '05 #5
Nigel Greenwood wrote:
<snip>
If you want to emphasize the 3x3 sub-blocks, the simplest approach
might be to start with a 3x3 super-table, each cell of which then
contains a further 3x3 sub-table. You can then play around with the
borders & styles of the different tables to get the effect you want.
The HTML may look messy, but it's very quick to create by copying &
pasting.

<snip>

I thought a bit about that. The question is: how easy or not is it to
get the rows and columns to line up properly across sub-tables? I
suppose specifying the heights and widths will work up to a point (that
of someone using a CSS-disabled browser trying to increase the font
size)....

That said, I've just discovered

http://www.printsudoku.com/

which seems to do a half-decent job of it. Maybe this could help me....

Stewart.

--
-----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.
Sep 16 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: sub1ime_uk | last post by:
Thought I'd offer a method for solving all possible 9x9 sudoku puzzles in one go. It'll takes a bit of time to run however (and 9x9 seems to be about as big as is reasonably possible before...
5
by: Stewart Gordon | last post by:
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...
11
by: ago | last post by:
Inspired by some recent readings on LinuxJournal and an ASPN recipe, I decided to revamp my old python hack... The new code is a combination of (2) reduction methods and brute force and it is quite...
12
by: kalinga1234 | last post by:
hy guys i am having a problem with my sudoku program which i coded using c++.; currently in my program if a duplicate number exist in either row/column/block i would make the particualr square...
21
by: ningxin | last post by:
Hi, i am currently taking a module in c++ in the university, and was given an assignment. because i have no prior background on the subject, everything is kind of new to me. i have tried for quite...
38
by: Boon | last post by:
Hello group, I've been toying with a simple sudoku solver. I meant for the code to be short and easy to understand. I figured "brute force is simple" -- who needs finesse, when you've got...
3
by: deanchhsw | last post by:
Hello, I'm trying to build a program that solves sudokus and prints out the result on the screen. Here's the code for the class SudokuBoard. this will later be called in a class Sudoku. I'm a newbie,...
1
by: deanchhsw | last post by:
Part A (http://bytes.com/topic/java/insights/645821-sudoku) B (http://bytes.com/topic/java/insights/739704-sudoku-b) C (http://bytes.com/topic/java/insights/739703-sudoku-c) this question refers...
3
by: DannyB13 | last post by:
Hi, and thanks for possible help in advance. Here's my dilemma. I've been making a sudoku generator, and I'm now stuck on one part. I must be able to take a 'solution' and verify that it is correct,...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.