Table Table Row Table Data Tags

Tables begin with a <table> tag. You delimit each row with a table row (<tr>) tag and each column with a table data (<td>) tag. The following HTML describes a simple two-row, two-column table:

Row 2, Col 2 </td> </tr> </table>

Warning Be very careful to close all the table tags. Some browsers, such as IE, will close the tags for you and the table will be displayed properly, but others will not, and the table will not be displayed at all or will be displayed incorrectly. Microsoft's documentation states that the end tags are optional for most table elements, but the end tags are optional only if the rendering engine is IE. The rule is this: Don't rely on the rendering engine to close the tags for you; explicitly close all tags.

As you can see from the previous code snippet, a table can contain an arbitrary number of rows, and each row may contain an arbitrary number of columns.

If you place the previous code snippet in a standard HTML template wrapper and view it in a browser, it's not particularly appealing—it looks like two tabbed columns (see Figure 2.15).

ft £xH r.iriir. r«Ji rtb

* - J .! J Jr-wo .JT^ J ..,- j- ■

U* In ] r.ij jk».4fc>. ji/af-a M«"

jj ¡ji< .. Jk ■

Figure 2.15: Simple HTML table (ch2-l4 .htm)

Fortunately, you can add attributes to the table tag to control its placement and improve its appearance. Attribute values for the table tag apply to all the columns and cells of the table unless you override them with attribute values for individual columns, rows, or cells. The following list contains the most common attribute values; you can find the rest in Appendix A.

align This attribute can take one of three values: left, right, or center. It controls the horizontal placement of the table on the page.

background This attribute, like the background attribute for the <body> tag, accepts a URL that references an image file. The browser displays the image with a z-order of zero, so all the table data plots on top of the background image.

bgcolor This attribute takes an HTML color value that controls the background color of the entire table. You can override the bgcolor value for any individual row or cell.

border This attribute takes an integer value that controls the width of the border around the table and around each individual cell. The default value is zero: no border.

cellpadding This attribute takes an integer value that controls the spacing between the contents of a cell and its border.

cellspacing This attribute takes an integer value that controls the spacing between cells.

cols This attribute specifies the number of columns in a table. It significantly increases the speed at which the browser renders a table. Without this attribute, the browser must parse the entire table to determine the maximum number of columns in a row, but with this attribute, the browser can begin rendering rows immediately.

height This attribute takes an integer value that informs the browser of the final height of the area required to render the table. Like the cols attribute, including the height significantly increases the speed at which the browser renders a table. You may specify the height in pixels or as a percentage of the height of the visible client area.

width This attribute takes an integer value that informs the browser of the final width of the area required to render the table. Like the cols and height attributes, including the width significantly increases the speed at which the browser renders a table. You may specify the width in pixels or as a percentage of the width of the visible client area.

If you take the table from the example at the beginning of this section, align it in the center of the page, specify the width and height, apply a caption, add a border, and pad the cells, the first two lines of the listing will look like this:

<table border="1" align="center" cellpadding="3"

cellspacing="2" width="60%" height="80%"> <caption>Simple Table With Formatting</caption>

If you look at the altered table in a browser, it looks like Figure 2.16.

fjfc £xH --W r.iialhi TvJl rtb

■J-to* - - J J '3 £ipiH J .

U* h* Jd ] r.tj j y+iU. yX.-JX-a jJWTUi2>/-i • 1» «i ■

jj -W+ *

■"■ rip fr TuH* Wir, F rmut»^

Figure 2.16: Simple table with borders (ch2-15.htm)

Vp- rfVN'WI

Figure 2.16: Simple table with borders (ch2-15.htm)

As you can see from the example, <tr> tags specify the table rows. You can use the align and bgcolor attributes with the <tr> tag. The <tr> tag can also take a valign attribute that controls the vertical alignment of the cell contents in that row. The possible values are baseline, bottom, center, and top.

The <td> tag accepts align, background, bgcolor, and valign attributes. In addition, the <td> tag can take colspan and rowspan attributes. The values for colspan and rowspan are integers. They specify the number of columns and rows over which the cell extends. You need these attributes when you have a table in which rows contain differing numbers of columns. For example, if you wanted to add a third row to the table in Figure 2.16 that contained only one column or wanted to add a cell that was twice the height of the cells in other rows, you could specify the cells as follows:

<td colspan="2" align="center" valign="center">

This is a double-width cell with centered contents. </td> </tr> <tr>

<td rowspan="2" width="50%" align="center" valign="center">

This is a double-height cell with centered contents. </td>

<td width="50%" >Normal-height cell</td> </tr> <tr>

<td width="50%" >Normal-height cell</td> </tr>

After adding the new rows, the table looks like Figure 2.17.

fcJ'IFWJFWlWl'JJ.W JU LIIM ll'U'l tt, t-t >W- fMli !1. rfct

-- ' 3 J»' _.r»i— ,f« J.jY t ■

jj , ¿Ck, urJfc ■

■ rf-bi TIN* Vb K-wrr.inrj

J

InJ.Cdl

i-:*. ], CJ :

h>t cd;

Tw! in ■ &ntb b*j}±EcJvn£ 1 iMJnxa

Figure 2.17: Table using colspan and rowspan attributes (ch2-16.htm)

Figure 2.17: Table using colspan and rowspan attributes (ch2-16.htm)

Was this article helpful?

0 0

Post a comment