Notice: This material is excerpted from Special Edition Using HTML, 2nd Edition, ISBN: 0-7897-0758-6. This material has not yet been through the final proof reading stage that it will pass through before being published in printed form. Some errors may exist here that will be corrected before the book is published. This material is provided "as is" without any warranty of any kind.
By Jim O'Donnell
As a tool for government, commercial, educational, and personal Web applications, HTML has quite a few needs and expectations to meet. It's the language for what is becoming the standard interface of the Internet, and, as such, is required to support a much greater range of uses today than perhaps its original creators had first imagined.
The level of sophistication of the developing HTML 3.0 specification
(currently in draft format) will be head and shoulders above the current
standard, and will accommodate a wider range of user needs. Two deficiencies
in
HTML 2.0, the lack of support for tables and for mathematical equations,
will be supported in
HTML 3.0. Although none of the popular
Web browsers
currently support the full draft specification for either, there is support
for tables (a subset of the HTML 3.0 draft specification and some extensions
introduced by Netscape).
Much of the information presented in this chapter is based on
public texts and discussions regarding the development process for
HTML 3.0. This new version is not a finished product (at the time of this writing), so any specific notations or expressions may change drastically before the new standard is finalized. However, most of the table elements discussed are supported by the popular
Web browsers and are becoming widely used, making it unlikely that they will disappear any time soon.
HTML 3.0 defines tables in much the same way it defines list containers.
The <TABLE> element is the container for the table's data and layout.
HTML tables are composed row by row: you separate the data with either
the <TH> (table header) or <TD> (table data) tags and indicate
a new row with the <TR> (table row) tag. Think of the <TR>
tag as a line break, signaling that the following data starts a new table
row.
Table headers are generally shown in bold and centered by
WWW browsers,
and table data is shown in the standard body text format.
The HTML for a basic table is shown in figure
13.1. All of the table elements used are supported by the latest versions
of the most popular
Web browsers: Netscape Navigator, Microsoft Internet
Explorer, and NCSA Mosaic. This table, as rendered by Netscape Navigator,
is shown in figure 13.2.
Fig. 13.1
This HTML document shows the basic table tags.
Fig. 13.2
Many of the basic HTML 3.0 table tags are supported by the most popular
Web browsers.
The basic HTML table tags shown in figure
13.1 and figure 13.2 are as follows:
In addition to the basic tags shown above, some other characteristics should be noted from the example shown in figures 13.1 and 13.2:
If you're concerned about browsers displaying your header text correctly (as emphasized text, preferably in a bold font), you can use style tags to force the issue. Be careful what you wish for, though: if you want an italicized font but the browser automatically formats the text bold, you can wind up with bold italicized headers.
Cells do not necessarily have to contain data. To create a blank cell, either create an empty cell (e.g., <TD></TD>), or create a cell containing nothing visible (e.g., <TD> </TD>). Note that is an HTML entity, or special character, for a nonbreaking space. Though you would think these two methods would produce the same result, as you will see later in this chapter, in the section "Empty Cells and Table Appearance," different browsers treat them differently.
It's not really necessary to create blank cells if the rest of the cells
on the row are going to be blank; the <TR> element signals the start
of a new row, so the Web browsers automatically fill in blank cells to
even out the row with the rest of the table.
Tables are necessarily uniform with equal numbers of cells in each row and in each column. No "L-shaped" tables (or worse!) allowed.
It is possible, through the use of the ALIGN and VALIGN attributes,
to align table elements within their cells in many different ways. These
attributes can be applied in various combinations to the <CAPTION>,
<TR>, <TH>, and <TD> table elements. The possible attribute
values for each of these elements are as follows:
These alignments are illustrated by the HTML document shown in figure
13.3 and rendered by
Netscape Navigator in figure
13.4.
Fig. 13.3
There are many options and possibilities for aligning table elements.
Fig. 13.4
Table element alignment can be specified row-by-row or for each individual element in the table.
Although this table is pretty ugly, it illustrates the capabilities of the different ALIGN and VALIGN attributes, as follows:
Troubleshooting
My table doesn't look like I want it to. What am I doing wrong?
If you're having trouble getting a table to look the way you want - it has too many or not enough rows and/or columns, information is missing, or things aren't in the places you think they should be - the most likely problem is missing </TR>, </TD>, or </TH> tags. Web browsers need these tags to correctly determine how many rows and columns are in the table, so when they are mistakenly left out, it can lead to unpredictable results.
There are more sophisticated things that can be done with tables, both by using additional table attributes and by different uses of some of the ones you already know about.
As mentioned above, the BORDER attribute to the <TABLE> element is what gives the borders around the table elements. Even though this attribute is off by default, for most conventional tables - those used to organize information in a tabular format - borders are usually used to accentuate the organization of the information. Consider the HTML document shown in figure 13.5 and rendered in figure 13.6. In this case, the organization of the information is much easier to see in the version that includes borders.
Fig. 13.5
Tables can be displayed with or without borders.
Fig. 13.6
In many cases, borders accentuate the organization of the information.
However, HTML tables can be used in other ways, rather than for the
simple tabular display of data. They give an HTML author great flexibility
in presenting information, grouping it, and formatting it along with other
information. Consider the HTML document shown in figure
13.7 and rendered in figure 13.8. In
this case, the use of a
borderless table allows the descriptive text of
the image to be displayed alongside the image.
Fig. 13.7
Borderless tables can be used to present information with considerable flexibility in how that information is grouped.
Fig. 13.8
Side-by-side presentation of information elements can be achieved
using HTML tables.
Rows and columns can be spanned - combined with adjacent cells to create larger cells for the data. For instance, in a table with five rows and five columns, the first row could be spanned across all five columns to create a banner header for the whole table. In the same table, each of the columns could have elements that spanned multiple rows. It would be possible, through spanning, to create rectangular table elements span that both multiple rows and columns, up to the full size of the table.
To span two adjacent cells on a row, use the ROWSPAN attribute with <TH>, as follows:
<UX><TH ROWSPAN=2>
To span two adjacent cells in a column, use the COLSPAN attribute with <TH>, as follows:
<UX><TH COLSPAN=2>
Don't forget to close your table data with the </TABLE> closing tag.
Figures 13.9 and 13.10 show an HTML document that makes use of row and column spanning. This example is shown in figure 13.11, which shows some of the trouble you can get yourself into with row and column spanning. The table shown on the left is formatted correctly. However, HTML will allow you to overlap rows and columns if you aren't careful with your spanning, and the results of this can (and usually will) be unfortunate.
Fig. 13.9
Row and column spanning can be used for table banner headers and for grouping elements in more than one category.
Fig. 13.10
HTML will allow you to span row and column tables in such a way that they will overlap - this is usually a bad idea.
Fig. 13.11
If you aren't careful, you can overlap rows and columns when using spanning, which tends to give ugly results.
If you look closely at the code shown in figures 13.9 and 13.10, you'll see that I was able to get the two tables in figure 13.11 to appear side-by-side by nesting them in another borderless table. The nesting of tables is a
Netscape enhancement to
HTML and is part of the draft
HTML 3.0 specification. It is also supported by Microsoft Internet Explorer. However, if you view such a file with a
Web browser that does not support the nesting of tables - even if it has support for normal tables - all of the information can be lost. Figure 13.12 shows the same
HTML document displayed in figure 13.11, as rendered by
NCSA Mosaic. (See the "Netscape Table Enhancements" section, later in this chapter.)
Fig. 13.12
Trying to view nested tables with a Web browser that doesn't support them can result in losing all of the included information.
When you create larger cells in an HTML table, you might find that your cell data acts a bit unruly: not breaking properly, wrapping text when it shouldn't, and crowding too close to the cell divisions. Like other HTML documents, tables support internal HTML elements, such as <BR> (to create a line break in the data), hypertext link anchors, inline images, and even forms.
Use an HTML table in the same manner you would a spreadsheet: for data display, for creating data layouts (such as inventory lists or business invoices), and for calculation tables (when combined with a CGI script that can take your form input and generate output data that's displayed in your HTML table). The uses for tables are limited only by your data and your creativity.
The major Web browsers - Netscape Navigator, Microsoft Internet Explorer, and NCSA Mosaic - all support tables. Tables are rendered slightly differently in each of the three browsers, and each behaves slightly differently under some circumstances. Additionally, Netscape has introduced enhancements to their table support, most of which are also supported my Microsoft Internet Explorer.
As mentioned earlier, there is sometimes a difference between an empty
cell in a table and one with nothing visible in it. This is particularly
true with Netscape Navigator, which will display the two differently. Consider
the HTML document shown in figure 13.13,
which shows two tables. In the top table, there are several empty table
cells - cells with only white space in them, which
Netscape Navigator will
not treat as data. In the lower table, these same cells have something
in them: the HTML entity  , which is a nonbreaking space (an invisible
character).
Fig. 13.13
Cells with no data in them can either be left empty or contain an invisible character; this will sometimes affect how they are displayed.
As shown in figure 13.14, Netscape Navigator
will display these two tables differently. Earlier versions of
Netscape's
browsers displayed the table with empty cells incorrectly, and it was necessary
to include some "dummy" invisible data to make the table display
correctly. As you can see here, now it is mainly an aesthetic difference.
Fig. 13.14
Netscape Navigator will display tables with empty cells differently
from those that contain invisible characters.
Microsoft Internet Explorer will display both of these cases the same,
similar to the bottom table in figure 13.14.
NCSA Mosaic, on the other hand, offers the greatest degree of control at
the user end over how tables are displayed. Figure
13.15 the Tables tab of Mosaic's Preferences menu. This menu enables
the user to decide whether empty cells are displayed (i.e., whether they
appear similar to the upper table in fig. 13.14
or the lower), and whether or not to give the tables a 3-D and/or recessed
appearance.
Fig. 13.15
NCSA Mosaic offers the user several options about how to display
HTML tables.
Netscape Navigator has introduced several enhancements to
HTML tables
to increase the degree of control
HTML authors have on how their documents
are displayed. Figure 13.16 shows the
HTML
document for these enhancements, which are rendered by
Netscape Navigator
in figure 13.17.
Fig. 13.16
This HTML document shows off
Netscape Navigator's enhancements to
HTML tables.
Fig. 13.17
Netscape Navigator's table enhancements give the
HTML author greater
control over the appearance of
HTML tables.
The Netscape table enhancements are as follows:
When using the Netscape BORDER=<num> table enhancement, it is possible to specify a table with no borders by including BORDER=0 in the <TABLE> element. While this will give a borderless table when viewed with Netscape Navigator,
Web browsers that do not support this enhancement will ignore the "=0" and display the table with a border. So, to use a borderless table that will work on all browsers that support tables, include the <TABLE> element without specifying a BORDER attribute at all.
The Netscape enhancements to
HTML tables are also supported by
Microsoft
Internet Explorer, except for the numerical value for the BORDER attribute.
NCSA Mosaic does not support any of them at this time.
Table support has become very widespread with most of the popular Web browsers, so there is less reason to avoid using them. Still, there are folks out on the Web, either because of their Internet service provider of because of the type of connection to the Internet they have, who are forced to use Web browsers that do not have table support. If you are worried about missing such people, there are some alternatives that you can use, either instead of or in addition to using tables themselves.
Figure 13.18 shows an HTML document for
a fairly simple table shown in figure 13.19.
Some other ways of displaying this information, not using tables, are as
follows:
Fig. 13.18
This HTML document uses a table to display information.
Fig. 13.19
A sample table showing a fairly straightforward organization of information.
Fig. 13.20
Simple tabular data can also be displayed using a list format.
Fig. 13.21
Because support for lists is more widespread than that for tables, they can sometimes be a good alternative.
Fig. 13.22
A preformatted text block can also be used to organize information in a table.
Fig. 13.23
A preformatted table isn't very pretty, but it will be displayed correctly in just about any Web browser.
The use of tables to display tabular information is, by definition, pretty obvious. Tables can also come in handy when using HTML forms, as they give you the ability to create a very well-organized form for entering information. Tables can be used in other ways as well, as mentioned briefly earlier. Because they give you the ability to group text and graphics with one another in many different ways, they can be used to enhance the way a page is displayed.
Consider the HTML document shown in figure
13.24. This document includes graphics and text information, and is
meant to display it as a sort-of trading card. (Forgive the shameless self-promotion,
but it was the only hockey picture I have!) This document is shown, as
rendered by Netscape Navigator, in figure 13.25.
Fig. 13.24
Tables allow you to combine text and graphics in many different ways.
Fig. 13.25
Though at first glance this does not look like a "table," the use of an HTML table to organize the information has made the display more effective.
To refine this Web page further, some of the information presented within
it can be displayed differently - in this case, using an HTML list (an
unordered list, but any other kind of list could be used just as easily).
The HTML code for this is shown in figure 13.26
- it makes sense to group lists of data using HTML list elements, and
the ability to include these within a table allows the information to be
conveyed more clearly. The revised Web page is shown in figure
13.27.
Fig. 13.26
HTML lists can be used within other
HTML elements, including tables.
Fig. 13.27
Combining lists and tables gives you powerful means for organizing and displaying information within your Web pages.
Another way to display this information is to use tables within a larger
table. As shown in figure 13.27, the list
items are composed of both a team name and a year (or range of years).
Couldn't this information also be displayed in a table? It is possible
to nest tables within other tables using Netscape Navigator and
Microsoft
Internet Explorer. Not all
Web browsers that support tables also support
nested tables, however. As shown above, NCSA Mosaic does not, so all the
information presented within the nested table is lost. For that reason,
care should be exercised when using nested tables.
Figure 13.28 shows the HTML code for
the
hockey trading card
Web page using nested tables. It is displayed in
13.29. Notice that the nested tables are
displayed with borders (and with cell spacing and padding reduced to make
them more compact), while the outer table used to structure the whole page
is not.
Fig. 13.28
Some Web browsers, particularly Netscape Navigator and Microsoft Internet Explorer, support nesting tables within other tables.
Fig. 13.29
Nested tables are another way to organize information effectively within a Web page.
HTML Level 3 will provide full support for creating mathematical equations
in the body of the text in
HTML documents. The basic element will be the
<MATH. element, and it will contain attributes that define the formula
expressions and numerical data (and variables). HTML's <MATH> will
display mathematical elements in a plain font and numerical variables in
italicized text. The
HTML standard will borrow heavily from the
LaTeX UNIX
application, so if you have experience using LaTeX to create mathematical
content for documents, you'll have a leg up on the HTML 3.0 implementation.
The <MATH> container will support elements for brackets, delimiters,
the proper display of numerators and denominators (the former placed above
the latter), superscript and subscript text, and matrices and other arrays.
HTML entities will be provided for mathematical functions,
Greek letters,
operators, and other
math symbols.
Currently, however, none of the major Web browsers support
HTML math
equations. Arena, a browser used as the HTML 3.0 test bed that runs under
UNIX and Linux, does support them - though Arena is not a
production Web
browser.
As mentioned, Arena is the Web browser for the
HTML 3.0 specification.
It is not a production browser meant for widespread use or support, but
is intended to give the developers of the HTML 3.0 specification a test
bed. It is available for UNIX and Linux machines from:
http://www.w3.org/hypertext/WWW/Arena/
Arena has a series of Web pages meant to showcase the elements of the
HTML 3.0 specification that it supports. Figure
13.30 shows examples of what can be done with HTML 3.0 math equations.
Fig. 13.30
Many different symbols and formulas can be displayed in HTML documents
with the
HTML 3.0 specification.
No commercial browsers offer
math equation support. As mentioned in
the previous section, Arena is the only browser that supports equations,
and it's primarily a testing location for the HTML 3.0 development process.
How then can equations be used in Web documents that anyone can access
and display?
You can accomplish this through inline images. Many word processors
include
math equation editors. Create your
math formulae in your favorite
word processor or
graphics program, setting the
font size, style, and color
to the proper size in relation to your Web document text (see
fig. 13.31).
Fig. 13.31
Many word processors and
graphics programs enable you to create math
formulas and equations.
Once you have created the graphic and saved it as a GIF file, you can include it in your HTML documents (see fig. 13.32 and fig. 13.33).
Fig. 13.32
Equations saved in a GIF format can be included in your
HTML documents.
Fig. 13.33
It's a little more work getting them there than with normal text, but it is possible to include math equations in HTML documents.
Incorporating math equations requires a little more work than just entering
text into a
Web page, and it will until there is more support of the HTML
3.0 math equation specification by the popular Web browsers. If you maintain
your equations in a single source file, you can always go back and edit
or reuse your math "code" in future HTML documents.
Use colors in your equations to highlight specific variables and values for your audience.
For technical support for our books and software contact support@mcp.com
Copyright ©1996, Que Corporation