Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

How to use HTML 3.2

Chapter 11 -- Using Tables

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.

How to Create a Simple Table

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.

Tip Sheet

  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 :

  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 :

  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 :

  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 :

  5. You can type all of your column headings one after another, each contained in its own <TH> and </TH> tag pair.
  6. 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 :

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

  8. 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 :

How to Format Tables

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.

Tip Sheet

  1. 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 :

  2. 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 :

  3. 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 :

  4. 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 :

  5. 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 :

  6. 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>.
  7. 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 :

  8. 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 :

  9. 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 :

  10. 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 :

  11. 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 :