Interactive Media Center
University Library, University at Albany

About HTML/XHTML
Technique
Tools
Web vs. Print

Getting Started
Setting Up the Basic Code
Adding and Formatting Text
Nesting Tags
Advanced Text Formatting
Color and the Web
Headings
Lists
Links
Layout and Tables
Advanced Table Formatting
Images
Putting It All Together
Adding An Image
Adding A Simple Table
Main Body Information
Finishing Touches
If You Continue On...

Adding A Simple Table

Now you will add a simple table without borders and limited attributes. This table will be used to accurately place the hours of operation for Sammy's Garage on the Web page. You will also apply some text formatting.

Add the table tag, table row tag, and table cell tag to your Web page as shown here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body>
<center><img src="images/garageheader.jpg" alt="Sammy's Garage" width="800" height="208" /></center>
<table>
<tr>
<td></td>
</tr>
</table>

</body>
</html>

Add the text to the table cell that tells about Sammy's hours of operation.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body>
<center><img src="images/garageheader.jpg" alt="Sammy's Garage" width="800" height="208" /></center>
<table>
<tr>
<td>Hours: Monday through Friday - 8:00 am to 6:00 pm<br />
Saturday - 8:00 am to 12:00 noon </td>
</tr>
</table>

</body>
</html>

You can save your page now and view it with your browser. To see what if should look like, click here. You will notice that the text and table are on the left side of the screen and does not have a particularly pleasing appearance. The next step is to add some attributes to the opening table tag so that it is centered. Then set the table to be 800 pixels wide and add 6 pixels of cell padding. The borders should be set to 0 pixels as should the cell spacing. The code should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body>
<center><img src="images/garageheader.jpg" alt="Sammy's Garage" width="800" height="208" /></center>
<table width="800" border="0" align="center" cellpadding="6" cellspacing="0">
<tr>
<td>Hours: Monday through Friday - 8:00 am to 6:00 pm<br />
Saturday - 8:00 am to 12:00 noon </td>
</tr>
</table>

</body>
</html>

You can save and view your page to see how adding these attributes have change the appearance of the table and text.

You have not formatted the text yet. That will be your next step. Add the opening and closing font tags "around" the text with the attribute to cause the text to be displayed in Arial. Add the line break tag, <br /> so that the line ends after "6:00 pm" The code will look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body>
<center><img src="images/garageheader.jpg" alt="Sammy's Garage" width="800" height="208" /></center>
<table width="800" border="0" align="center" cellpadding="6" cellspacing="0">
<tr>
<td><font face="Arial>Hours:Monday through Friday - 8:00 am to 6:00 pm<br />
Saturday - 8:00 am to 12:00 noon</font></td>
</tr>
</table>

</body>
</html>

Add the strong tag around the word "Hours."

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body>
<center><img src="images/garageheader.jpg" alt="Sammy's Garage" width="800" height="208" /></center>
<table width="800" border="0" align="center" cellpadding="6" cellspacing="0">
<tr>
<td><font face="Arial><strong>Hours:</strong>Monday through Friday - 8:00 am to 6:00 pm<br />
Saturday - 8:00 am to 12:00 noon</font></td>
</tr>
</table>

</body>
</html>

If you save and view your page now you will discover that the text is off to the left. Add the align center attribute to the table cell to cause the text to appear in the center. The code so far is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body>
<center><img src="images/garageheader.jpg" alt="Sammy's Garage" width="800" height="208" /></center>
<table width="800" border="0" align="center" cellpadding="6" cellspacing="0">
<tr>
<td align="center"><font face="Arial><strong>Hours:</strong>Monday through Friday - 8:00 am to 6:00 pm<br />
Saturday - 8:00 am to 12:00 noon</font></td>
</tr>
</table>

</body>
</html>

To see how your page should look now, click here.