Learning Web Design Third Edition- P16 doc

Part II: HTML Markup for Structure
136
Cell Padding and Spacing
Figure 8-8. The rowspan attribute stretches a cell downward to span the specified
number of rows.
Again, notice that the td elements for the cells that were spanned over (the
first cells in the remaining rows) do not appear in the source.
Cell Padding and Spacing
By default, cells are sized just large enough to fit their contents (see the left
example in Figure 8-10), but often, you’ll want to add a little breathing room
around tabular content. There are two kinds of space that can be added in and
around table cells: cell padding and cell spacing, using the cellpadding and
cellspacing attributes, respectively. These attributes may be used with the table
element only. In other words, you can’t apply them to tr, td, or th elements.
Because matters of spacing are presentational, we’ll talk about CSS alterna-
tives to these attributes as part of the discussion.
Cell padding
Cell padding is the amount of space held between the contents of the cell
and the cell border. If you don’t specify any cell padding, the cells will have
the default value of one pixel of padding. Figure 8-10 shows the result of the
following markup compared to a sample in which no padding or spacing is
specified.
<table cellpadding="15">
<tr>
<td>CELL 1</td>
<td>CELL 2</td>
</tr>
exercise 8-3
|
Row spans
Try writing the markup for the table shown in Figure 8-9. If you’re working in an

HTML editor, don’t worry if your table doesn’t look exactly like the one shown here.
The resulting markup is provided in Appendix A.
Figure 8-9. Practice row spans by writing the markup for this table.
exercise 8-3
|
Row spans
Try writing the markup for the table shown in Figure 8-9. If you’re working in an
HTML editor, don’t worry if your table doesn’t look exactly like the one shown here.
The resulting markup is provided in Appendix A.
Figure 8-9. Practice row spans by writing the markup for this table.
Some hints:
Rows always span downward, so the
“oranges” cell is part of the first row.
Cells that are spanned over do not
appear in the table code.


Some hints:
Rows always span downward, so the
“oranges” cell is part of the first row.
Cells that are spanned over do not
appear in the table code.


Cell Padding and Spacing
Chapter 8, Basic Table Markup
137
<tr>
<td>CELL 3</td>
<td>CELL 4</td>

</tr>
</table>
By default, table cells
expand just enough to fit
Cell padding adds space between the edge of
the cell and its contents.
NOTE: I have used style sheets to add a gray rule around cells and a black rule around the table for
demonstration purposes.
cellpadding="15"
15 pixels
Figure 8-10. The cellpadding attribute adds space between the cell contents and the
cell border.
Because the cellpadding attribute may be used with the table element only,
the cellpadding value applies to all the cells in the table. In other words,
you can’t specify different amounts of padding for individual cells with this
attribute.
However, you can apply padding amounts on a cell-by-cell basis using the
padding property in CSS. In fact, you can add padding to any (X)HTML
element, as we’ll discuss in Chapter 14. Because CSS offers much more fine-
tuned control over spacing within the cell, the clunky and presentational
cellpadding attribute is going by the wayside. See the sidebar, Presentational
Table Attributes, for other table-related attributes that are being phased out
in favor of style sheet controls.
Cell spacing
Cell spacing is the amount of space held between cells, specified in number
of pixels (Figure 8-11). If you don’t specify anything, the browser will use the
default value of two pixels of space between cells.
<table cellpadding="15" cellspacing="15">
<tr>
<td>CELL 1</td>

<td>CELL 2</td>
</tr>
<tr>
<td>CELL 3</td>
<td>CELL 4</td>
</tr>
</table>
Many authors explicitly set both
the
cellpadding
and
cellspacing

attributes to 0 (zero) to override
browser settings and clear the way
for style sheet properties.
t I P
Part II: HTML Markup for Structure
138
Captions and Summaries
NOTE: I have used style sheets to add a gray rule around cells and a black rule around the table for
demonstration purposes.
15 pixels
Cell spacing adds space between cells
cellspacing="15"
Figure 8-11. The cellspacing attribute adds space between cells.
There is no CSS property that exactly replicates the cellspacing attribute,
although you can adjust the amount of space between cells by setting the
border-collapse property for the table to separate, then use the border-
spacing property to specify the amount of space between borders. The

problem with this technique is that it is not supported by Internet Explorer
6 and earlier, which accounts for a large percentage of web traffic as of this
writing. For the time being, if you absolutely need cell spacing for all your
visitors, the cellspacing attribute is the only option. This will change even-
tually as versions 6 and earlier go away.
Captions and Summaries
There are two methods for providing additional information about a table:
captions and summaries. The difference is that the caption is displayed with
the table in visual browsers, while the summary is not displayed but may be
used by assistive devices. Both captions and summaries are useful tools in
improving table accessibility.
The caption element
The caption element is used to give a table a title or brief description. The
caption element must be the first thing within the table element, as shown
in this example that adds a caption to the nutritional chart from earlier in
the chapter.
<table>
<caption>Nutritional Information</caption>
<tr>
<th>Menu item</th>
<th>Calories</th>
<th>Fat (g)</th>
</tr>
<tr>
<td>Chicken noodle soup</td>
Presentational
Table Attributes
These table attributes are no longer
necessary now that there are well-
supported CSS properties that offer

even better control of the details.
width
Specifies the width of the table
in pixels or percentage. Use the
CSS width property instead.
border
Adds a “3-D” shaded border
around cells and the table. The
CSS border property offers more
flexibility for setting border
styles and colors.
align
Sets the horizontal alignment
of cell contents to left, right,
or center. This attribute is
deprecated in favor of the
text-align CSS property.
valign
Sets the vertical alignment of
cell contents to top, bottom, or
middle. The vertical-align style
property is a better choice.
bgcolor
Applies a solid background color
to a cell, row, or whole table.
This attribute is deprecated in
favor of the background-color
property.
rules
Adds rules between rows,

columns, or groups. Use the CSS
border property instead.
Table Accessibility
Chapter 8, Basic Table Markup
139
<td>120</td>
<td>2</td>
</tr>
<tr>
<td>Caesar salad</td>
<td>400</td>
<td>26</td>
</tr>
</table>
The caption is displayed above the table by default as shown in Figure 8-12,
although you can use a style sheet property (caption-side) to move it below
the table.
Figure 8-12. The table caption is displayed above the table by default.
The summary attribute
Summaries are used to provide a more lengthy description of the table and
its contents. They are added using the summary attribute in the table element,
as shown here.
<table summary="A listing of the calorie and fat content for each of
the most popular menu items">
<caption>Nutritional Information</caption>
table continues
</table>
The summary is not rendered in visual browsers, but may be used by screen
readers or other assistive devices to give visually impaired users a better
understanding of the table’s content, which sighted users could understand

at a glance. This alleviates the need to listen to several rows of data before
deciding whether to continue with the table data or skip it.
Be careful not to get carried away with table descriptions. They should be
clear and succinct and used only when the caption isn’t sufficient.
Table Accessibility
We’ve looked at headers, captions, and summaries as methods for improv-
ing the accessibility of table content. The HTML 4.01 Recommendation also
provides a few additional attributes related to accessibility.
Part II: HTML Markup for Structure
140
Wrapping Up Tables
abbr
The abbr attribute is used in a table header (th) element to provide an
abbreviated version of the header to be read aloud by a screen reader in
place of a longer, more cumbersome version.
<th abbr="diameter">Diameter measured in earths</th>
scope
The scope attribute explicitly associates a table header with the row,
column, rowgroup, or colgroup in which it appears. This example uses the
scope attribute to declare that a header cell applies to the current row.
<tr>
<th scope="row">Mars</th>
<td>.95</td>
<td>.62</td>
<td>0</td>
</tr>
headers
For really complicated tables in which scope is not sufficient to associ-
ate a table data cell with its respective header (such as when the table
contains multiple spanned cells), the headers attribute is used in the td

element to explicitly tie it to a header. The header (th) element is named
using the id attribute, as shown in this example.
<th id="diameter">Diameter measured in earths</th>
many other cells
<td headers="diameter">.38</td>
many other cells
</th>
This section obviously only scratches the surface. In-depth instruction on
authoring accessible tables is beyond the scope of this beginner book, but I
enthusiastically refer you to these useful articles:
“Techniques for Accessible HTML Tables” by Steve Ferg (www.ferg.org/
section508/accessible_tables.html)
“Creating Accessible Tables,” at WebAIM (www.webaim.org/techniques/tables)
Wrapping Up Tables
This chapter gave you a good overview of the components of (X)HTML
tables. Exercise 8-4 puts most of what we covered together to give you a little
more practice at authoring tables.
After just a few exercises, you’re probably getting the sense that writing table
markup manually, while not impossible, gets tedious and complicated quick-
ly. Fortunately, web authoring tools such as Dreamweaver provide an interface
that make the process much easier and time-efficient. Still, you’ll be glad that
you have a solid understanding of table structure and terminology, as well as
the preferred methods for changing their appearance.
•
•
Wrapping Up Tables
Chapter 8, Basic Table Markup
141
Now it’s time to put together the table writing skills you’ve
acquired in this chapter. Your challenge is to write out the

source document for the table shown in Figure 8-13.
Figure 8-13. The table challenge.
I’ll walk you through it a step at a time.
The first thing to do is open a new document in your text
editor and set up its overall structure (
html
,
head
,
title
, and
body
elements). Save the document as table.html in the
directory of your choice.
Next, in order to make the boundaries of the cells and table
more clear when you check your work, I’m going to have
you add some simple style sheet rules to the document.
Don’t worry about understanding exactly what’s happening
here (although it’s fairly intuitive); just insert this
style

element in the
head
of the document exactly as you see it
here.
<head>
<title>Table Challenge</title>
<style type="text/css">
td, th { border: 1px solid #CCC }
table {border: 1px solid black }

</style>
</head>
Now it’s time to start building the table. I usually start
by setting up the table and adding as many empty row
elements as I’ll need for the final table as placeholders, as
shown here (it should be clear that there are five rows in this
table).
<body>
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
</body>
1.
2.
3.
Start with the top row and fill in the
th
and
td
elements
from left to right, including any row or column spans as
necessary. I’ll help with the first row.
The first cell (the one in the top left corner) spans down the
height of two rows, so it gets a
rowspan
attribute. I’ll use a

th

here to keep it consistent with the rest of the row. This cell
has no content.
<table>
<tr>
<th rowspan="2"></th>
</tr>
The cell in the second column of the first row spans over
the width of two columns, so it gets a
colspan
attribute:
<table>
<tr>
<th rowspan="2"></th>
<th colspan="2">A common header for two
subheads</th>
</tr>
The cell in the third column has been spanned over, so we
don’t need to include it in the markup. The cell in the fourth
column also spans down two rows.
<table>
<tr>
<th rowspan="2"></th>
<th colspan="2">A common header for two
subheads</th>
<th rowspan="2">Header 3</th>
</tr>
Now it’s your turn. Continue filling in the
th

and
td
elements
for the remaining four rows of the table. Here’s a hint: the
first and last cells in the second column have been spanned
over. Also, if it’s bold in the example, make it a header.
To complete the content, add the title over the table using
the
caption
element.
Next, add 4 pixels of space between the cells using the
cellspacing
attribute.
Finally, improve the accessibility of the site by providing
a
summary
of your choice. Also, use the
scope
attribute to
make sure that the Thing A, Thing B, and Thing C headers are
associated with their respective rows.
Save your work and open the file in a browser. The table
should look just like the one on this page. If not, go back
and adjust your markup. If you’re stumped, the final markup
for this exercise is listed in Appendix A.
4.
5.
6.
7.
8.

9.
exercise 8-4
|
The table challenge
Part II: HTML Markup for Structure
142
Test Yourself
Test Yourself
The answers to these questions are in Appendix A.
What are the parts/elements of a basic (X)HTML table?
Why don’t professional web designers use tables for layout anymore?
What is the difference between a caption and a summary?
When would you use the col (column) element?
Find five errors in this table markup.
<caption>Primetime Television 1965</caption>
<table>
Thursday Night
<tr></tr>
<th>7:30</th>
<th>8:00</th>
<th>8:30</th>
<tr>
<td>Shindig</td>
<td>Donna Reed Show</td>
<td>Bewitched</td>
<tr>
<colspan>Daniel Boone</colspan>
<td>Laredo</td>
</tr>
</table>

(X)HTML Review: Table Elements
The following is a summary of the elements we covered in this chapter:
Element and attributes Description
table
Establishes a table element
cellpadding="number"
Space within cells
cellspacing="number"
Space between cells
summary="text"
A description of the table for nonvisual browsers
td
Establishes a cell within a table row
colspan="number"
Number of columns the cell should span
rowspan="number"
Number of rows the cell should span
headers="header name"
Associates a data cell with a header
th
Table header associated with a row or column
colspan="number"
Number of columns the cell should span
rowspan="number"
Number of rows the cell should span
scope="row|column|rowgroup|colgroup"
Associates the header with a row, row group, column, or column group.
tr
Establishes a row within a table
caption

Gives the table a title that displays in the browser.
1.
2.
3.
4.
5.
143
IN THIS CHAPTER
How forms work
The form element
POST versus GET
Variables and values
Form controls, including
text entry fields, buttons,
menus, and hidden data
Form accessibility features
A word about form layout
It’s hard to go on the Web without encountering some sort of form, whether
you’re making a purchase, signing up for a mailing list, or requesting product
information. Although forms have a wide range of uses, from simple search
boxes to complex online shopping interfaces, they are all built out of the
same components.
This chapter introduces web forms, how they work, and the markup used to
create them.
How Forms Work
There are two parts to a working form. The first part is the form that you see
on the page itself. Forms are made up of buttons, text fields, and pull-down
menus (collectively known as form controls) used to collect information from
the user. Forms may also contain text and other elements.
The other component of a web form is an application or script on the server

that processes the information collected by the form and returns an appro-
priate response. It’s what makes the form work. In other words, putting up
an (X)HTML page with form elements isn’t enough. Web applications and
scripts require progamming know-how that is beyond the scope of this book,
however, the Getting Your Forms to Work sidebar later in this chapter pro-
vides some options for getting the scripts you need.
From data entry to response
If you are going to be creating web forms, it is beneficial to understand what
is happening behind the scenes. This example traces the steps of a transaction
using a simple form that gathers names and email addresses for a mailing list;
however, it is typical of the process for most forms.
Your visitor, let’s call her Sally, opens the page with a web form in the
browser window. The browser sees the form control elements in the
markup and replaces them with the appropriate form controls, including
two text entry fields and a submit button (shown in Figure 9-1).
1.
FORMS
CHAPTER
9
Part II: HTML Markup for Structure
144
How Forms Work
Name = Sally Strongarm
Email =
Response
(HTML)
Data
Web application
Figure 9-1. What happens behind the scenes when a web form is submitted.
Sally would like to sign up for this mailing list, so she enters her name

and email address into the fields and submits the form by clicking the
“Submit” button.
The browser collects the information she entered, encodes it (see sidebar),
and sends it to the web application on the server.
The web application accepts the information and processes it (that is,
does whatever it is programmed to do with it). In this example, the name
and email address are added to a database.
2.
3.
4.
A Word about
Encoding
Form data is encoded using the
same method used for URLs in
which spaces and other characters
that are not permitted are translated
into their hexadecimal equivalents.
For example, each space character
in the collected form data is
represented by the character string
%20
and a slash (/) character is
replaced with
%2F
. You don’t need
to worry about this; the browser
handles it automatically.
The form Element
Chapter 9, Forms
145

The web application also returns a response. The kind of response sent
back depends on the content and purpose of the form. Here, the response
is a simple web page that contains a thank you for signing up for the mail-
ing list. Other applications might respond by reloading the (X)HTML
form page with updated information, by moving the user on to another
related form page, or by issuing an error message if the form is not filled
out correctly, to name only a few examples.
The server sends the web application’s response back to the browser
where it is displayed. Sally can see that the form worked and that she has
been added to the mailing list.
The form Element
Forms are added to web pages using (no surpise here) the form element. The
form element is a container for all the content of the form, including some
number of form controls, such as text entry fields and buttons. It may also
contain block elements, (h1, p, and lists, for example), however, it may not
contain another form element.
This sample source document contains a form similar to the one shown in
Figure 9-1.
<html>
<head>
<title>Mailing List Signup</title>
</head>
<body>
<h1>Mailing List Signup</h1>
<form action="/cgi-bin/mailinglist.pl" method="post">
<fieldset>
<legend>Join our email list</legend>
<p>Get news about the band such as tour dates and special MP3
releases sent to your own in-box.</p>
<ol>

<li><label for="name">Name:</label>
<input type="text" name="name" id="name" /></li>
<li><label for="name">Email:</label>
<input type="text" name="email" id="email" /></li>
</ol>
<input type="submit" value="Submit" />
</fieldset>
</form>
</body>
</html>
In addition to being a container for form control elements, the form element
has some attributes that are necessary for interacting with the form-process-
ing program on the server. Let’s take a look at each.
5.
6.
Be careful not to nest
form
elements
or allow them to overlap. A
form

element must be closed before the
next one begins.
t I P
Be careful not to nest
form
elements
or allow them to overlap. A
form

element must be closed before the
next one begins.
t I P
N o t e
It is current best practice to wrap form
controls in lists, most commonly ordered
lists as shown in this example. Not only
is it semantically correct, it also makes
it easier to format the form with style
sheets later.
CGI (Common
Gateway Interface)
The Common Gateway Interface
(CGI) is what allows the server to
communicate with other programs.
These are usually scripts (called CGI
scripts) written in the Perl, C, or C++
programming languages. The most
common use of CGI scripts is forms
processing. Most servers follow the
convention of keeping CGI scripts
in a special directory named cgi-bin
(short for CGI-binaries), as shown in
our example. As other more web-
focused options for interfacing
with databases become available,
such as ASP and PHP, traditional
CGI programming is getting less
attention.