Session 4 Examples
Preformatted Text | Basic Graphical Table | Borders, Padding, and Spacing | Assigning Widths and Heights | Cell Alignment | Table Alignment | Cell Colors | Table and Border Colors | Table and Cell Background Images | Spanning Rows and Cols | Basic Template
To use these examples, type (or copy) the code into a new document, save as an htm file, then view in your browser. Modify the code to see what effect it has on the output. Experiment. Play.
Detailed instructions are available here
Note that each <html> block has to be saved as a separate htm file.
Preformatted Text
<html>
<head>
<title>Preformatted Text</title>
</head>
<body>
<!-- pre tag contents is displayed in a fixed width font. White space is preserved -->
<pre>
# Fruit Quantity Available?
- ---------- -------- ----------
1 Apples 3 Dozen Yes
2 Oranges 2 Dozen No
3 Kiwi Fruit 6 Dozen Yes
</pre>
<!-- Possiblities are limited -->
</body>
</html>
Basic Graphical Table
<html>
<head>
<title>Basic Graphical Table</title>
</head>
<body>
<!-- Indenting your code is now more important than ever! -->
<!-- Same data as in previous example. 4 row x 4 col table -->
<table>
<tr> <!-- begin the first table row -->
<td>#</td> <!-- table cell -->
<td>Fruit</td>
<td>Quantity</td>
<td>Available?</td>
</tr> <!-- end the first table row -->
<tr>
<td>1</td>
<td>Apples</td>
<td>3 Dozen</td>
<td>Yes</td>
</tr>
<tr>
<td>2</td>
<td>Oranges</td>
<td>2 Dozen</td>
<td>No</td>
</tr>
<tr>
<td>3</td>
<td>Kiwi Fruit</td>
<td>6 Dozen</td>
<td>Yes</td>
</tr>
</table>
</body>
</html>
Borders, Padding, and Spacing
<html>
<head>
<title>Borders, Padding, and Spacing</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<td><b>#</b></td>
<td><b>Fruit</b></td>
<td><b>Quantity</b></td>
<td><b>Available?</b></td>
</tr>
<tr>
<td>1</td>
<td>Apples</td>
<td>3 Dozen</td>
<td>Yes</td>
</tr>
<tr>
<td>2</td>
<td>Oranges</td>
<td>2 Dozen</td>
<td>No</td>
</tr>
<tr>
<td>3</td>
<td>Kiwi Fruit</td>
<td>6 Dozen</td>
<td>Yes</td>
</tr>
</table>
</body>
</html>
Assigning Widths and Heights
<html>
<head>
<title>Assigning Widths and Heights</title>
</head>
<body>
<table width="50%" border="1" cellspacing="0" cellpadding="2">
<tr>
<td width="200">This column is 200px wide</td>
<td>This column will size automatically</td>
</tr>
<tr>
<td height="250">This row is set to 250px high</td>
<td>Note that the table width is set at 50%</td>
</tr>
</table>
</body>
</html>
Cell Alignment
<html>
<head>
<title>Cell Alignment</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="2">
<tr valign="top">
<td width="100" height="100" align="left">top left</td>
<td width="100" height="100" align="center">top center</td>
<td width="100" align="right">top right</td>
</tr>
<tr valign="middle">
<td width="100" height="100" align="left">middle left</td>
<td align="center">middle center</td>
<td align="right">middle right</td>
</tr>
<tr valign="bottom">
<td height="100" align="left">bottom left</td>
<td align="center">bottom center</td>
<td align="right">bottom right</td>
</tr>
</table>
</body>
</html>
Table Alignment
<html>
<head>
<title>Table Alignment</title>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td>This table floats to the left (default) of the page</td>
</tr>
</table>
<table border="1" align="center" cellpadding="2" cellspacing="0">
<tr>
<td>This table floats to the center of the page</td>
</tr>
</table>
<table border="1" align="right" cellpadding="2" cellspacing="0">
<tr>
<td>This table floats to the right of the page</td>
</tr>
</table>
</body>
</html>
Cell Colors
<html>
<head>
<title>Cell Colors</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="2">
<tr>
<td width="100" bgcolor="#FF0000">
<p>This row uses hex triplets.</p>
<p>Red</p>
</td>
<td width="100" bgcolor="#00FF00">Green</td>
<td width="100" bgcolor="#0000FF">Blue</td>
</tr>
<tr>
<td bgcolor="red">
<p>This one uses color names</p>
<p>Red</p>
</td>
<td bgcolor="green">Green</td>
<td bgcolor="blue">Blue</td>
</tr>
</table>
</body>
</html>
Table and Border Colors
<html>
<head>
<title>Table and Border Colors</title>
</head>
<body>
<table border="2" cellpadding="2" cellspacing="0" bordercolor="#0000FF" bgcolor="#FF0000">
<tr>
<td>This</td>
<td>Entire</td>
<td>Table</td>
</tr>
<tr>
<td>Has</td>
<td bordercolor="#FFFF00">a</td>
<td>Red</td>
</tr>
<tr>
<td>Background &</td>
<td>Blue</td>
<td>Border</td>
</tr>
</table>
</body>
</html>
Table and Cell Background Images
Supporting Files
(Right-click and save to your desktop)
<html>
<head>
<title>Table and Cell Background Images</title>
</head>
<body>
<table width="100%" height="100%" border="1" cellpadding="2" cellspacing="0" background="marble.jpg">
<tr>
<td>The table's background is set to use marble.jpg </td>
<td> </td> <!-- always put at least a non-breaking space in your "empty" cells -->
<td> </td>
</tr>
<tr>
<td> </td>
<td background="coyote.gif">This cell uses the coyote.gif for a background</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>This table's width and height are set at 100%</td>
</tr>
</table>
</body>
</html>
Spanning Rows and Cols
<html>
<head>
<title>Spanning Rows and Cols</title>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td>Normal row</td>
<td>three</td>
<td>columns</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">This cell spans 3 columns</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2">This cell spans 2 rows</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2" rowspan="2">This cell spans 2 rows and 2 columns</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Basic Template
<head>
<title>Basic Template</title>
</head>
<body>
<table width="720" border="1" cellspacing="0" cellpadding="2">
<tr>
<td colspan="2">
<!-- masthead -->
Masthead
<!-- end masthead -->
</td>
</tr>
<tr>
<td width="120" align="left" valign="top">
<!-- links -->
Links
<!-- end links -->
</td>
<td align="left" valign="top">
<!-- content -->
Content Area
<!-- end content -->
</td>
</tr>
</table>
</body>
</html>