Next Page
Previous Page
In the Beginning
There is only one real way to insure that everything on your page lines
up exactly the way you planned. "TABLES" can save you alot of heart ache
and pain and they make your page look better too. Tables are used
extensively for navigation and page consistancy.
The Basic Table tags are:
"TABLE" tag encloses the entire Table.
"TH" tag allows Headings above columns.
"TR" tag defines a Row within the table.
"TD" tag defines a Column cell within the table.
"CAPTION" tag gives a title to your Table.
Headings, Rows & Columns
The Table consists of Headers (<TH>), Rows (<TR>), and
Columns (<TD>) all defined within the opening and closing "TABLE"
tags. With these rows and columns you create cells into which you can place
Data, Background Images and Color, Images,
Titles and anything else you would
normally place on your HTML document. This includes other Tables.
Lets start with a Basic table of 2 rows and two columns with Headers.
Code as follows:
<TABLE>
<TR>
<TH>Name</TH>
<TH>Phone Number</TH>
</TR>
<TR>
<TD>Phil</TD>
<TD>x3213</TD>
</TR>
<TR>
<TD>Murf</TD>
<TD>x3139</TD>
</TR>
</TABLE>
EXAMPLE:
| Name | Phone Number |
|---|---|
| Phil | x3213 |
| Murf | x3139 |
Borders
Borders can be used to display the boundaries of the table and it's
cells or just for looks. Or if you choose, you can also Not display the
borders as we have in the previous example.
To display a border on your Table you would use the Border="#" attribute
within the TABLE tag. The # is a number corresponding with the Width
of the actual border. Border="0" omits the border the same as not coding
the Border attribute. To code a border on the above table,
Code as follows:
<TABLE Border=2>
EXAMPLE:
| Name | Phone Number |
|---|---|
| Phil | x3213 |
| Murf | x3139 |
Background Images and Colors
You can change the look of your table by adding background color to the
whole table or to individual cells. Or you can add an Image as your
background, also to the whole table or to individual cells.
The "BGCOLOR" attribute is used to change cell color while the
"BACKGROUND" attribute is used to add an image as the cell background.
Lets add "YELLOW" as the background color for the header cells. By
placing the attribute in the Row tag, it will apply to all cells on
that row.
Code as follows:
<TABLE Border=2>
<TR bgcolor="yellow">
<TH>Name</TH>
<TH>Phone Number</TH>
EXAMPLE:
| Name | Phone Number |
|---|---|
| Phil | x3213 |
| Murf | x3139 |
Alignment
Data lines up to the left in each cell by default. You can change the
alignment vertically and horizontally within each cell by using the
"VALIGN" and "ALIGN" attributes.
Lets center the Phone Numbers within their cells by using the Align
attribute.
Code as follows:
<TD align="center">x3213</TD>
EXAMPLE:
| Name | Phone Number |
|---|---|
| Phil | x3213 |
| Murf | x3139 |
Spanning
Sometimes you may wish to span a row across several columns or a
column across several rows. You can do this using the "COLSPAN" and
"ROWSPAN" attributes.
Lets add a Title to our Table which will span both columns.
Code as follows:
<TR>
<TH colspan="2" align="center">PHONE BOOK</TH>
</TR>
EXAMPLE:
| PHONE BOOK | |
|---|---|
| Name | Phone Number |
| Phil | x3213 |
| Murf | x3139 |
Spacing
You can control Cellspacing and Cellpadding which is the amount of
space around your data and the amount of space around your cell itself.
"CELLSPACING" sets the amount of pixels between the table border and
the actual cell. "CELLPADDING sets the amount of pixels surrounding the
data inside the cell.
Lets increase the space around the data by using the "CELLPADDING="5"
attribute and the space between cells by using the "CELLSPACING="10"
attribute.
Code as follows:
<TABLE cellpadding="5" cellspacing="10" border="2">
EXAMPLE:
| PHONE BOOK | |
|---|---|
| Name | Phone Number |
| Phil | x3213 |
| Murf | x3139 |
Captions
You can put a name to your Table by using the "CAPTION" tag. You can
create Table headings using other means, but by using the Caption tag you
let anyone following you know, that this Text belongs with this Table.
Lets add a Name to our Table.
Code as follows:
<TABLE cellpadding="5" cellspacing="10" border="2">
<CAPTION>MDC Host Platforms</CAPTION>
EXAMPLE:
| PHONE BOOK | |
|---|---|
| Name | Phone Number |
| Phil | x3213 |
| Murf | x3139 |
Images
To place an Image inside your table, you will need to determine
where in the table the image should go and which cell would place it
there. Sounds tricky, but it's just a matter of alignment and what
looks good. Then you simply code the IMG tag as you normally would
in your HTML document but withing the cell itself.
Lets add an Image to the Heading.
Code as follows:
<TABLE cellpadding="5" cellspacing="10" border="2">
<CAPTION>MDC Host Platforms</CAPTION>
<TR>
<TH colspan="2" align="center"><FONT COLOR=GREEN>PHONE BOOK
<IMG src="//tumvsa/gif/computer/dialup2.gif" alt=phone
width=40 height=40 align="center">
</TH>
EXAMPLE:
PHONE BOOK
|
|
|---|---|
| Name | Phone Number |
| Phil | x3213 |
| Murf | x3139 |
Chapter 7 Assignment
Next Page
Previous Page
Goto Top of Page