HomeMember List
Agenda
Educ Material
Free Services
Lesson 4
OBJECTIVE:
Use a table to design the content of a web page. You can not display columns of data, text, or images on a web page as easily as you can on a word processor, unless you place the data in the cells of a table.
A very long name, a very long address, a very long phone number
Short name, short addr, short phone
A very long name, a medium address, short phone
Sample of data in a table (in columns):
| A very long name, | a very long address, | a very long phone number |
| Short name, | short addr, | short phone |
| A very long name, | a medium address, | short phone |
but now showing the table (notice the 9 cells):
| A very long name, | a very long address, | a very long phone number |
| Short name, | short addr, | short phone |
| A very long name, | a medium address, | short phone |
Using a table to design a page:
We could place data, text, or images on some of the cells
and leave the other cells vacant to design the web page. This allows us to control the visitors eyes and emphasize whatever text or image we wish to emphasize. In the following example, which image is emphasized?
| This fellow is dressed in blue. |  | |
 | This fellow is wearing a red coat. | |
| This lady is under the spotlight. |  |
Tables need only 3 tags:
| <table> </table> | Covers the entire table |
| <tr> </tr> | For each row |
| <td> </td> | For each cell |
| | For each blank cell |
<table> <tr> <td> TEXT ONE </td>
<td> TEXT TWO </td> </tr> </table>
Some attributes for each tag:
<table border=1 cellspacing=0 cellpadding=10 bgcolor=blue width=500>
This table will show a thin border (border=1); thin cell walls (cellspacing=0); 10 pixels of space between the cell content and the cell wall (cellpadding=10); a blue background (bgcolor=blue); and measure 500 pixels across. <tr valign=top bgcolor=red>
This row will display the content at the top of the cells (valign=top); and a red background (bgcolor=red). <td rowspan=2 colspan=3 align=right width=25%>
This cell will span 2 rows (rowspan=2); will span 3 columns (colspan=3); and show the content right justified (align=right); and will measure 25% of the entire row.
To test yourself, create a table composed or 3 rows and 2 columns. Make each row a different color. On the left hand column, align the content to the right. On the first row, align the content to the top.