Web development, Browser-Generated Graphics Using Tables

Browser-generated graphics have been around since the dawn of Web design. Web design that included horizontal rules (<HR>), table borders, and the <BLINK> tag -- were quickly scorned long before most Web designers had a chance to develop visually appealing ways of using them.

Web design had not achieved much interest before the likes of Shockwave, Java, and JavaScript Fortunately, amidst the call for more bandwidth-friendly design, Web designers are starting to overcome early Web taboos to explore the possibilities of browser-generated graphics.

Creating graphics with tables

One of the more robust features of HTML is the ability to create browser-generated graphics using tables. DHTML's Cascading Style Sheets and Layers holds more promise, but require a 4.0 browser to be viewed. However, we will focus on HTML and leave DHTML for later.

Special note: the cells that contain ASCII characters do not need to have a non-breaking space in them since the ASCII characters keep the cell from collapsing. This reason being: ASCII characters are more easily positioned with the cells as they are.

Here is a sample of simple bitmap graphic. A transparent single pixel image (an image that should be no larger than 43 bytes). Example 1 shows a sample of a simple, oblong, checkerboard-patterned line.

Example 1:

Click here to see the example on a separate page so you can easily view the HTML source.

This line is made up of a simple table with two rows. Each row of the table contains 10 cells that are 20 pixels wide and 8 pixels high. Each cell contains a blank GIF image which is stretched into position using the height and width attributes of the image tag (<IMG>).

Example 2:

Click here to see this example on a separate page so you can easily view the HTML source.

This series of beveled rectangles is created with HTML in a series of nested tables. The bevels are a result of the border attribute of the <TABLE> tag. The code below illustrates how one of the beveled rectangles is created:

<TABLE BORDER="5" CELLPADDING="0" CELLSPACING="0" 

HEIGHT="5">

<TR>

<TD WIDTH="5" HEIGHT="5" BGCOLOR="#999999" 

ALIGN=center>&nbsp;</TD>

</TR>

</TABLE>

This is a very basic table. With the border attribute set to five, Navigator and IE draw beveled borders around the table. Netscape will generate colored bevels using the Web page's background color while IE always sticks to the gray borders.

To create the line of beveled tables as shown in Example 2 above, I've copied and pasted the table code a few times, and then nested them within another table that has the BORDER attribute set to zero, and no BGCOLOR specified.

The 13 tables that are nested within the table alternate between tables with their BORDER attributes set to 5 pixels and a BGCOLOR that is a shade of gray, with spacer tables in between that have their BORDER attribute set to zero and no background color.

Notice, again, that even though the height is set to 5 pixels, the table cells are 20 pixels high. To look at the code, it may seem like it is a lot of coding, but really it's just a lot of copying and pasting. Once the first two nested tables were written, it was "copy" and "paste" from there. The entire time to code Example 3 took no more than a minute.

As an example: you can make the beveled rectangle-line a little more interesting if you throw in some single-pixel GIF animations as shown below:

Example 3:

Click here to see this example on a separate page so you can easily view the HTML source.

In this example, the beveled rectangles contain single-pixel GIF animations that are stretched using the height and width attributes of the <IMG> tag. The alternating flash effect is created by adjusting the timing of the GIF animations.

Aside from the need to make sure your code is interpreted the same by both Navigator and IE, one disadvantage to using browser-generated graphics is that they can not be cached like normal GIF or JPEG graphics. When you create a GIF or a JPEG, it is remains in the browser cache and can be referred to again and again, without additional bandwidth requirements. Browser generated graphics lack this advantage.

While browser-generated graphics are useful, they can also be more trouble or more bandwidth-intensive than they are worth. An intelligent approach to browser-generated graphics should be adapted. Use HTML where it is warranted and can be used in a bandwidth-friendly manner. However, if the resulting HTML source code is too slow and tedious, it is best to stick with traditional GIF or JPEG images to achieve the desired effect you are looking for.

<< BACK