TABLE PICTURES

One day I was making a quite large HTML table for a page. I decided to spice up the looks of the table by adding background colours to the table cells. I stared testing different colour combinations, and came up with a nice-looking colour pattern for the page. Later I started to think: "That was a quite nice way of including simple graphic patterns into a HTML page." I went on: "What would happen if the table cell sizes would shrink to very small, and the amount of cells would grow?" "And if you then could eliminate the table cell borders, so that each cell would be rendered directly next to its' neighbours?" My immediate conclusion: "The HTML table would look like a picture."

Inspired by this I wrote a simple Java class that takes as input a JPEG picture and outputs a HTML file that has a large HTML table. The cells in the table are one pixel wide and one pixel high, and have a unique background colour. Together all the cells in the table render the given JPEG picture.

These files can to my knowledge be properly viewed only with the Opera web browser (http://www.opera.com/). Other browsers hang or just do not handle the CSS properly. Internet Explorer 6 seems to render some files OK, and some just halfway. If you can not view these files, have a look at example-rendering-cafe.jpg for a hint of what the cafe.html file should look like.

Here follow some example table pictures. The original JPEG pictures were borrowed from the picture gallery at the City of Helsinki Tourist Office website http://www.hel.fi/tourism/html/english/kuvagalleria/.

overview.html ~3.0 MB (http://www.hel.fi/tourism/html/english/kuvagalleria/siluetti.jpg)
park.html ~3.8 MB (http://www.hel.fi/tourism/html/english/kuvagalleria/espa.jpg)
cafe.html ~3.1 MB (http://www.hel.fi/tourism/html/english/kuvagalleria/terassi.jpg)

night.zip ~2.4 MB, containing night.html (~27 MB) and night-small.html (~6.8 MB). The 'small' version has half the width and length of the original. The original JPEG file can be found under http://www.studio-on-the.net/photography/G1/, more specifically at http://www.studio-on-the.net/photography/G1/118-1862_CRW_1.html.

The large file size can cause a problem for some. When I have night.html loaded, the Task Manager in Windows 2000 shows that the Opera process has a memory usage of about 260 MB. (I have 1024 MB of RAM installed, so it does not bother me. :-D) The 'small' version should be of a suitable size that everyone can view.

Possible future improvements might be trying to push down the filesize by simplifying markup. Also, the COLSPAN and/or ROWSPAN attributes of the TD element might be used, in cases where there are adjecent cells that should have the same colour.

Comments, suggestions? Mail me at sebastian.von.knorring@hut.fi. Page updated 2001-11-23.