لطفا منتظر باشید ...
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"> <table> </table> </div> also: right or center |
Align a table using the <div> element and the CSS text-align property | <div style="text-align: left"> <table> </table> </div> also: right or center |
Align cell contents horizontally | <td align="left"> also: right or center Can also be used with <tr>, <thead>, <tfoot>, <tbody>, and <colgroup> |
Align cell contents vertically | <td valign="top"> or: middle, bottom, baseline Can also be used with <tr>, <thead>, <tfoot>, <tbody>, and <colgroup> |
Set cell background colors | <td bgcolor="colorValue"> Can also be used with <tr>, <thead>, <tfoot>, <tbody>, and <colgroup> |
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"> or: below, lhs, rhs, hsides, vsides, void |
Control display of inside cell borders (rules) | <table rules="cols"> or: rows, groups, none |
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> <tfoot> </tfoot> <tbody> </tbody> |
Group columns together | <colgroup span="#" /> (#=number of columns) or <colgroup> <col /> <col /> </colgroup> |
Add an image to a table cell | <td><img src="/image/library/english/10231_/image/library/english/10231_picture.gif " /></td> |
And an image and text to a table cell | <td><img src="/image/library/english/10231_/image/library/english/10231_picture.gif " />Text here</td> |
Add a link inside a table cell | <td><a href=">Go Here</a></td> |
Add a graphical link inside a table cell | <td><a href="><img /image/library/english/10231_/image/library/english/10231_picture.gif /></a></td> |
Use a table to join together a sliced image | <table cellpadding="0" cellspacing="0"> <tr><td><img src="/image/library/english/10231_part1.gif " /> </td></tr> <tr><td><img src="/image/library/english/10231_part2.gif" /> </td></tr> </table> |
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="/image/library/english/10231_banner.gif" height="100" width="600"
/>
</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</a></li>
<li><a href=">Text Elements</a></li>
<li><a href=">Superscript &
Subscript</a></li>
<li><a href=">Deleted Text</a></li>
<li><a href=">Preformatted Text</a></li>
<li><a href=">Unordered List</a></li>
<li><a href=">Multi-level
Unordered List</a></li>
<li><a href=">Ordered List</a></li>
<li><a href=">Ordered List with Start
Attribute</a></li>
<li><a href=">Outline List</a></li>
<li><a href=">Definition List</a></li>
<li><a href=">Text
Formatting</a></li>
<li><a href=">Generic
Fonts</a></li>
<li><a href=">The Color
Property</a></li>
<li><a href=">The Sixteen
Basic Colors</a></li>
<li><a href=">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>
