Table Graphics

There are two "legitimate" uses of tables: dispalying tabular data, and for simple page layout. Other uses of tables are not recommended when it comes to composing easy-to-use pages and sites.

Legitimate Uses

Tabular Data

A good deal of information can be expressed in tables. For example, one column could be a student's name, the other columns could be assignments, and each row could represent a student and his/her grades. Data from spreadsheets and many databases fit nicely into tables.

Page Layout

Because HTML is not an optimal page-layout or page-description language, many authors resort to using tables to organize page content. Table columns can lend a page a newspaper look, content in a narrow table can be used to provide wider margins, and narrow left- or right-aligned columns can be used to house site-menus. They can also be used to achieve spacing and alignments that aren't available with normal paragraphs and lists.

Graphics

Graphics shown on a computer screen are an array of pixels. One could imagine a matrix that is m x n in size, with m rows and n columns. Each pixel has its own color. Similarly, one can use tables in HTML to create crude graphics. I say "crude" because each table cell is many pixels high and wide, and so such graphics made with tables will not be as "refined" as regular computer graphics.

Technique

It is perhaps easiest, if one is trying to represent a drawing in a table, to first plan the table on graph paper. When putting the table together, avoid using colspan and similar attributes; let each table cell be "one pixel" in the picture. Set cellpadding=0 and cellspacing=0 so that the pixels are as small as possible and that there is no empty space between the pixels. Set border=0 for the table so there is no border between the cells. You can give each table cell its own color by setting bgcolor=<color> in the table cell, where <color> is either a color such as red, blue, cyan, or black; or a numerical color code such as #000000 (black), #ffffff (white), #ff0000 (red), or #0000ff (blue). In each table cell we place a non-breaking-space --   -- so that the table cell is not recorded as "empty" (and not represented). Within limits we can use height=xx and width=yy attributes to resize table cells.

Examples

Shades of Grey: This table was my first attempt at a "table graphic." It is a 10x10 table; all the colors are shades of grey, as well as black and white. The gradient provides a textured feel.

House and Tree: This is a 20x20 table representing a house, tree, cloud, and sun, with a green lawn and blue sky. This one demonstrates the limits of table-graphics, in particular the limits of low-resolution.

0-15: In this set of tables, each 2x2 table represents a binary number from 0-15. With a slight modification, we place small graphics (5 pixels by 5 pixels) in each table cell, thus making each cell smaller (the size of the graphic, rather than the size of a character. Spaces were added between tables, and between table cells in these examples.

Advanced

Small programs have been written that will transform a given graphic (such as a GIF file) into an HTML table. One example is Gif2html, described as "a complete, but neat, waste of time."

In addition, instead of coding tables by hand, it is possible to use a scripting language, such as PHP, to create dymanic tables. Examples of such a use are beyond this tutorial.

Contents	Chapter 4	Previous	Next