Major Heading

Incidentally, it is not necessary that group selectors be composed of the same tag type. All tags that share the same style can be part of the group selector. For example, the group selector

p, blockquote, div {font-family:verdana; font-size:10pt}

indicates that all paragraphs, blockquotes, and divisions on a page are to share the same type face and size.

The <pre> Tag

Normally, no formatting of text takes place in the browser unless it is surrounded with XHTML tags. Although editor code may be indented and line-spaced by using the Space Bar and Enter keys, all contiguous spaces and lines are collapsed to a single blank space in the browser. There is one case, though, where text as formatted in the editor can be displayed in identical fashion in the browser.

A block of text surrounded by the <pre> tag is displayed in a monospace font in precisely the way it is formatted in the editor. That is, blank spaces and blank lines used to format XHTML code in the editor are faithfully reproduced in the browser, space by space and line by line. The <pre> tag is often used to create simple tables where alignment of columns is produced with embedded blank spaces. The following code, for example, produces a table that is displayed in the browser identical to the way it is typed in the editor.

<pre>
                  Table 1
              Sales by Region
----------------------------------------------
Region/Year   2000     2001     2002     2003
----------------------------------------------
East          35.2     37.4     39.8     40.0
West          28.0     25.6     27.4     29.8
South        102.3     86.1     98.6    100.2
North         10.5      8.6      9.8     10.4
----------------------------------------------
</pre>

Because all text lines are surrounded by the <pre> tag, columns can be aligned with the Space Bar and line breaks made with the Enter key. This alignment and spacing is possible because both the editor and browser display characters in a monospace font producing equally spaced characters. You need to make sure that your editor uses a monospace font such as Courier New in order to accurately space the text. Browser output is not shown here because it is identical to the table arrangement produced in the editor.

You can include minor styling of the monospaced text as long as the formatting does not change character sizes, thereby changing the space count between letters. The following code, for example, dresses up the previous table with bold and italic font styles along with a text color. Just make sure that you align the information in the table properly before adding extra style tags, which visually displace the aligned text when viewed in the editor. These extra tags inside the <pre> tag, however, do not add spacing to the table when viewed in the browser.

<pre style="color:blue">
                  <b>Table 1</b>
              <b>Sales by Region</b>
----------------------------------------------
<b><i>Region/Year   2000     2001     2002     2003</i></b>
----------------------------------------------
<b>East</b>          35.2     37.4     39.8     40.0
<b>West</b>          28.0     25.6     27.4     29.8
<b>South</b>        102.3     86.1     98.6    100.2
<b>North</b>         10.5      8.6      9.8     10.4
----------------------------------------------
</pre>

                  Table 1
              Sales by Region
----------------------------------------------
Region/Year   2000     2001     2002     2003
----------------------------------------------
East          35.2     37.4     39.8     40.0
West          28.0     25.6     27.4     29.8
South        102.3     86.1     98.6    100.2
North         10.5      8.6      9.8     10.4
----------------------------------------------

Although the above examples show coding for a data table, a later tutorial describes use of formatting tags especially designed for laying out tables. Although these table tags are the most common way to display rows and columns of tabular information, you can use the <pre> tag as a quick and easy way to accomplish similar displays.

---

---

|  About us | Categories | New Releases | Most Popular | Web Tutorial | Free Download | Drivers |