Debugger script
Dhtml css
|
|
If you want to go beyond creating basic tables, there are other things you can do to change the layout of tables, including adding a caption, setting column widths and row heights, controlling the vertical alignment of cell contents, and creating cells that span rows and columns.
The CAPTION element lets you specify a table caption that can be displayed above or below the table. Use the CAPTION element to add a caption above the table (see Figure 5.13):
<table align="center" border="6" cellspacing="6" cellpadding="6" width="75%"> <caption>Table I. First Quarter Sales Results</caption>
Current browsers are inconsistent in how they display vertical spacing below table captions. The only way to add relatively consistent vertical spacing below the table caption in current browsers is to use a style. Here is an example of using an inline style to set a bottom margin of 24 pixels for the CAPTION element:
<table align="center" border="6" cellspacing="6" cell- padding="6" width="75%"> <caption style="margin-bottom: 24px">Table I. First Quarter Sales Results</caption>
A table caption is displayed above the table body by default. To display the caption below the table, set an align="bottom" attribute in the CAPTION element (you will also need to change the style in the CAPTION element to style="margin-top: 24px"). You should not use the ALIGN attribute in the CAPTION element to horizontally align caption text, due to inconsistencies in browsers. Instead, nest the caption text in a left-aligned or a right-aligned paragraph:
The WIDTH attribute can be used in the top cell of a column to specify a recommended width for the entire column. Column widths can be set in either pixels or percentages, or in a combination of pixels and percentages.
Setting column widths in pixels is relatively straightforward, although you should eliminate any width set for the table as a whole if you are setting widths for all of the columns. Eliminate the WIDTH attribute set in the TABLE element, and then set the first column of row headings to a width of 80 pixels and the other columns to widths of 100 pixels (see Figure 5.14):
<table align="center" border="6" cellspacing="6" cellpadding="6"width="75%"> <caption style="margin-bottom: 24px">Table I. First Quarter Sales Results</caption> <tr><th width="80"></th> <th width="100">Jan</th> <th width="100">Feb</th> <th width="100">Mar</th> <th width="100">Totals</th></tr>
You can also set column widths as a percentage of the table width. Set the table width to 636 pixels, leave the first column set to 80 pixels, and set the remaining columns to 21 percent (see Figure 5.15):
<table align="center" border="6" cellspacing="6" cellpadding="6" width="636"> <caption style="margin-bottom: 24px">Table I. First Quarter Sales Results</caption> <tr><th width="80"></th> <th width="21%">Jan</th> <th width="21%">Feb</th> <th width="21%">Mar</th> <th width="21%">Totals</th></tr>
Setting the table width, in this case, is optional, since the pixel-width column is reduced compared to the percentage-width columns. If the other way around, however, Internet Explorer 6 expands the table to a 100% width, although this would seem to be a bug, since other browsers do not behave similarly. By setting a pixel-width for the table, the table width is locked in (at 636 pixels) and will not scale up or down if the browser window is resized.
When setting column widths, you can't cap the width of a table column. If the content of a table cell, such as an inline image or a particularly long word, exceeds the width you've set for the column, the column width is expanded to make allowance for the cell content. In at least one older browser, Netscape 4, a column width is collapsed down to the maximum content width, regardless of the width set for the column. A workaround is to use a spacer image (a transparent 1 Ч 1 pixel GIF image). An example spacer image, spacer.gif, is included in your MyHTML folder. Here's an example of inserting a spacer image in a table cell to enforce a column width of 150 pixels:
<td><img src="spacer.gif" height="1" width="150"></td>
You can also use the HEIGHT attribute in any TH or TD element within a row to set a row height other than the default. Set a height of 32 pixels for the first cell in the "Totals" row (see Figure 5.16):
<tr align="right"><th align="left" height="32">Totals</th> <td>$991,367</td> <td>$1,271,071</td> <td>$849,045</td> <td>$3,111,483</td></tr> </table>
As the preceding example shows, the default vertical alignment for table cells is middle-alignment. The VALIGN attribute can be set in the TR, TH, or TD elements to change the default vertical alignment of table cells. The allowed values are middle, top, bottom, and baseline. Set the "Totals" row to be bottom-aligned (see Figure 5.17):
<tr align="right" valign="bottom"><th align="left" height="32">Totals</th> <td>$991,367</td> <td>$1,271,071</td> <td>$849,045</td> <td>$3,111,483</td></tr> </table>
The baseline value is useful for setting different font sizes in different cells within a table row. Setting bottom-alignment for the row, in that case, would align the differently sized text along their descenders (the bottom of the y, g, or p characters), whereas setting baseline-alignment would cause the differently sized text to be aligned along their baselines (the bottom of the a, b, or c characters). If you want to see this for yourself, an example file, baseline.html, is included in the resources folder of your MyHTML folder that shows the contents of table cells vertically aligned along their baselines, rather than along the bottoms of the letterform's descenders.
Creating cells that can span columns or rows (or both) can provide you with many more options for the kinds of table designs you can create.
The COLSPAN attribute can be used in the TH or TD elements to create a table cell that spans multiple columns. Add a new row to the table that includes three cells, with the middle cell spanning three cells (see Figure 5.18):
<caption style="margin-bottom: 24px">Table I. First Quarter Sales Results</caption> <tr><th></th><th colspan="3">First Quarter Sales Report</th><th></th></tr> <tr><th width="80"></th> <th width="21%">Jan</th> <th width="21%">Feb</th> <th width="21%">Mar</th> <th width="21%">Totals</th></tr>
The number of cells plus the number of cells spanned in a row must equal the total number of cells (or columns) in the other rows within the table. There are five cells (or columns) in the other rows—thus the row just added includes two un-spanned cells and one spanned cell that spans three cells (2 + 3 = 5).
The ROWSPAN attribute can be used to span rows within a table. Spanning table rows works similarly to spanning columns, except that the cells spanned run down a column (rather than across in a row). Cells are spanned down from the cell where the ROWSPAN attribute is inserted. Any cells to be spanned in the following rows must be removed. Set the top row so it is bottom-aligned, add heading text to the two blank cells, and set those two cells so they both span two rows:
<caption style="margin-bottom: 24px">Table I. First Quarter Sales Results</caption> <tr valign="bottom"><th rowspan="2" width="80"> Sales<br>Agents</th><th colspan="3">First Quarter Sales Report</th><th rowspan="2" width="21%"> Quarter<br>Totals</th></tr>
Next, delete the first and last cells in the following row, since they are being spanned (see Figure 5.19):
<tr valign="bottom"><th rowspan="2" width="80">Sales<br>Agents</th><th colspan="3">First Quarter Sales Report</th><th rowspan="2" width="21%">Quarter<br>Totals</th></tr> <tr><th width="80"></th> <th width="21%">Jan</th> <th width="21%">Feb</th> <th width="21%">Mar</th> <th width="21%">Totals</th></tr>
|
|
Debugger script
Dhtml css
