XHTML Lesson 9: Preformatted Text

Preformatted text can be used to create simple tables by using the spacebar to line up text. Just make sure you use a monospaced font (like Courier New , Monaco, or FixedSys ) in your text editor.

Assignment:

Type the code below into any text editor and save it with the name "lesson09.html" in your "mySite" folder. You may view the completed lesson in a new window by clicking here. After you create this page, open it in your Web browser.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Lesson 9: Preformatted Text</title>
</head>
<body bgcolor="white">
<h1>Preformatted Text</h1>
<p>Here is a simple table using preformatted text.</p>
<pre>
Student Name      Quiz 1   Quiz 2   Quiz 3   Total   Average

Bobbie Riggs          90       80       70     240        80

Don Shula             75       95       90     260        87

Paul Warfield         60       80       70     210        70
</pre>
</body>
</html>

A Detailed Explanation:

You don't see a lot of pages these days using preformatted text but this lesson is important in that it provides you with some insight into how Web browsers treat text. For example, if you type multiple spaces to separate words, you will not see the extra spaces in your Web browser. The browser simple ignores any extra spaces and extra carriage returns that you type in your code. If you surround your text with the <pre> </pre> tag pair, however, the browser will display the text and all your extra spaces and carriage returns. If you have old but valuable content stored in plain text files with columns lined up using the space bar, using the <pre> </pre> tag pair is an easy way to make that content available on the Web.

Previous Lesson | Next Lesson