TABLES

Tables allow you to control the placement of text and images on your Web Pages. The key to using tables is to plan the table before adding it to an HTML document. Use a storyboard to design tables on paper before inserting them into your page.

A table consists of:

ROW: Horizontal line(s) of data.
COLUMN: Vertical line(s) of data
CELLS: Area where ROWS and COLUMNS intersect

Note: A table can be with or without borders.

The following commands are used for making a table:

<TABLE> Comes before the text

</TABLE> Ends the table

<TH>: In front of the text you want as a header cell for your table

</TH> After the text

<TR> Comes before the text you want to appear in one row of the table

</TR> Comes at the end of each row

<TD> This comes in front of the text you want to display in a data cell

</TD> After the text

The following is an example using a table without borders:

<table> 
<tr>
  <th align=middle> Heading 1 </th>
  <th align=middle> Heading 2 </th>
  <th align=middle> Heading 3 </th>
</tr>
<tr>
  <td align=middle> Cell 1 </td>
  <td align=middle> Cell 2 </td>
  <td align=middle> Cell 3 </td>
</tr>
<tr>
  <td align=middle> Cell 4 </td>
  <td align=middle> Cell 5 </td>
  <td align=middle> Cell 6 </td>
</table>
</body>
</html>

You can horizontally center a table in your Web Page by typing: <CENTER> directly above the <TABLE> tag.

Be sure to also type </CENTER> directly below the </TABLE> tag.

BORDERS
If you would like to add a border around your table and also divide the individual cells, use the BORDER tag.
In the <TABLE> tag type BORDER=? replacing the ? with a number that represents the thickness in pixels (see example below). Practice with different thicknesses to see what happens with the appearance of the border.

CAPTION
To help summarize the information in the table, you can add a caption at either the top or bottom of your table.
Type <CAPTION> below the <TABLE> tag. Type the caption text and then close with the </CAPTION> tag.
If you want the caption to appear at the bottom of the table type ALIGN=BOTTOM in the <CAPTION> tag.

CELL SPAN

• You can combine two or more cells in a row or column to make one large cell. To span rows, in the <TH> or <TD> tag for the cell type ROWSPAN=? replacing the ? with the number of rows you want to span down.
• If you want to combine columns, in the <TH> or <TD> tag for the cell, type COLSPAN=? replacing the ? with the number of columns you want to span across.

ALIGNING DATA IN CELLS

• Data is automatically centered in each row of the table. To change it to LEFT, CENTER, or RIGHT simply use the ALIGN=? attribute, replacing the ? with LEFT, CENTER, or RIGHT in the <TR> tag before the row containing the data you want to align
• To align in only one cell, type ALIGN=?, replacing the ? with LEFT, CENTER, or RIGHT in the <TD> or <TH> tag.
• You can also move the data to the TOP or BOTTOM of each row by using VALIGN=?, replacing the ? with TOP or BOTTOM in the <TR> tag before the row containing the data you want to align vertically.
• To align in only one cell type VALIGN=?, replacing the ? with TOP or BOTTOM in the <TD> or <TH> tag.

The following is an example using a table with borders:

<table border=2 width="100%">
<tr>
   <th align=left> Heading 1 </th>
   <th align=center> Heading 2 </th>
   <th align=right> Heading 3 </th>
</tr>
<tr>
   <td rowspan=2 align=center> Cell 1 & 4 </td>
   <td align=center> Cell 2 </td>
   <td align=center> Cell 3 </td>
</tr>
<tr>
   <td align=center> Cell 5 </td>
   <td align=center> Cell 6 </td>
</tr>
</table>

Insert a similar table into your practice web page. Replace Headings and Cell numbers with words of your own. Include one cell or row span and use a variety of alignments. Save your source page and click Refresh to view your web page.