9. Preformatted Text

How do you

      display  
          text 
       where        space,         TABS   and   carriage return
                  characters     count?

Objectives

After this lesson you will be able to:

Create a table of aligned text
Control the placement of text on a page when tabs and spaces

Lesson

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

m o n o s p a c e d

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:

Open the second HTML file, index.html in your text editor.
Under the last portion of the Introduction section, place a header of level 4 (<h4>) with the text Volumes of Some Well-Known Volcanic Eruptions (If you do not remember how to make headers, see lesson 3).

Below this heading, enter the following text exactly as follows (this would by an opportune time to cut and paste from this web page!):


<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.

Save and Reload in your web browser.

Check Your Work

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

Review topics for this lesson:

How does the preformat tag change the way that a web browser interprets HTML?
In what other situations might you use this tag?

More Information

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:

HTML Result

<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>

    This tutorial is copyright 
    1995, 1996
        
        Be sure to tell all of 
        your friends about it!     
                    We
                      Welcome
                        Your
                          Feedback
    fondly,
    mcli

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:

HTML Result

Cheese was long since 
abolished from the Orient.
<pre>



</pre>
...until Sir Longhorn arrived with the 
great Cheese Crusade of 1167.

Cheese was long since abolished from the Orient.

...until Sir Longhorn arrived with the great Cheese Crusade of 1167.

Independent Practice

Add a table or chart to your HTML document using the preformat tag.

Coming Next....

Use special character sets to add some âccèñt to your web pages.

GO TO.... | Lesson Index | previous: "HyperGraphics" | next: "Special Characters" |

Writing HTML: Lesson 9: Preformatted Text
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

URL: http://www.mcli.dist.maricopa.edu/tut/tut9.html