Formatting Features

This page deals with features that allow you to control the exact layout of a number of items at once on your page.

The <pre> tag

The simplest such feature lets you place text within the pair of tags <pre>...</pre>. Such text will appear on the web browser exactly as it is typed in; thus, line breaks and extra spaces are preserved.

However, other HTML commands can still be used between <pre> and </pre>. Thus, to avoid problems, you have to replace the < and > characters by &lt; and &gt; ... and, because you are able to do that, you also have to replace the & character by &amp; . As you may be able to guess, these pages about HTML are an example of where this is done quite often.

Other special characters can be expressed in this way. Thus, &eacute; is a lower-case e with an acute accent, and &Eacute; is an upper-case e with the same accent. The accents grave, circ, and uml can also be used, but only on letters with which they are actually paired in standard 8-bit ASCII. Also, &copy; gives you the copyright symbol, and &nbsp; gives you a space that is treated like a letter in that it is not used as a place to break the end of a line.

The pre tag might be used to enclose an example of a computer program:

<pre>
   FOR I=1 TO 10
   PRINT USING " ####"; I, I*I
   NEXT I
   STOP
   END
</pre>

or it might be used to present tabular matter:

<pre>
   | 0 1 2 3 4
 --------------
 0 | 0 1 2 3 4
 1 | 1 2 3 4 0
 2 | 2 3 4 0 1
 3 | 3 4 0 1 2
 4 | 4 0 1 2 3
</pre>

even though there is a specific mechanism in HTML for creating tables, which we will examine next. The pre tag is often "misused" for creating tables for two reasons: less typing is involved, and the pre tag was part of HTML from the beginning, while tables were added later, and therefore they won't be seen properly on some older browsers.

Tables

But there are times when real HTML tables are required.

A table is enclosed in <table>...</table> tags.

Inside those tags, the rows of the table are then enclosed by <tr>...</tr> tags.

Finally, inside the row, the individual cells of the table are enclosed by <td>...</td> tags.

Thus, a table might look like this:

<table border=4>
 <tr>
  <td>Canada:</td>
  <td>T4 slip</td>
  <td>CRTC</td>
  <td>Canada Day (July 1)</td>
 </tr>
 <tr>
  <td>United States:</td>
  <td>Form W-1</td>
  <td>FCC</td>
  <td>Independence Day (July 4)</td>
 </tr>
</table>

and this table would look like this in your browser:

giving approximate equivalents of some Canadian and United States terms.

The default for the border in a table is no border at all. Also, the contents of a cell can be kept from the edges of the cell by specifying CELLPADDING=8, for example, which would force 8 pixels of space around the contents of each cell. CELLSPACING=5 places five pixels between cells, but unlike BORDER=5 it does not cause a visible border to appear.

A cell can be allowed to extend from one column to the next by using COLSPAN=2, or from one row to the next in its column by using ROWSPAN=2.

Here is an example of a table using this feature, whose structure can be found by looking at the source of this page:

Incidentally, the dates given in this page are recent ones, presented in the book A Geologic Time Scale by W. B. Harland and others in 1982.

Many graphics-intensive and professional-looking sites make extensive and clever use of tables to achieve their effects.

If it is desired to make images in adjacent cells touch, it is very important to ensure that there is absolutely nothing other than the image in the cell. Using a <br> tag after the image is necessary in order to achieve this for some obscure reason. There is an example of such an image, also using nested tables, at this location.

A <td> tag can look like this: <td bgcolor="#FFFF00"> or even <td bgcolor="#FFFF00" background="pattern.gif"> and this contributes to the effective use of tables to achieve impressive-looking pages.

Frames

Tables allow data to be arranged flexibly within a single page. Frames allow two or more pages to appear on the screen at once.

A master page, which looks like this:

<html>
<head>
<title>My Site</title>
</head>
<frameset cols="20%,80%">
<frame src="narrow.htm" name="LeftWindow">
<frame src="wide.htm" name="RightWindow">
</frameset>
<noframes>
<body>
<p>Your browser does not seem to
support frames. Go
<a href="index.htm">here</a>
to continue.</p>
</body>
</noframes>
</html>

controls the display of the two pages narrow.htm and wide.htm on the user's browser. The <frameset> tag controls how the frames are related: it must contain one and only one of cols= or rows=, and in either case, a list of the widths of the columns or rows in quotes follows. Those widths can be in percentages of the total available space, as in the example above, or they can be plain numbers, giving exact widths in pixels. In the latter case, at least one column (or row) needs to have its width given as *, meaning that it recieves the space left over. cols="100,*,100,3*" is also allowed; that specifies that the first and third columns are each 100 pixels wide, and the leftover space is divided into four parts, of which the second column gets one, and the fourth column gets three.

One can specify BORDER=, MARGINHEIGHT=, and MARGINWIDTH= for each frame; this affects the inside of the frame, though, and does not eliminate the borders drawn between frames. To do that, use a FRAMESET command that looks like:

<frameset cols="20%,80%" border=no frameborder=0 framespacing=0>

Framesets can be nested, and a page with frames in it can also appear in a frame.

The pages that appear in frames are quite normal, but there is one special thing that may appear in them. Normally, when you click on a link in a frame, the new page you are going to appears in that same frame. But this can be changed through the TARGET attribute in a link: <a href="newpage.htm" target="RightWindow"> will cause the page newpage.htm to appear in the frame named RightWindow even if the link happens to be in the file showing in the LeftWindow frame. And <a href="http://external.site.org/page.htm" target="_top"> will (as a matter of courtesy) cause the external page to which this is a link to appear by itself in the browser, not in a frame (and therefore appearing to be part of your own site).

(An example of the use of frames is at table.htm.)

Also, it is possible to disable the appearance of scrollbars with a frame by specifying SCROLLING=NO with that frame. As this can make part of the document displayed in the frame inaccessible, this option should not be used if not necessary. However, if you use a FRAMESET such that the height of a frame is specified in pixels, rather than a percentage, one can certainly turn off scrolling if all that becomes inaccessible thereby is some unneeded whitespace under text, for example.