Using Tables (Page 4)
- Page 1 -
- Page 3 - Page 4 - Page
How to create simple tables
How to format Tables
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
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
- Type <TABLE BORDER> in your HTML document
to create a table with a thin border around all of the table cells.
- 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.
- Tables are built row by row using the <TR> and
</TR> tag pair. To start your first table row, type <TR>.
- 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
- 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.
- 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.
- 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.
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
- 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>.
- 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>.
- 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.
- 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.
- 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.
- 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>.
- 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%>.
- 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%>.
- 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.
- Page 1 -
- Page 3 - Page 4 - Page