Text Tables

There are two ways to insert a table of information on a web page:

  1. Text table
  2. Graphics table

A text table simply contains text, evenly spaced out on the page. Here's an example:

Customer Name             Amount Owed
------------------------- -----------
ABC Company                   $500.00
XYZ Company                    $32.17

A graphical table appears as a graphical element on the web page. Graphical tables allow you to include design elements such as color, shading, and borders. Graphical tables are more flexible and attractive than text tables.

Creating a Text Table

To create a text table, you have to control the type of font that is used. A text table relies on spaces and characters that fill those spaces to create its column boundaries. You have to use a fixed width font, which is a font that allots the same amount of space to each character and to empty spaces between characters. Most typeset documents and word processing documents use proportional fonts, which are fonts in which the width of each character varies according to the character's shape.

Have you ever tried to line up columns of information in a word processor by using the space bar? You probably noticed that, no matter how careful you were to make things line up, the columns never lined up exactly. Even if you were able to get them to line up on the screen, when you printed the page, the columns did not align properly. This is because proportional fonts allow an exact amount of space horizontally, for each letter, which can be totally different for every letter. A lowercase L will us a very small amount of space and a W will take up a lot of space horizontally. Fixed width fonts use exactly the same amount of space for every character.

HTML ignores extra blank spaces, blank lines, or tabs. However, you can insert the <PRE> tag to display preformatted text, text formatted in ways that you want retained in your web page. Any text formatted with the <PRE> tag also displays text using a fixed-width font. When using the <PRE> tag, every space will appear in your web page. So, to align data in a text table, you can use the <PRE> tag and press the space bar as many times as needed to align data vertically. The pre is a block level element.

We can also use the code tag to mark computer code in a Web page. The code tag is an inline element. Here's an example of the difference.

HTML Code Result
<p>Marked with the <code>code tag</code> here.</p>

Marked with the code tag here.

<p>Marked with the <pre>pre tag</pre> here.</p>

Marked with the

pre tag
here.

The size is a little different, but this is only because my style sheet has a rule to make the PRE tag a little larger. Note that the PRE tag, being a block element, inserts a line before and after.