HTML and CSS Reference
In-Depth Information
Creating Tables with Preformatted Text
As you learned in Tutorial 1, browsers strip out white space from the HTML code when
they render Web pages. You can force browsers to keep certain white space by marking
your document text as preformatted text, in which browsers display the spacing and line
breaks exactly as you enter them. Preformatted text is created using the
pre
element
<pre>
content
</pre>
where
content
is the text that will appear preformatted in browsers. One use of prefor-
matted text is to quickly create tables that are neatly laid out in rows and columns. For
example, the code
<pre>
Time Friday Saturday
==== ========== ==============
7:30 Brain Stew Bismarck Forum
</pre>
is displayed by browsers exactly as typed, with the spaces as shown:
Time Friday Saturday
==== ========== ==============
7:30 Brain Stew Bismarck Forum
Preformatted text is displayed by browsers in a monospace font in which each letter
takes up the same amount of space. One of the advantages of monospace fonts that
make them useful for entering tabular data is that the relative space between characters
is unchanged as the font size increases or decreases. This means that if the font size of
the above table were increased or decreased, the columns still would line up.
Although you probably should use the
table
element to display most of your data,
you might consider using preformatted text for simple and quick text tables.
You've completed your work laying out the basic structure of the KPAF program
schedule. The next thing Kyle wants you to focus on is formatting the table to look attrac-
tive and professional. In the next session, you'll explore how to apply design styles to
make a Web table interesting and attractive.
Session 5.1 Quick Check
1.
How is the number of columns in a Web table determined?
2.
How does a browser usually render text marked with the
<th>
tag?
3.
Specify the HTML attribute to add a 10-pixel-wide border to a Web table.
4.
A table data cell contains the text
Monday
and should stretch across two rows
and three columns. Provide the HTML code for the cell.
5.
What adjustment do you have to make when a cell spans multiple columns?
6.
Captions usually appear above or below their Web tables. Explain why a caption
is still part of a table's structure.
7.
What are the three table row groups, and in what order must they be specifi ed in
the code?
8.
Specify the code to create a column group in which the fi rst two columns
belong to the
introCol
class and the next three columns belong to the
col1
,
col2
,
and
col3
classes, respectively.
9.
What is the purpose of the
table summary
attribute?
