Teach Yourself Web Publishing with HTML 4 in 21 Days

Chapter 11: Tables

 

 

Objectives:

This chapter takes us into more advanced page construction methods. It discusses tables, an important part of HTML. The objectives important to this chapter are:

  • using tables in web pages
  • table definition
  • table components : captions, rows, headings, data cells
  • controlling cell alignment
  • multi-column and multi-row cells
  • using color in tables
  • proper table use
Concepts:

Tables were added to HTML in 1995. Unlike the freeform nature of most of the language, they can be considered to be a force of order, imposing the rows and columns of a spreadsheet on your pages.

Ms. Lemay is the first to admit that creating tables by hand is a pain. However, we should do it at least once, to learn how the tags actually work, and for the practice in correcting whatever goes wrong in the editor you choose to use in your career. The automated table features of standard web development tools like Dreamweaver are best appreciated by those who have had to carve tables by hand. Keep in mind, that when something goes very wrong, you will have to go into the HTML code itself to correct errors. You must know how to code by hand in order to fix pages.

Laura defines four structural parts to a table:

  • the caption - goes above the table, naming it
  • headings - labels for columns and rows that explain the data
  • data - the values, strings, images, etc. that we find in the table
  • cells - the structures at the intersections of rows and columns that hold data

The <table> tag is a paired tag that encloses the entire table you create. It can take several attributes, such as the border option which controls whether the table has a visible border, or no border, as on this page. (Yes, you are looking at data in a table cell right now.)

Between the opening and closing table tags, you use <tr> tags to start rows and </tr> tags to end rows. Inside rows, you use <td> tags to begin cells and </td> to end cells. Why <td>? Because the tags are meant to enclose table data. The basic format is:

<table>
<tr>
<td>
Contents of a cell go here
</td>
</tr>
</table>


This sentence is in a table with one row and one cell. I used <table>, <tr>, and <td> tags, with no attributes, like the example above. Not very impressive, is it?

This sentence is an identical table, with the border attribute set to "2". Looks like a box.

The examples in this chapter show variations on this construction. They also show the use of <th> tags, which mark table headings. If placed in a row by themselves, table headings become column headings. If placed at the beginning of rows, they become row headings. Both types are optional.

Column Heading, <th></th> pair in a row by themselves.
The heading is above this cell. It centered automatically. The row above does not contain a <td> pair.

Row Heading, <th> pair used instead of a <td> pair at the start of a row The heading is to the left of this cell. It centered automatically.

If you place no data inside a cell, you get an empty cell, but it may not display correctly. Despite the illustration on page 315, you are not stuck with small cells. The width and height of a cell adjust to the contents, as in all the examples above.. Neighboring cells expand to match the dimensions of full cells when they share cell walls. Cells expand as necessary to make the table symmetrical. In geometry class, the shape of a table would be called regular, because it has no jagged edges or short sides. It is sometimes desirable to limit the width of a cell containing text by inserting <br /> tags every few words.

If used, the <caption> tag goes inside the table, right after the opening <table> tag. It is also a paired tag, and it is optional.

This is a caption. Maybe it should be bold?
Captioned table These cells are in a captioned table.

Tables can be aligned, like images, to have text flow around them. In fact, the table you are looking at is right aligned ( <table align="right"> ), to avoid the color stripes in the margin of this page.

Figure 11.16 shows the six ways you can align data inside a cell. Horizontal alignment is done with the align attribute, and vertical alignment is done with the valign attribute. These attributes can be used in the <tr> tag, the <th> tag, and the <td> tag.

Cells are allowed to span multiple columns and/or rows. In figure 11.18, we see examples of the three possibilities. Use the colspan attribute to specify the number of columns to span, the rowspan attribute for the number of rows to span, and both to do both. This is Laura's figure 20, first as she did it, and second, slightly modified:

Laura's Figure 11.20
  Ring
Clearance
Piston Upper 3mm
Lower 3.2mm

My Figure 11.20 Modification
Ring Clearance
Piston Upper 3mm
Lower 3.2mm

Notice, in these examples, that Laura used a non-breaking space (&nbsp;) to cause her upper left cell to appear as a normal-but-empty cell. If she had actually left that cell empty, it would look as it does in my modification: abnormal. Which is better? This is a table that is not meant to be symmetrical, so it is a choice for the designer. Notice that she also used several <th> sets, to denote a heading and subheadings in the rows. She used <colspan> to cause the first cell to span two columns, and <rowspan> to cause the "Piston" cell to span two rows.

In order to control the size of cells, you may want to use the <Br / > tag in the midst of the data. Laura used one in her example above. I removed it in mine. If you want to make a wide cell, you can use the nowrap attribute in the <th> and <td> tags, until this deprecated method is ignored.

More control is possible if you use width attribute of the <table> tag. I have done so with the main table on this page. I set that table to be 75% of the page. This attribute can also be used in the <td> tag, and again, the recommended method is to specify a percentage (this time, a percentage of the width of the table, not of the page). Of course, this is deprecated, so using a style for the table is the new way.

If you have not turned off your border, you can vary a table's appearance several ways.

  • width - sets the width of the border in pixels; can be 0, which means no border
    Bordered Table
    Bordered Table This border is set to 6 pixels.

  • cellspacing - sets the thickness of internal cell borders
    Cellspacing Table
    Cellspacing Table This border is set to 2, but the cellspacing is set to 6.

  • cellpadding - sets the amount of white space around text inside cells
    Cellpadding Table
    Cellpadding Table This border is set to 2, but the cellpadding is set to 6.
All the table tags described so far, <table>, <tr>, <th>, and <td>, can use the bgcolor attribute with a hexadecimal triplet to change the background color of the area it controls. You can also use certain color names, but hex triplets are surer.
Cellpadded Table with Color
This is a <th> cell, with bgcolor set to ffff00 This cell does not have a background color. The one on the left does.

More modifications are possible. What if you want the table to have color in the border?
Cellpadded Table with Color
This is a <th> cell, with bgcolor set to ffff00 This table has its bordercolor set to "blue". This worked in IE and Navigator.

What if one color is not enough for your border? You had better view it in Internet Explorer.
Cellpadded and Cellspaced Table with Color
This is a <th> cell, with bgcolor set to ffff00 This table has its bordercolorlight set to "blue" and its bordercolordark set to "navy". This worked in IE, but not in Navigator.

On page 343, some HTML 4 elements are introduced. The <colgroup> tag is used to specify something to do with one or more columns in a table. This seems odd, since tables are created with rows and cells, not with columns. Think of this as an enhancement to the appearance of the table. Note, in Laura's example (figure 27), that the <colgroup> tags are simply formatting commands that come after the <table> tag, but before the first <tr> tag. In other words, they do not enclose any <tr>, <td>, or <th> tags.

Laura's figure 11.27, set to use 90% of available space.
Class Room Time
Biology Science Wing, Room 102 8:00 AM to 9:45 AM
Science Science Wing, Room 110 9:50 AM to 11:30 AM
Physics Science Wing, Room 107 1:00 PM to 2:45 PM
Geometry Mathematics Wing, Room 236 8:00 AM to 9:45 AM
Algebra Mathematics Wing, Room 239 9:50 AM to 11:30 AM
Trigonometry Mathematics Wing, Room 245 1:00 PM to 2:45 PM

The next section is even more ambitious. It concerns some tags that do enclose other tags, and how you might use them with frame and rule attributes of the body tag. The following table is from Laura's figure 11.29. It looks fine in Internet Explorer 4.72, but does not look right in Netscape Navigator 4.72. Her intention is to have a header row and a footer row in the table, to make reading a long table easier. I will not discuss this in detail, since it only works in one browser today.

Also, she has used the frame attribute of the <body> tag to draw only the horizontal sides of the table: <body frame="hsides">. She has also set the rule attribute so that internal table lines (rules) are only drawn between groups of rows: <body rules="groups">. Again, this is not a universally accepted command at this point.

Science and Mathematic Class Schedules
Class Room Time
Class Room Time
Biology Science Wing, Room 102 8:00 AM to 9:45 AM
Science Science Wing, Room 110 9:50 AM to 11:30 AM
Physics Science Wing, Room 107 1:00 PM to 2:45 PM
Geometry Mathematics Wing, Room 236 8:00 AM to 9:45 AM
Algebra Mathematics Wing, Room 239 9:50 AM to 11:30 AM
Trigonometry Mathematics Wing, Room 245 1:00 PM to 2:45 PM

Since tables can be hard to do, Ms. Lemay suggests some alternatives:

  • a list - it works most of the time, if the table would not have been wide
  • an image - create an image of a real table and show that. Bad idea, really. This can result in some huge images. Also, images are not as easily modified as tables.
  • preformatted text - this preserves tabs and spacing. This works, but only for simple tables. Preformatting does not allow dynamic wrapping and resizing.
  • an external link - mainly for older browsers that don't support tables