HTML, Page 5

Tables

Tables have three basic components:  The table itself <table>...</table>, the Rows in the table <tr>...</tr>, and the cells, or columns, within the rows <td>...</td>.  Beyond that, there are caption, border, alignment, width, span, padding and spacing elements.

To begin and end a table, use the <TABLE> open and </TABLE> close tags. Then nest the rest, depending on how many rows and columns you want, etc.

Simple Table Commands

• <TABLE> starts and ends the entire thing, just like with other tag commands.
• <CAPTION> and </CAPTION> places a caption over the table that is bolded and centered.  This is totally optional.
• <TR> is used when you want a new Table Row to begin, otherwise it will keep going to the right.  End every table row with an </TR>.

<TH>, or Table Header cell, which is automatically bold and centered. Table header cells can contain other attributes to determine the characteristics of the cell and/or its contents, like alignment, etc.
• <TD>, or Table Data, is in front of every piece of information you want in a cell or column, within or nested in the <TR>...</TR> tags. End each one that you open with an </TD>.
• </TABLE> ends the table, of course.

<TABLE> <TR>   <TH>Name</TH> <TH>Address</TH> <TH>Phone</TH> </TR> <TR>   <TD>Mrs. Williams</TD>  <TD> </TD>  <TD>427-3600</TD> </TR> <TR>   <TD>Mrs. Hill</TD>   <TD> </TD>   <TD>427-3736</TD> </TR> </TABLE>

Name Address Phone Mrs. Williams 427-3600 Mrs. Hill 427-3736

Inside of the <TABLE> tags:

BORDER tells the table how large the border or outside line should be in terms of pixels. No BORDER command or BORDER=0 places no visible border on the edge.

CELLSPACING (all one word) is the amount of space between the cells. Keep this small.

CELLPADDING (all one word) is the amount of space (or padding) between the cell border and the cell contents. In this case, sometimes bigger is better.

WIDTH sets the percentage or pixel width of the Table on the page.  It is best to use a percentage size, that way it will resize for different screen sizes or resolutions.

ALIGN places the Table on either the Left, Right or Center of the screen.  Left and Right are useful when wrapping text around the table.

Inside of the <TR> tags:

ROWSPAN creates a row that stretches of spans more than one row and is measured by how many rows to span.

Inside of the <TD> tags:

WIDTH, similar to the WIDTH command for the Table, tells the column or cell how wide to be within the Table.  Make sure that the sum of the cell or <TD> widths is either 100% of the Table (if using percentages) or the overal pixel size of the Table (if using pixels).

COLSPAN allows the cell or column to span or stretch across multiple columns and is measured by how many columns to span.  It cannot, however span across more columns than are present in the table.

VALIGN changes the vertical alignment (TOP, BOTTOM, or MIDDLE) of the contents in the cell.

ALIGN changes the horizontal alignment (LEFT, RIGHT, or CENTER) of the contents in the cell.

BGCOLOR sets a background color for the cell in either Hex or standard color codes.

BACKGROUND adds an image background to the cell.

NOWRAP turns off text wrapping in a cell.

Let's give it a try:  Assignment #10
 

On-Line HTML Tutorials and Tips:
HTML Goodies
WebMonkey