Inside JavaScript

2017-07-07 02:10:07

The < TBODY > , <TFOOT> , and <THEAD> Elements

Since the early days, tables have become more elaborate, adding header, body, and footer elements, as well as column and row groups. The details of all of HTML are beyond the scope of this book, but here's an example putting these elements to work (note that all the features used here are supported fully only in the Internet Explorer):

(Listing 14-10.html on the web site)

<HTML> <HEAD> <TITLE> Tables with bodies, captions, and groups </TITLE> </HEAD> <BODY> <CENTER> <H1>Tables with bodies, captions, and groups</H1> <TABLE BORDER="2" WIDTH="90%" FRAME="HSIDES" RULES="GROUPS"> <CAPTION>Racing Times</CAPTION> <COLGROUP WIDTH="25%"> <COLGROUP ALIGN="CENTER"> <COL SPAN="2" WIDTH="30%"> <COL SPAN="1" WIDTH="15%" </COLGROUP> <THEAD> <TR> <TH>Car</TH> <TH>Race</TH> <TH>Owner</TH> <TH>Time</TH> </TR> </THEAD> <TFOOT> <TR> <TH>Car</TH> <TH>Race</TH> <TH>Owner</TH> <TH>Time</TH> </TR> </TFOOT> <TBODY> <TR> <TD ALIGN="CENTER">69</TD> <TD>Chicago Trials</TD> <TD>Johnson</TD> <TD>5:33</TD> </TR> <TR> <TD ALIGN="CENTER">73</TD> <TD>Chicago Trials</TD> <TD>Chalmo</TD> <TD>6:41</TD> </TR> </TBODY> <TBODY> <TR> <TD ALIGN="CENTER">99</TD> <TD>Lotus Bowl</TD> <TD>Preston</TD> <TD>9:29</TD> </TR> <TR> <TD ALIGN="CENTER">21</TD> <TD>Lotus Bowl</TD> <TD>Liston</TD> <TD>12:23</TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

You can see the results in Figure 14.6.

Figure 14.6. Using table bodies, captions, and groups.

You can find an overview of the properties and methods of the <TBODY> , <TFOOT> , and <THEAD> elements in Table 14.15, their properties in depth in Table 14.16, and their methods in Table 14.16. JavaScript's core HTML properties, methods, and events, which we covered in Chapters 5 and 6, also apply to the <TBODY> , <TFOOT> , and <THEAD> elements as well.

Table 14.15. Overview of the Properties and Methods of the <TBODY> , <TFOOT> , and <THEAD> Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to these elements.)

Properties	Methods
`align`	`deleteRow`
`bgColor`	`insertRow`
`ch`	`moveRow`
`chOff`
`rows`
`vAlign`

Table 14.16. The Properties of the <TBODY> , <TFOOT> , and <THEAD> Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to these elements.)

Property	NS2	NS6	IE4	IE5	IE5.5	IE6
`align`		x	x	x	x	x
	Read/write
	Sets or gets the alignment of the element. Set to `"center"` (aligns to the center), `"justify"` (aligns to the left and right edge), `"left"` (the defaultaligns to the left edge), or `"right"` (aligns to the right edge).
`bgColor`		x	x	x	x	x
	Read/write
	Sets or gets the background color for the element. Set to a color triplet (such as `"ffffff"` ) or a predefined color the browser understands (such as `"blue"` ).
`ch`		x				x
	Read/write
	Corresponds to the `CHAR` attribute, but doesn't actually do anything in either browser yet.
`chOff`		x				x
	Read/write
	Corresponds to the `CHAROFF` attribute, but doesn't actually do anything in either browser yet.
`rows`		x	x	x	x	x
	Read-only
	Holds a collection of all rows in the element (that is, all `<TR>` elements). This collection enables you to address each row individually.
`vAlign`		x	x	x	x	x
	Read/write
	Sets or gets how contents are aligned within the row that contains them. Set to `"middle` `"` (the defaultaligns the text in the middle), `"baseline` `"` (aligns to the base line), `"bottom` `"` (aligns the text at the bottom), or "top " (aligns the text at the top).

Table 14.17. The Methods of the <TBODY> , <TFOOT> , and <THEAD> Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to these elements.)

Method	NS2	NS6	IE4	IE5	IE5.5	IE6
`deleteRow`		x	x	x	x	x
	Returns: Nothing
	Removes the specified row from the table and from the `rows` collection.
	Syntax: `element` `.deleteRow([` `index` `])` , where `index` is the index of the row in the `rows` collection.
`insertRow`		x	x	x	x	x
	Returns: New row
	Inserts a new row into a table.
	Syntax: `element` `.insertRow(` `index` `)` , where `index` is the position at which to insert the row in the `rows` collection. Set `index` to -1 to append a row to the end of the table. See "Using Tables" in this chapter for an example.
`moveRow`				x	x	x
	Returns: `<ROW>` element
	Moves a row to a new position.
	Syntax: `element` `.moveRow(` `source` `,` `target` `)` , where `source` is the index in the `rows` collection of the table row you want to move and `target` is the index that specifies where the row should be moved to in the `rows` collection.