Chapter 13

Tables and Math Equations

by Jim O'Donnell

 

CONTENTS

As a tool for government, commercial, educational, and personal Web applications, HTML has many 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 greater range of uses today than perhaps its original creators had first imagined. In this chapter, you learn about the following:

The level of sophistication of the developing HTML 3.0 specification (currently in draft format) will far exceed 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).
 

 

Note

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.

Figure 13.1 : This HTML document shows the basic table tags.

Figure 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 here, some other characteristics should be noted from the example shown in figures 13.1 and 13.2:

 

 

Note

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.
 

 

Tip

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.

Figure 13.3 : There are many options and possibilities for aligning table element.

Figure 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 previously, 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.

Figure 13.5 : Tables can be displayed with or without borders.

Figure 13.6 : In many cases,borders accentuate the organisation 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.

Figure 13.7 : Borderless tables can be used to present information with considerable flexibility in how that information is grouped.

Figure 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 that span 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>

 

Tip

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.
 

 

Caution

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

 

 

Note

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

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.

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 shows 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 to give the tables a 3-D and/or recessed appearance.

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.

The Netscape table enhancements are as follows:

 

 

Caution

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.

 

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:

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

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.

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 previously, 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 figure 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.

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.

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 formulas 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).

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

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.
 

 

Tip

Use colors in your equations to highlight specific variables and values for your audience.
Hosted by www.Geocities.ws

1