After you understand how to put content onto your web page, the next step is layout and organization. There are several ways to achieve the look you want; the two most popular are tables and frames. This week we will cover tables, and next week we'll cover frames. Tables are perhaps the best way to format your web page. With tables you can keep everything sorted into columns and rows. The tags you will use in html for tables are not much different than the ones you learned last week. You can find the table tags with a brief description in the table below.
HTML (TABLE) TAGS
|
|
TAG/ATTRIBUTE
|
DESCRIPTION
|
|
TABLE
|
For creating tables
|
|
BGCOLOR
|
For specifying the background color of the table
|
|
BORDER
|
For specifying the thickness, if any, of the border
|
|
BORDERCOLOR
|
For specifying a solid color for the border
|
|
CELLPADDING
|
For specifying the amount of space between the cell's content and
its borders
|
|
CELLSPACING
|
For specifying the amount of space between the cells
|
|
HEIGHT
|
For specifying the height of the table
|
|
WIDTH
|
For specifying the width of the table
|
|
TD
|
For creating cells in a table
|
|
ALIGN
|
For horizontally aligning a cell's content |
|
COLSPAN
|
For spanning a cell across more then one column
|
|
HEIGHT
|
For specifying the height of the cells
|
|
ROWSPAN
|
For spanning a cell across more than one row |
|
VALIGN
|
For vertically aligning a cell's content |
|
WIDTH
|
For specifying the width of the cells
|
|
TH
|
For creating headers in a table
(The attributes are the same as for <td>)
|
|
TR
|
For creating rows in a table
|
|
ALIGN
|
For horizontally aligning contents of a row |
|
BGCOLOR
|
For changing the color of an entire row
|
|
VALIGN
|
For vertically aligning contents of a row |
Now with these tags we are going to create a page with a table. Again, this is a strict web page, so we are going to begin this page with the strict heading.
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">
<html>
<head>
<title>My Second Page</title>
</head>
<body bgcolor="#ffffff">
<center>
<table width="756" cellspacing="4">
<tr>
<td colspan="2" height="72">
<h1>The Daily Beagle</h1>
</td>
<td rowspan="2">
<img src="wes2.jpg" width="244" height="142" alt="Wes">
</td>
</tr>
<tr>
<td rowspan="2" width="244">
<font
align="justify">
Wes Kinback celebrated his second birthday
last week, and it was a grand affair. Only the finest in the animal
kingdom were invited. Of course, at the top of this list was Wes's
good friend Armand. Also in attendence was Wes's mother, his
youngest brother, Boy, and his recently adopted stepbrother, Rocky.
On this special occasion not only Wes, but</font>
</td>
<td rowspan="2" width="244">
<font
align="justify">
all of the guests recieved presents. Instead of the
traditional cake, Wes's parents insited on serving the finest canned
foods such as Alpo, for the dogs, and Fancy Feast, for the cats. And
for dessert... cold cuts for all. According to Wes, "My favorite gift
would have to be my custom-made sling. After all, it does make me
look so handsome." </font>
</td>
</tr>
<tr>
<td>
<font align="justify">Wes also recieved a new bed and a pig's knuckle,
which his parents say he will not be allowed to bury. In all,
Wes's birthday bash was a party not to be missed.</font>
</td>
</tr>
</table>
</center>
</body>
</html>
|
|
The <th> tag has some built-in qualities such as bold, and centered. You can also have a table within a table for a chart with a formatted look.
Responses:
Refresh frame to view latest entries.
Name: Kevin
Comments:
What a vastly complex article! Thanks Jonelle!
|
