Decorating with HTML Tables

Simple scrollwork around contents

HTML tables can be used as a primitive (and clumsy) drawing mechanism. There are a few simple applications. The main advantage is that separate image files are not necessary.

A nice texture may be obtained by setting the background-image property.

			simple scrollwork around contents

Mozilla FireFox, Opera 7+, Konqueror 3.1+, Amaya 8.8, and Chrome all show very nice scrollwork.

Unfortunately, NS 4.x doesn’t draw table cell backgrounds if the cell is empty. To get the scrollwork to display in NS 4.x, you have to put &nbps; entities in the cells, which greatly reduces your flexibility in setting the width of the line.

None of links, lynx, dillo and brx show any sign of decoration whatever, which is good.

IE 6 Windows, 5.2.1. Mac: perfect.

In the above example, I’ve put an inner table with a border around the contents, just so the contents would be circumscribed in lower-powered browsers.

Scrollwork around contents with border

A nice 3D effect can be achieved using the cell border property.

			simple scrollwork around contents

Konqueror does well.

Opera 9 is perfect.

Mozilla FireFox 1.5: perfect

IE 5.2.1. Mac: does odd and wrong thing with border: puts extra space between cell and border with ugly results.

IE 6 Windows: Very curious effect (not really bad-looking) has the horizontal borders thin while the vertical ones are thick, and somehow, there is a pixillated round area within the scrolls…weird.

IE 7 beta: works well

Thick borders are out. The lines don’t connect properly in the best cases.