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


Create a row


Create a data cell


Create a heading


Add a caption


Align a table using the <div> element and the align attribute (deprecated)

<div align="left">
also: right or center

Align a table using the <div> element and the CSS text-align property

<div style="text-align: left">
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


Group columns together

<colgroup span="#" /> (#=number of columns) or
<col />
<col />

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">
<tr><td><img src="/books/4/238/1/html/2/part1.gif " /></td></tr>
<tr><td><img src="/books/4/238/1/html/2/part2.gif" /></td></tr>

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! &copy;               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 &amp;                        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>

How to Do Everything with HTML & XHTML
How to Do Everything with HTML & XHTML
ISBN: 0072231297
EAN: 2147483647
Year: 2003
Pages: 126

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net