HTML The Definitive Guide (142 page)

"

"
For example:

Pickled Kumquats

'Quats and 'Kraut

'Quatshakes

Liver with Fried 'Quats

The fancier list is shown in Figure 15.1
.

Figure 15.1: Custom bullets for unordered lists
Keep in mind that this trick works well only if your list items are short enough to not wrap within the browser window. If the item does wrap, the next line will start aligned with the left edge of the bullet, not the left edge of the text, as you might hope.

15.2 Trivial or Abusive?

15.4 Tricks with Tables

Chapter 15

Tips, Tricks, and Hacks

 

15.4 Tricks with Tables

Enough with the cheap tricks. On to some really good ones: tricks with the HTML

tag and attributes that add some attractive features to your documents.

By design, HTML tables let authors create appealing, accessible tables of information. But the HTML table tags also can be exploited to create innovative, attractive page designs that are otherwise unobtainable in standard HTML.

15.4.1 Multicolumn Pages

One very common and popular page-layout element missing from HTML until recently is multiple columns of text. Although Netscape now supports the extension, for a more universal solution (at least until the majority of your audience gets the latest version of Netscape), place your document content inside a table of one row with two or more columns.

[Multicolumn Layout, 6.2]

15.4.1.1 Basic multicolumn layout

The basic two-column layout using

has a single table row with three data cells: one each for the columns of text and an intervening empty cell to more attractively separate the two columns. We've also added a large cellspacing attribute value to create additional intervening space between the columns.

The following example table is an excellent template for a simple two-column text layout:

Copy for column 1...

Copy for column 2...

See
Figure 15.2
for the results.

Figure 15.2: A simple two-column layout

The one thing the browsers won't do is automatically balance the text in the columns, resulting in adjacent columns of approximately the same length. You'll have to experiment with your document, manually shifting text from one column to another until you achieve a nicely balanced page.

Keep in mind, though, that users may resize their display windows and the columns' contents will shift accordingly. So don't spend a lot of time getting the last sentences of each column to line up exactly; they're bound to be skewed in other browser window widths.

Of course, you can easily convert the example layout to three or more columns by dividing the text among more cells in the table. But keep in mind that pages with more than three columns may prove difficult to read on small displays where the actual column width might be quite small.