Using HTML Tables to Create Art

I bet that you thought that the only thing HTML (Hypertext Markup Language) was good for was creating web pages. With a little imagination, HTML can be put into service creating geometric art. I stumbled upon this revelation a number of years ago entirely by accident.

I was writing programs to automate some of the process of converting text documents into HTML documents. Some of these documents contained tables of data. Rather than having to repetitively key in hundreds of <tr> and <td> tags, I decided to create a program to do the work for me.

Unfortunately the initial version of the program was a failure but fortunately the initial version was a failure. While it failed at creating the table layout I expected, it did succeed at creating a rather cool looking table. Thus began my excursion into geometric HTML table art.

The key to using tables to create geometric art is in the nesting of the tables and their associated border and color attributes. Below are three examples of images created by varying the nesting, borders, and colors of HTML tables.

Image Example 1. Black and White HTML Table Art
Example 3 of HTML geometric art using tables

Image Example 2. Gray Scale HTML Table Art
Example 1 of HTML geometric art using tables

Image Example 3. Color Variations HTML Table Art
Example 2 of HTML geometric art using tables

Below is a "live" demonstration of a simple implementation of table art and consists of 82 table statements.

Table Example 1. Simple Nested HTML Table Art

°

I hope you found this excursion into HTML table art entertaining. If you are interested in space art (as in astronomical), you may want to check out my blog at http://artsnova.com/blog/.


Return to the HTML section index.