The TABLE Element: Creating Tables


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.

graphics/14fig05.gif

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.



Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net