Table Enhancements
Tables: Examples - Table Tricks - Table Gallery - Table Tricks and Truths - Tables: Links
Creating a Menu Bar
Menu bars are often used to create a horizontal list of links.
<table border="0" width="70%" align="center">
<tr>
<td align="center"><a href="<http://www.metacrawler.com>">Metacrawler</a></td>
<td align="center">|</td>
<td align="center"><a href="<http://www.alltheweb.com>">Fast Web</a></td>
<td align="center">|</td>
<td align="center"><a href="<http://www.google.com>">Google</a></td>
</tr>
</table>
Appears as:
| Metacrawler |
| |
Fast Web |
| |
Google |
Note: The | key is either above or below your ENTER key. This typewriter character looks like two dashes turned vertically.
Return to the Top
Additional Enhancements
Empty Cells:
Visible - <td> </td>
Invisible - <td></td> (older browsers do not display this correctly)
Border color:
<table border="5" bordercolor="green">
The attribute border="-" must be included for bordercolor to work.
Interior Borders:
<table border="5" rules="all"> - default
<table border="5" rules="cols"> - view only vertical lines within the table
<table border="5" rules="rows"> - view only horizontal lines within the table
<table border="5" rules="none"> - no lines within the table
Wrapping Text around a Table:
<table align="left">
<table align="right">
Stop text wrap:
<br clear="left"> stop text until there are no more tables on the left
<br clear="right"> stop text until there are no more tables on the right
<br clear="all"> stop text until there are no more tables on either side of
the screen
Add space around a table:
<table hspace="number" vspace="number">
hspace - adds space to the right and left sides of the table
vspace - adds space to the top and bottom of the table
Return to the Top
Table Summary:
Provides alternative text to the table for those that are blind or have
text-only browsers.
<table border="2" summary="table example">
Axis:
This tag provides blind or text-browser users a brief description of cell data.
<td axis="description of cell">Cell Data</td>
Scope:
Scope allows you to transfer attributes from one cell to other cells in a table without retyping the attributes.
· Col - sets the rest of the column
· Colgroup - sets the rest of the colgroup
· Row - sets the rest of the row
· Rowgroup - sets the rest of the rowgroup
<table>
<tr>
<td bgcolor="green" scope="col">column 1, cell one</td>
<td>column 1, cell two</td>
<td>column 1, cell three</td>
</tr>
<tr>
<td>column 2, cell one</td>
<td colspan="2">column 2, cell two</td>
</tr>
</table>
Return to the Top
Nesting Tables
Tables are often used to create columns of information, providing a "newspaper effect" to a web page. Thus, a two-cell table can take up an entire web page.
Tables can also provide a vertical sidebar: external links in one cell and text information in another cell.
Another creative use of tables is to layout your page with text in your middle cells and empty outer cells to allow for more white space.
Nested tables can be used to create colored frames around an image.
Steps in Creating Nested Tables:
1. Create the two tables separately. Note: The width of the inner table should be the width of the cell it will be inserted into.
2. In the cell where the second table will appear, insert an "X" or a few words to 'mark the spot'.
3. Save both tables. View both tables in the browser. Make any modifications or corrections.
4. Cut and paste the second table into the appropriate cell.
Return to the Top
Example - White Rock Lake Picture Frame:
<html>
<head>
<title>White Rock Lake</title>
</head>
<body>
<p align="center"><font size="+1" face="comic sans ms">Welcome to White Rock Lake!</font></p>
<table border="7" cellpadding="10" cellspacing="10" bgcolor="#0000FF" align="center">
<tr>
<td>
<table border="7" cellpadding="10" cellspacing="10" bgcolor="#FF0000">
<tr>
<td><img src="images/lake.jpg" alt="lake"></td>
</tr>
</table>
</td>
</tr>
</table>
<p align="center"><font size="+1" face="comic sans ms">Enjoy the crisp Fall weather...Check out our <a href="activities.htm">Activities!</a></font></p>
</body>
</html>
Return to the Top
A More Complex Nested Table
<html>
<head>
<title>Dallas Destinations</title>
</head>
<body>
<table border="0" cellspacing="5">
<tr>
<td colspan="2">
<table>
<tr>
<td><img src="images/skyline.jpg" height="100" width="150" alt="Dallas skyline"></td>
<td><img src="images/dallas.gif" height="100" width="300" alt="Dallas"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" width="15%">
<p> </p>
<p> </p>
<p><a href="http://www.dallasdinesout.com/location/area1/lgreen/lgreen.htm">Dallas Dines Out</a></p>
<p><a href="http://www.dallascvb.com/dcvb/site/1.2.5GreenvilleAve.asp">Dallas: Greenville Ave</a></p>
<p><a href="http://www.m-street-dallas.com/indexnew.html/">Dallas: 1900-1960</a></p>
<p><a href="http:///dallasguide.com">Guide Live!</a></p>
<p><a href="http://www.smu.edu/~cul/dfw/">Dallas!</a></p>
</td>
<td valign="top">
<table>
<tr>
<td colspan="3" align="center"><font color="red" face="comic sans ms" size="6">Lower Greenville: The Place to
BE!</font></td>
</tr>
<tr>
<td colspan="2" align="center" valign="top"><img src="images/tudor.jpg" width="300" alt="Lower Greenville Tudor home"></td>
<td rowspan="2" width="30%" valign="top"><p>Tudor architecture was in vogue during the late 1920's. Notice the ornate style to the exterior of the buildings.</p>
<p>Step into the surrounding neighborhood of Tudor homes. Typical Tudor features in these homes include:
<ul><li>front or side covered porches</li>
<li>multiple gabled rooflines</li>
<li>prominent exterior fireplace</li>
<li>stain-glass windows or latticed windows</li>
</ul></p>
</td>
</tr>
<tr>
<td valign="top" width="30%"><h2 align="center">Shopping</h2>
<p>Start your day by browsing the many <em>antique shops</em> and other <em>speciality gift shops</em>. </p></td>
<td valign="top" width="35%"><h2 align="center">Dining</h2>
<ul><li><em>Snuffers</em>- the best hamburgers</li>
<li><em>Aw Shucks</em> - casual seafood dining</li>
<li><em>J. Pepes</em> - Mexican cuisine</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Return to the Top
|
