Quick Reference: Tables
|
In this chapter you have learned how to use tables to display and format data. However, you have also learned how to use tables to create a stable layout for your Web pages. It is up to you whether or not you use tables as a design tool, but you will doubtless find many uses for them. If you find yourself losing track of all the different elements and attributes you can use with tables, or if you need help with the code for Project 12, the following sections provide a ready resource.
Create and Use Tables
Tables are simple to use and easy to learn. However, large tables can quickly become complex and difficult to manage or decipher. Use the following ready reference table to keep yourself familiar with the various elements and attributes used in creating XHTML tables:
| To Do This | Use This |
|---|---|
| Create a table | <table></table> |
| Create a row | <tr></tr> |
| Create a data cell | <td></td> |
| Create a heading | <th></th> |
| Add a caption | <caption></caption> |
| Align a table using the <div> element and the align attribute (deprecated) | <div align="left"> |
| Align a table using the <div> element and the CSS text-align property | <div style="text-align: left"> |
| Align cell contents horizontally | <td align="left"> also: right or center |
| Align cell contents vertically | <td valign="top"> or: middle, bottom, baseline |
| Set cell background colors | <td bgcolor="colorValue"> |
| Turn borders off | <table border="0"> or simply omit the border attribute |
| Adjust border thickness | <table border="#"> (#=thickness in pixels) |
| Control display of outer table border | <table frame="above"> |
| Control display of inside cell | <table rules="cols"> |
| Add space between cells | <table cellspacing="#"> (#=pixels) |
| Add space inside cells | <table cellpadding="#"> (#=pixels) |
| Make a data cell span multiple columns | <td colspan="#"> (#=number of columns) |
| Make a data cell span multiple rows | <td rowspan="#"> (#=number of rows) |
| Group rows together | <thead></thead> |
| Group columns together | <colgroup span="#" /> (#=number of columns) or |
| Add an image to a table cell | <td><img src="/books/4/238/1/html/2/picture.gif " /></td> |
| And an image and text to a table cell | <td><img src="/books/4/238/1/html/2/picture.gif " />Text here</td> |
| Add a link inside a table cell | <td><a href="pageName.htm">Go Here</a></td> |
| Add a graphical link inside a table cell | <td><a href="pageName.htm"><img picture.gif /></a></td> |
| Use a table to join together a sliced image | <table cellpadding="0" cellspacing="0"> |
Code for Project 12
Project 12 provided a good test of your mastery of XHTML tables. If you found yourself stuck at any point, the code that created Figure 1 is reproduced here. Compare your code and see if there are any glitches that crept in.
<!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> <title>Using Tables for Page Layout</title> <style type="text/css"> body {background-color: white;} </style> </head> <body> <div style="text-align: center;"> <table summary="Page layout" width="100%" border="1" cellpadding="0" cellspacing="0"> <colgroup> <col width="15%" /> <col width="85%" /> </colgroup> <thead> <tr> <td align="center" colspan="2"> <img src="/books/4/238/1/html/2/banner.gif" height="100" width="600" alt="How to Do Everything with HTML Notebook" /> </td> </tr> </thead> <tfoot> <tr> <td style="font-family: arial; font-size: .75em;" align="center" colspan="2">Web design by Me! © Copyright 2050. All rights reserved. </td> </tr> </tfoot> <tbody> <tr> <td bgcolor="aqua" align="left"> <ul> <li><a href="headings.htm">Headings</a></li> <li><a href="text.htm">Text Elements</a></li> <li><a href="sup.htm">Superscript & Subscript</a></li> <li><a href="del.htm">Deleted Text</a></li> <li><a href="pre.htm">Preformatted Text</a></li> <li><a href="ulist.htm">Unordered List</a></li> <li><a href="ulist2.htm">Multi-level Unordered List</a></li> <li><a href="olist.htm">Ordered List</a></li> <li><a href="olist2.htm">Ordered List with Start Attribute</a></li> <li><a href="olist3.htm">Outline List</a></li> <li><a href="dlist.htm">Definition List</a></li> <li><a href="text-format.htm">Text Formatting</a></li> <li><a href="generic-fonts.htm">Generic Fonts</a></li> <li><a href="font-colors.htm">The Color Property</a></li> <li><a href="16colors.htm">The Sixteen Basic Colors</a></li> <li><a href="css-color.htm">CSS Color</a></li> </ul> </td> <td valign="middle"> <p style="font-size: 2em">Insert images and/or text in this cell</p> </td> </tr> </tbody> </table> </div> </body> </html>
|
EAN: 2147483647
Pages: 126