ptg16476052128 LESSON 7: Formatting Text with HTML and CSS
Preformatted Text
Most of the time, text in an HTML file is formatted based on the HTML tags used to
mark up that text. In Lesson 3, “Introducing HTML and CSS,” I mentioned that any extra
whitespace (spaces, tabs, returns) that you include in your HTML source is stripped out
by the browser.
The one exception to this rule is the preformatted text tag <pre>. Any whitespace that
you put into text surrounded by the <pre> and </pre> tags is retained in the final output.
With these tags, the spacing in the text in the HTML source is preserved when it’s dis-
played on the page.
The catch is that preformatted text usually is displayed (in graphical displays, at least)
in a monospaced font such as Courier. Preformatted text is excellent for displaying code
examples in which you want the text formatted with exactly the indentation the author
used. Because you can use the <pre> tag to align text by padding it with spaces, you can
use it for simple tables. However, the fact that the tables are presented in a monospaced
font might make them less than ideal. (You’ll learn how to create real tables in Lesson
10, “Building Tables.”) The following is an example of a table created with <pre>:Input ▼
<pre>
Diameter Distance Time to Time to
(miles) from Sun Orbit Rotate
(millions
of miles)
--------------------------------------------------------------------
Mercury 3100 36 88 days 59 days
Venus 7700 67 225 days 244 days
Earth 7920 93 365 days 24 hrs
Mars 4200 141 687 days 24 hrs 24 mins
Jupiter 88640 483 11.9 years 9 hrs 50 mins
Saturn 74500 886 29.5 years 10 hrs 39 mins
Uranus 32000 1782 84 years 23 hrs
Neptune 31000 2793 165 days 15 hrs 48 mins
Pluto 1500 3670 248 years 6 days 7 hrs</pre>Figure 7.3 shows how it looks in a browser.