473,473 Members | 1,819 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

[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 9951

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
Create Post

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

Similar topics
5
sudoku dictionary attack
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...
Latest Bytes
5
[Repost] Sudoku grids
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...
Latest Bytes
11
Sudoku solver: reduction + brute force
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...
Latest Bytes
12
sudoku coding help
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...
Latest Bytes
21
Sudoku correctness checking
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...
Latest Bytes
38
Yet another brute force sudoku solver
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...
Latest Bytes
3
help!! Solving Sudoku via recursion and backtracking
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,...
Latest Bytes
1
Question on the sudoku solution on this website
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...
Latest Bytes
3
Sudoku Verification, Turning Pseudo-Code into real code!
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,...
Latest Bytes
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Latest Bytes
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
Latest Bytes
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Latest Bytes
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
Latest Bytes
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Latest Bytes
1
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Latest Bytes
0
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
Latest Bytes
0
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Latest Bytes
0
Couldn’t get equations in html when convert word .docx file to html file in C#.
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
Latest Bytes

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.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us