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:
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 <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:
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.
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.
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:
Notice, in these examples, that Laura used a non-breaking space ( ) 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
More modifications are possible. What if you want the table to have color in the border?
What if one color is not enough for your border? You had better view it in Internet Explorer.
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.
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:
Since tables can be hard to do, Ms. Lemay suggests some alternatives: