How do you
display text where space, TABS and carriage return characters count?
After this lesson you will be able to:
Note: If you do not have the working documents from the previous lessons, download a copy now.
In previous lessons we have seen that a web browser will ignore extraneous space characters, tabs, and carriage returns in your HTML files. However, there are some instances where it will be important to maintain these aspects of page layout. In this lesson, the example will be where we want to insert a table of text with aligned columns.
The preformat tag instructs your web browser to display the text exactly as typed in the HTML document, including spaces, tabs, and carriage returns. A browser typically displays such text as a
type, meaning a font in which every character has the same width. Here is example of what the preformat does:
<pre> We have indented with 5 space characters. And used the carriage return to jump to a new line. Here we use spaces to create a text table. </pre>
Without the <pre> and </pre> tags, the same HTML produce:
|We have indented with 5 space characters. And used the carriage return to jump to a new line. Here we use spaces to create a text table.|
With the preformat tag, it helps if the text editor you are using can display in a monospaced font (such as "Courier" or "Monaco"); if not, you will have to count spaces when aligning text into columns (and you will mutter bad words under your breath).
For our Volcano lesson, we want to add a table under the Introduction section that lists several well-known volcanoes, when they erupted, and the volume of erupted material. To do this:
<pre> Eruption Date Volume in km^3 -------- ---- -------------- Paricutin, Mexico 1943 1.3 Mt. Vesuvius, Italy 79 A.D. 3 Mount St. Helen, Washington 1980 4 Krakatoa, Indonesia 1883 18 Long Valley, California pre-historic 500 - 600 Yellowstone, Wyoming pre-historic 2400 </pre>
In this example we use space characters to make the first column left justified and the other 2 columns center-justified. The dashes are used to highlight the column headings.
Compare your web page with a sample of how this document should appear. If your web page was different from the sample, review the text you entered in the text editor. If the columns are not aligned, then it is likely that you are missing or have too many space characters.
Review topics for this lesson:
You can still use HTML tags inside text that is marked by the preformat tag. For example we can add a hypertext link and some style tags that are within the <pre>...</pre> tags:
<pre> This tutorial is copyright 1995, 1996 <B>Be sure to tell all of your friends about it!</B> <i>We Welcome Your Feedback</i> fondly, <A HREF= "http://www.mcli.dist.maricopa.edu/"> mcli</A> </pre>
Note that the HTML tags do not count as spaces; they are ignored within the preformat region.Some web page developers will use the <pre>...</pre> tags with carriage returns in between to add white space between text or graphics in their web pages -- especially if they wish more white space than provided by the <p> tag. For example:
Cheese was long since abolished from the Orient. <pre> </pre> ...until Sir Longhorn arrived with the great Cheese Crusade of 1167.
Add a table or chart to your HTML document using the preformat tag.
Use special character sets to add some âccèñt to your web pages.
Writing HTML: Lesson 9: Preformatted Text
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
The 'net connection at MCLI is Alan Levine
Comments to firstname.lastname@example.org