Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

CHAPTER 6
Tables

by Eric Ladd

In this chapter

Introduction to HTML Tables and Their Structure 184

The Table Tags 184

Alignment 187

Controlling Other Table Attributes 189

Spanning Multiple Rows or Columns 195

What Elements Can Be Placed in a Table Cell? 196

Table Sections and Column Properties 198

Tables as a Design Tool 202

Creating Tables with Web Page Authoring Tools 204

Introduction to HTML Tables and Their Structure

This chapter introduces you to tables as they have been written into the HTML 4.0 recommendation. Although tables are intended for the display of columnar data, you’ll find, as you progress through this chapter, that tables are much more than that—they are a bona fide page design tool as well.

To understand the basic table tags better, it helps to take a moment to consider how HTML tables are structured. The fundamental building blocks of an HTML table are cells, which can contain a data element of the table or a heading for a column of data. Related cells are logically grouped in a row of the table. The rows, in turn, combine to make up the entire table.

If you can keep this breakdown in mind as you read the next few sections, the syntax of the table tags will make much more sense to you (see “Table Sections and Column Properties,” later in this chapter). Remember

•  Cells are the basic units of a table; they can contain data elements or column headers.

•  Cells are grouped into rows.

•  Rows are grouped together to produce an entire table.

---

NOTE:  HTML 4.0 provides support for the treatment of table columns as well as rows. That means you can treat a column or columns of a table as a logical unit. This is particularly useful when you want to apply formatting instructions to an entire column or columns of data.

---

The Table Tags

Before delving into the more advanced uses of tables, it’s instructive to look at a table used for the purpose tables are intended: to display columns of data. The next three sections present the tags you need to create a simple table for this purpose.

All table-related tags occur between the <TABLE> and </TABLE> container tags. Any table-related tags occurring outside of these tags will be ignored.

A good habit you should get into immediately is to put the </TABLE> tag into your HTML file when you put the <TABLE> tag in. If you don’t have a </TABLE> tag and you go to a browser to preview your work, the browser won’t render the table. Browsers read through all the code to produce a table before rendering it. It has to do this to compute how much space it needs for the table and, after the amount of space is known and allocated, the browser goes back and fills in the cells. Without a </TABLE> tag, a browser can’t know that it has hit the end of a table and, therefore, won’t render any of it.

---

NOTE:  If you’re using an HTML-editing program that enables you to compose a table onscreen, you won’t have to worry about the <TABLE> and </TABLE> tags or any other table-related tag. The program will write the code to produce the table for you.

Additionally, most tag-based HTML editors can automatically insert a </TABLE> tag when you insert a <TABLE> tag. Make sure that this feature is turned on if you’re using a tag-based editing tool.

---

Creating a Table Row

Tables are made up of rows, so you need to know how to define a row. The <TR> and </TR> tags are used to contain the HTML tags that define the individual cells. You can place as many <TR> and </TR> tag pairs as you need inside a table, each pair accounting for one row.

So far, then, the code for a basic HTML table with m rows looks like

<TABLE>
   <TR> ... </TR>   <!-- Row 1 -->
   <TR> ... </TR>   <!-- Row 2 -->
   ...
   <TR> ... </TR>   <!-- Row m -->
</TABLE>

	Indenting your table code helps you keep better track of individual cells and rows.

Creating a Table Cell

Table cells come in two varieties: header cells for headers that appear over a column of data and data cells for the individual entries in the table.

A table header cell is defined with the <TH> and </TH> tag pair. The contents of a table header cell are automatically centered and appear in boldface, so typically, you don’t need to format them further.

In a standard table, headers usually compose the first row so that each column in the table has some type of heading over it. If the basic table you’re developing has n columns of data, the HTML for the table would look like

<TABLE>
   <TR>    <!-- Row 1 -->
      <TH>Header 1</TH>
      <TH>Header 2</TH>
      ...
      <TH>Header n</TH>
   </TR>
   <TR> ... </TR>   <!-- Row 2 -->
   ...
   <TR> ... </TR>   <!-- Row m -->
</TABLE>

Data cells are defined by the <TD> tag. Text in data cells is left justified by default. Any special formatting, such as boldface or italic, has to be done by including the appropriate formatting tags inside the <TD> and </TD> pairs.

If data cells make up the rest of the basic table you’re constructing, you’ll have the template shown in Listing 6.1:

Listing 6.1 A Basic Table Template

<TABLE>
   <TR>    <!-- Row 1 -->
      <TH>Header 1</TH>
      <TH>Header 2</TH>
      ...
      <TH>Header n</TH>
   </TR>
   <TR>    <!-- Row 2 -->
      <TD>Data element 1</TD>
      <TD>Data element 2</TD>
      ...
      <TD>Data element n</TD>
   </TR>
   ...
   <TR>    <!-- Row m -->
      <TD>Data element 1</TD>
      <TD>Data element 2</TD>
      ...
      <TD>Data element n</TD>
   </TR>
</TABLE>