[Repost] Sudoku grids

Stewart Gordon

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

Sep 15 '05 #1

Subscribe Reply

9995

Nigel Greenwood

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

Nigel Greenwood

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

Harlan Messinger

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

Lasse Reichstein Nielsen

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/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

Sep 15 '05 #5

Stewart Gordon

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

Similar topics

2644

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 combinatorial explosion completely scuppers this type of program)... Basic idea:- Start with a grid initialised with: 123456789

Python

552

[Repost] Sudoku grids

by: Stewart Gordon | last post by:

HTML / CSS

4141

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 faster than the ASPN program. If anyone is interested I attached the code in http://agolb.blogspot.com/2006/01/sudoku-solver-in-python.html

Python

6347

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 0. but thats not i want to do. I want to recurse back until until it find a correct number. i will post the function which i need the help; ---coding----------------------------------------------------------

C / C++

11378

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 some time and still not able to get the solution out. so i hope you guys can help me out. of course i am not expecting a full solution, but i would greatly appreciate it if anyone can suggest to me what should i do. i am very new to this subject so...

C / C++

6398

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 muscle, right? :-) http://en.wikipedia.org/wiki/Sudoku Thus, the strategy is to test every legal "move" and to backtrack when stuck. A recursive function seemed appropriate. I'd like to hear

C / C++

8605

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, so making this took me hours and hours of time... // class SudokuBoard, will be called by class Sudoku import java.util.Scanner; import java.io.*; public class SudokuBoard { private int board = new int;

Java

1868

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 to the Sudoku howto posted on this website. The links are shown above. My question centers around the boolean variables declared in Part A, such as the following. boolean rows= new boolean; ...

Java

5973

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, by checking a few things. 1. There are enough numbers, no 'periods' which signify '0' or 'no input'. 2. That there are no duplicate numbers in any row, column, or 3x3 box. I have been thinking of ways to do this and I've come up with 2 things....

Java

9595

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9432

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10232

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10008

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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9873

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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

8891

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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7420

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

3578

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2822

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General