Special Edition Using HTML 2nd Edition - Chapter 13 Tables and Math Equations Copyright ©1996, Que Corporation. All rights reserved. No part of this book may be used or reproduced in any form or by any means, or stored in a database or @retrieval system without prior written permission of the publisher except in the case of brief quotations embodied in critical articles and reviews. Making copies of any part of this book for any purpose other than your own personal use is a violation of @United States copyright laws. For information, address Que Corporation, 201 West 103rd Street, Indianapolis, IN 46290 or at support@mcp.com.

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.

Chapter 13 Tables and Math Equations

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 Tables 101

@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.

Basic HTML Table Elements

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>&nbsp;</TD>). Note that &nbsp; 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.

Aligning Table Elements

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.

Intermediate Tables

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.

Borderless Tables

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.

Row and Column Spanning

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.

Browser Specific Table Notes

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.

Empty Cells and Table Appearance

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 &nbsp, 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 Table Enhancements

@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 Alternatives

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.

Table Examples

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.

Combining Text and Lists

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.

Nesting HTML Tables

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.

Using Math Equations

@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.

HTML Math Equations Using Arena

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.

Math Equations for Browsers without HTML 3.0 Support

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.

Internet & New Technologies Home Page - Que Home Page
For technical support for our books and software contact support@mcp.com
© 1996, Que Corporation