The <TABLE> Element: Creating Tables As mentioned in the beginning of the chapter, tables are great for letting you format text. Tables started off just as rectangular grids of cells containing text, but they've taken off from there, and now support images, column groups, footers, headers, and so on. Here's a basic table to get us started. You create the table with the <TABLE> element, create the rows in the table with the <TR> element, the headers for columns with <TH> elements, and display the actual data in each cell with the <TD> element: (Listing 14-09.html on the web site) <HTML> <HEAD> <TITLE> HTML Tables </TITLE> </HEAD> <BODY> <H1> HTML Tables </H1> <TABLE BORDER="1"> <TR> <TH ROWSPAN="3">Tic<BR>Tac<BR>Toe</TH> <TD>X</TD> <TD>O</TD> <TD>X</TD> </TR> <TR> <TD>O</TD> <TD>X</TD> <TD>O</TD> </TR> <TR> <TD>X</TD> <TD>O</TD> <TD>X</TD> </TR> </TABLE> </BODY> </HTML> You can see the results in Figure 14.5. Figure 14.5. Creating an HTML table.  I'll start with the <TABLE> element. You can see an overview of the properties, methods, and events of this element in Table 14.7, its properties in depth in Table 14.8, its methods in Table 14.9, and its events in Table 14.10. Remember that JavaScript's core HTML properties, methods, and events, which we covered in Chapters 5 and 6, apply to the <TABLE> element as well. Table 14.7. Overview of the Properties, Methods, and Events of the <TABLE> Element (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.) | Properties | Methods | Events | | align | createCaption | onscroll | | background | createTFoot | | | bgColor | createTHead | | | border | deleteCaption | | | borderColor | deleteRow | | | borderColorDark | deleteTFoot | | | borderColorLight | deleteTHead | | | caption | firstPage | | | cellPadding | insertRow | | | cellSpacing | lastPage | | | cells | moveRow | | | cols | nextPage | | | dataPageSize | previousPage | | | frame | refresh | | | height | | | | rows | | | | rules | | | | summary | | | | tBodies | | | | tFoot | | | | tHead | | | | width | | | Table 14.8. The Properties of the <TABLE> Element (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.) | Property | NS2 | NS3 | NS4 | NS6 | IE3a | IE3b | IE4 | IE5 | IE5.5 | IE6 | | align | | | | x | | | x | x | x | x | | | Read/write | | | Sets the alignment of the table in the page. Set to "right" , "left" , or "center" . The <TABLE> element's ALIGN attribute is deprecated in HTML. | | background | | | | | | | x | x | x | x | | | Read/write | | | Sets or gets the background picture behind the text and graphics in the table. Set to the URL of an image. | | bgColor | | | | x | | | x | x | x | x | | | Read/write | | | Sets or gets the background color for the table. Set to a color triplet (such as "ffffff" ) or a predefined color the browser understands (such as " magenta " ). | | border | | | | x | | | x | x | x | x | | | Read/write | | | Corresponds to the BORDER attribute. Sets or gets the border width. Set this property to an integer value, in pixels; setting it to zero or omitting the BORDER attribute removes the border. | | borderColor | | | | | | | x | x | x | x | | | Read/write | | | Sets or gets the border color. Set to a color triplet (such as "ffffff" ) or a predefined color the browser understands (such as "coral" ). | | borderColorDark | | | | | | | x | x | x | x | | | Read/write | | | Holds a color used for shading effects to make the table look "raised." Set to a color triplet (such as "ffffff" ) or a predefined color the browser understands (such as "cyan" ). | | borderColorLight | | | | | | | x | x | x | x | | | Read/write | | | Holds a color used for shading effects to make the table look "raised." Set to a color triplet (such as "ffffff" ) or a predefined color the browser understands (such as "paleblue" ). | | caption | | | | x | | | x | x | x | x | | | Read/write | | | Holds the table's caption, set to a text string. | | cellPadding | | | | x | | | x | x | x | x | | | Read/write | | | Holds the cell padding between a cell's contents and the cell walls. Set to an integer value, in pixels. | | cellSpacing | | | | x | | | x | x | x | x | | | Read/write | | | Holds the spacing between cells. Set to an integer value, in pixels. | | cells | | | | | | | | x | x | x | | | Read-only | | | Holds a collection of all cells in the table (that is, all <TD> and <TH> elements). This collection enables you to address each cell individually. | | cols | | | | | | | x | x | x | x | | | Read/write | | | Holds the number of columns in the table, corresponding to the COLS attribute. This property holds an integer. | | dataPageSize | | | | | | | x | x | x | x | | | Read/write | | | Sets or gets the number of records displayed in a table bound to a data source. Holds an integer. | | frame | | | | x | | | x | x | x | x | | | Read/write | | | Sets or gets the way the border frame around the table is displayed. Holds "void" (the defaultall outside table borders are removed), "above" (border on the top side of the border displays), "below" (border on the bottom side of the table displays), "border" (borders on all sides of the table display), "box" (borders on all sides of the table display), "hsides" (borders on the top and bottom sides of the table display), "lhs" (border on the left side of the table displays), "rhs" (border on the right side of the table displays), or "vsides" (borders on the left and right sides of the table display). | | height | | | | x | | | x | x | x | x | | | Read/write | | | The height of the table, measured in pixels. Set to an integer value. | | rows | | | | x | | | x | x | x | x | | | Read-only | | | Holds a collection of all rows in the table (that is, all <TR> elements). This property enables you to address each row individually. See "Using Tables" in this chapter for an example. You can access rows by number or name. In the Internet Explorer, you can access rows with the same name using a second, numeric index like this: rows["row1", 2] . | | rules | | | | x | | | x | x | x | x | | | Read/write | | | Sets or gets which inner borders are displayed. Set to "all" (borders display on all rows and columns), "cols" (borders display between all table columns), "groups" (horizontal borders display between all <THEAD> , < TBODY > , and <TFOOT> elements), "vertical" (borders display between all <COLGROUP> objects), "none" (no interior table borders), or "rows" (horizontal borders display between every table row). | | summary | | | | x | | | | | | x | | | Read/write | | | Sets or gets a description of the table. Set to a text string. Intended for use in nonvisual media. | | tBodies | | | | x | | | x | x | x | x | | | Read-only | | | Holds a collection of all <TBODY> elements objects in the table. | | tFoot | | | | x | | | x | x | x | x | | | Read-only | | | Holds the <TFOOT> element of the table, if there is one. | | tHead | | | | x | | | x | x | x | x | | | Read-only | | | Holds the <THEAD> element of the table, if there is one. | | width | | | | x | | | x | x | x | x | | | Read/write | | | Holds the width of the table, in pixels. Set to an integer. | Table 14.9. The Methods of the <TABLE> Element (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.) | Method | NS2 | NS3 | NS4 | NS6 | IE3a | IE3b | IE4 | IE5 | IE5.5 | IE6 | | createCaption | | | | x | | | x | x | x | x | | | Returns: <CAPTION> object | | | If no caption exists, the createCaption method creates an empty table caption, adds it to the table, and returns it. | | | Syntax: table .createCaption() . | | createTFoot | | | | x | | | x | x | x | x | | | Returns: <TFOOT> object | | | Creates an empty <TFOOT> element for the table. | | | Syntax: table .createTFoot() . | | createTHead | | | | x | | | x | x | x | x | | | Returns: <THEAD> object | | | Creates an empty <THEAD> element for the table. | | | Syntax: table .createTHead() . | | deleteCaption | | | | x | | | x | x | x | x | | | Returns: Nothing | | | Deletes the caption of a table. | | | Syntax: table .deleteCaption() . | | deleteRow | | | | x | | | x | x | x | x | | | Returns: Nothing | | | Removes the specified row from the table and from the rows collection. | | | Syntax: table .deleteRow([ index ]) , where index is the index of the row in the rows collection. | | deleteTFoot | | | | x | | | x | x | x | x | | | Returns: Nothing | | | Deletes the <TFOOT> element of this table. | | | Syntax: table .deleteTFoot() . | | deleteTHead | | | | x | | | x | x | x | x | | | Returns: Nothing | | | Deletes the <THEAD> element of this table. | | | Syntax: table .deleteTHead() . | | firstPage | | | | | | | | x | x | x | | | Returns: Nothing | | | Displays the first page of records in the data set to which the table is bound. | | | Syntax: table .firstPage() . | | insertRow | | | | x | | | x | x | x | x | | | Returns: new row | | | Inserts a new row into a table. | | | Syntax: table .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. | | lastPage | | | | | | | | x | x | x | | | Returns: Nothing | | | Displays the last page of records in the data set to which the table is bound. | | | Syntax: table .lastPage() . | | moveRow | | | | | | | | x | x | x | | | Returns: <ROW> element | | | Moves a row to a new position. | | | Syntax: table .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. | | nextPage | | | | | | | x | x | x | x | | | Returns: Nothing | | | Displays the next page of records in the data set to which the table is bound. | | | Syntax: table .nextPage() . | | previousPage | | | | | | | x | x | x | x | | | Returns: Nothing | | | Displays the previous page of records in the data set to which the table is bound. | | | Syntax: table .previousPage() . | | refresh | | | | | | | x | x | x | x | | | Returns: Nothing | | | Refreshes the contents of the table, redisplaying them. | | | Syntax: table .refresh() . | Table 14.10. The Event of the <TABLE> Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.) | Event | NS2 | NS3 | NS4 | NS6 | IE3a | IE3b | IE4 | IE5 | IE5.5 | IE6 | | onscroll | | | | x | | | x | x | x | x | | | Occurs when the user moves the thumb/scroll box in the scrollbar. | |
