Students will learn how to center their table, create borders, captions, how to create cell spans, and how to align data within cells.
You can horizontally center a table in your Web page by typing:
<CENTER> directly above the<TABLE> tag. 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 you can do it with the BORDER tag.
In the <TABLE> tag type BORDER=""?"" replacing the "?" with a number that represents the thickness in pixels.
CAPTION
You can add a caption at either the top or the bottom of your table. This will help to summarize the information in the table.
Type <CAPTION> below the <TABLE> tag. Type the text for the caption 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> table.
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 below 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 below 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 cell 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="?" attribute replacing the "?" with LEFT, CENTER, or RIGHT in the <TD> or <TH> tag.
You can also move the data to the TOP or the BOTTOM of each cell by using the VALIGN="?" VALIGN="?" attribute 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 ALIGN="?" attribute replacing the "?" with TOP or BOTTOM in the <TD> or <TH> tag.
The following is an example using tables:
| Heading 1 | Heading 2 | Heading 3 |
|---|---|---|
| Cell 1&4 | Cell 2 | Cell 3 |
| Cell 5 | Cell 6 |
| |
|
|
|
|
|
| |
|
||||
| |
|
||||