Chapter 11
Using Tables
CONTENTS
The most significant addition to HTML 3.2 is support for tables.
Tables give HTML authors much greater control over the display
and layout of their pages. Typically, you would use tables to
display any type of data that looks best in rows and columns.
A good rule of thumb is if it looks good as a spreadsheet, then
it belongs in a table.
Tables aren't just for numerical data. They can be used to creatively
solve a number of challenges with presenting information in HTML.
Tables can be used to enhance a number of existing HTML elements,
such as lists and forms. You can even use tables to gain precision
control over the layout of your HTML document.
Of course, there's always a catch. Tables are notoriously difficult
and tedious to create in HTML. And because the specification for
HTML 3.2 is still not final, some of the formatting details for
tables are subject to change.
Creating a simple table in HTML is fairly straightforward. All
you need to do is supply the data. The client-side Web browser
takes care of all the dirty work by determining how to display
it.
The key thing to remember about tables in HTML is that they are
organized in rows, which go horizontally from left to right. Once
you begin to think of the data you want to place in your table
in terms of rows, you'll be all set to perform some HTML wizardry.
In this section, you'll get started by stepping through the process
of creating your first table in HTML.
- As you can see, typing in table data for every cell can quickly
become monotonous. The good news is that there are a number of
software programs being designed to take the pain and suffering
out of creating tables. There are even plug-ins under development
for popular spreadsheet programmers and word processors that will
allow you to export a table in ready-to-run HTML. By the time
you read this, most of these programs should be on the market.
You can keep up to date on the availability of these by monitoring
the comp.infostystems.www.authoring.html USENET newsgroup.
Figure 11.1 :
- Type <TABLE BORDER> in your HTML document to
create a table with a thin border around all of the table cells.
Figure 11.2 :
- You can type in a caption for your table, which most browsers
will display at the top. It's sometimes easier to think of the
caption as the title of your table. Type <CAPTION>,
followed by the actual text of your table caption. Then type
</CAPTION> to close the tag.
Figure 11.3 :
- Tables are built row by row using the <TR> and </TR>
tag pair. To start your first table row, type <TR>.
Figure 11.4 :
- Now it's time to enter in the data for the individual cells
of the table. Because this is the first row of the table, it's
likely that you'll want this row to contain headings for each
of the columns of data. Table headings are created using the <TH>
and </TH> tag pair. To create a heading for a column of
last names, you would type <TH>Last Name</TH>.
Figure 11.5 :
- You can type all of your column headings one after another,
each contained in its own <TH> and </TH> tag pair.
- After you've completed your first row, type </TR> to
finish it. Since you'll be adding another row immediately after
it, you can type <TR> on the next line to start the new
row.
Figure 11.6 :
- Now you can start adding the actual table data cell by cell
using the <TD> and </TD> tag pair. To enter the data
in the first cell of the second row, type <TD> followed
by the actual data and the closing </TD> tag.
Figure 11.7 :
- Type in your remaining data, using the <TD> and </TD>
tags to separate each cell and the <TR> and </TR>
tags to separate each row. When you're finished, type </TABLE>
to signal the end of the table.
Figure 11.8 :
Because HTML is a markup language and not a layout language, the
actual display of HTML tables is left up to the Web browser. The
height and width of the individual cells are calculated by the
browser based on their contents. In general, browsers do a good
job of displaying table contents all by themselves. Sometimes,
however, you'll want to exercise a little more control over how
your tables are displayed. HTML 3.2's table formatting codes let
you do just that.
- You can create a table with no border to gain greater control
over the layout of your HTML document. Borderless tables are ideal
for creating columns of text and precision layout of images.
- You can nest tables within other tables. Just include a <TABLE>
and </TABLE> tag pair inside a cell of the original table.
Creating nested tables gives you very precise control over the
layout of your HTML document, but requires careful planning.
- It always helps to sketch out your table on paper before coding
it in HTML. This will help you correctly place your table headings
and calculate the number of cells for each row. Tables with an
incorrect number of cells can produce unpredictable results when
viewed by a Web browser. Taking a few minutes to plan out your
table can save you hours of fixing HTML code.
- To create a table with no border at all, simply type <TABLE>.
You can also give your table a 3-D beveled look by adjusting the
size of the outside border. This feature is only supported by
Netscape browsers. To adjust the size of the outside table border,
use the BORDER attribute. For example, to create a table with
a border that is 8 pixels wide, type <TABLE BORDER=8>.
Figure 11.9 :
- Netscape also adds extensions to give you even greater control
over the borders and spacing of the cells inside your table. To
change the size of the internal borders, add the CELLSPACING attribute
to your <TABLE> tag. For example, to create a table with
a wide internal border, type <TABLE BORDER CELLSPACING=5>.
Figure 11.10 :
- You can also "pad" the individual cells of your
table to add space on all sides. This keeps the border from running
up against the actual cell contents. It's very useful if you plan
on including images inside your table. To add space, use the CELLPADDING
attribute inside your <TABLE> tag. To add 3 pixels of space
on each side of every cell, type <TABLE CELLPADDING=3>.
Figure 11.11 :
- You can format text in each individual cell using all of the
standard character-level markup codes, such as <B>, <I>,
and <STRONG>. You can also include line breaks inside cells
using the <BR> tag. Each cell can be formatted independently
of the others.
Figure 11.12 :
- To control the alignment of text inside cells, use the ALIGN
and VALIGN attributes with the standard commands, such as LEFT,
RIGHT, and CENTER. You can set the cell alignment for an entire
row by placing these attributes in the <TR> tag. You can
even align the contents of each cell individually if you're so
inclined. For example, to center text within an individual cell
both vertically and horizontally, type <TD ALIGN=CENTER
VALIGN=CENTER>. Individual cell alignments will override
any settings for the row.
Figure 11.13 :
- Sometimes you'll want an individual cell to span across multiple
columns or rows. This is easy to do using the ROWSPAN and COLSPAN
attributes inside the cell's <TD> tag. To force a cell to
span vertically down across three rows, type <TD ROWSPAN=3>.
To force a cell to span horizontally from left to right across
several columns, use the COLSPAN attribute inside the <TD>
tag. For example, to span a cell across two columns, type <TD
COLSPAN=2>.
- You can gain even more precise control over the size and appearance
of your table using the WIDTH attribute. The WIDTH attribute can
be applied to both the entire table as well as individual cells.
You can specify an exact width for the table or set the width
to be a percentage of the visible screen.
Figure 11.14 :
- To specify an exact width for your table in pixels, set the
WIDTH attribute to an absolute number. For example, to force a
table to be exactly 400 pixels wide, type <TABLE WIDTH=400>.
Figure 11.15 :
- You can also set the table width to be relative to the space
between the left and right margins of the current window. This
means the table will resize along with the Web browser. To set
the table width equal to two-thirds of the screen, type <TABLE
WIDTH=66%>.
Figure 11.16 :
- You can apply width settings to columns by placing the WIDTH
attribute inside a <TH> or <TD> tag. The width can
be indicated using absolute or relative numbers. When you use
a percentage value in individual cells, the width is relative
to the table, not the full screen. For example, to set a column
width to one-half the total width of the table, type <TD
WIDTH=50%>.
Figure 11.17 :
- You can also control how the internal cell borders are displayed
using the RULES attribute. The possible values for RULES are ALL,
the default, which displays all of the internal borders; NONE,
which disables internal borders; COLS, which places borders only
between columns; and ROWS, which places borders only between rows.
For example, to place internal cell borders between columns only,
you would type <TABLE ROWS=COLS>. As with the FRAME
attribute, the RULES attribute is new to HTML3 and is not widely
supported.
Figure 11.18 :
