Tables

 

Table:   The command to start a table

TR:       Table Rows (“row” refers to both row and column)

TH:      Table Headers (the top row, used to describe each column’s contents)

TD:      Table Data Cells (the actual cells of the table)

 

Commands following TABLE but preceding TR:

Cellpadding:                 Spacing within cells

Cellspacing:                  Spacing between cells

Border:                         Puts a border (various sizes) around the table

Ailgn:                            Table position in the window (right / center / left)

Width:                          Table width

Caption:                       Adds a caption (top / bottom)

 

*          *          *          *          *

 

Try this (cut and paste) and see what results:

 

<TABLE Border="10" Cellpadding="3" Cellspacing="3" Align="center">
<CAPTION>UW-W Volleyball Results</CAPTION>
<TR> <TH>Game</TH> <TH>UW-W</TH> <TH>UCLA</TH> </TR>
<TR> <TD>1</TD> <TD>3</TD> <TD>2</TD> </TR>
<TR> <TD>2</TD> <TD>4</TD> <TD>1</TD> </TR>
<TR> <TD>3</TD> <TD>0</TD> <TD>8</TD> </TR>
<TR> <TD>4</TD> <TD>8</TD> <TD>7</TD> </TR>
<TR> <TD>5</TD> <TD>2</TD> <TD>1</TD> </TR>
</TABLE>

Now, play with the values and see how the table changes.  Note that I use TR to start every row of the table, and that I then nest within that <TR></TR> command either TH or TD.  I use TH for each of the two HEADERS I want (I need the command each time).  Similarly, I use TD for each data cell I want to insert.

 

I can also align the contents in each cell.  In the TABLE commands above, change each <TR> to <TR Align=”center”>.  No need to turn off the center command each time.

 

*          *          *          *          *

 

Getting Fancy

 

Suppose you want a table that looks something like this:

 

My Fancier Table

 

Big Ol’ Header

Smaller Header

Betty

Sue

Tom

 

Ed

Michael

Charlie

Tim

 

Well.  Try this!

 

<TABLE Border="1" Cellpadding="3" Cellspacing="3" Align="center">
<CAPTION>My Fancier Table</CAPTION>
<TR> <TH Colspan="3" Align="center" Valign="middle" Height="50" Nowrap>Big Ol’ Header</TH>
<TH Align="center" Valign="middle" Height="50">Smaller Header</TH> </TR>
<TR> <TD>Betty</TD> <TD>Sue</TD><TD>Tom</TD><TD rowspan=”2”>Ed</TD> </TR>
<TR> <TD>Michael</TD> <TD>Charlie</TD> <TD>Tim</TD> <TD>Carl</TD> </TR>
</TABLE>

 

Note that we’ve introduced a couple new commands:

 

Rowspan:         Number of rows spanned by cell

Colspan:           Number of columns spanned by cell

Valign:              Vertical alignment within a cell

Height:              Height of the cell

Nowrap:           Suppresses wordwrap within a cell

 

I would leave <valign> and <height> alone unless you want special sizing and just let the default features work for you.  You can also use <halign> for horizontal height within a cell and <width> to determine a cell’s width.  All of these commands can work following either the <TH> or the <TD> commands.

 

*          *          *          *          *

 

You can also add color to any or every cell.  In the sample above, change any <TH> or <TD> command by adding the background color command.  For instance: <TH bgcolor=”yellow”>.

 

Lastly, suppose you want a blank data cell.  Unfortunately, you cant’ just leave the space blank, or your table will look funny.  You have to enter a special command that tells browsers to show a blank data cell.  So try this: <TD>&nbsp;</TD>.

 

If you want to be ambitious, you can also create tables within tables.  See if you can figure that one out on your own.  Good luck!