Learning Web Design Third Edition- P16 doc

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 ar

Trang 1

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

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

<tr>

</tr>

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.

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.



Trang 2

<tr>

</tr>

</table>

By default, table cells

expand just enough to fit Cell padding adds space between the edge ofthe 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

<tr>

</tr>

<tr>

</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

Trang 3

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>Calories</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.

Trang 4

Table Accessibility

</tr>

<tr>

<td>Caesar salad</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

Trang 5

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>

</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

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)

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

•

Trang 6

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>

</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 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 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.

Trang 7

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:

cellpadding="number" Space within cells

cellspacing="number" Space between cells

summary="text" A description of the table for nonvisual browsers

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

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.

caption Gives the table a title that displays in the browser.

1

2

3

4

5

Trang 8

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

Trang 9

How Forms Work

Name = Sally Strongarm Email = strongarm@example.com

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.

Trang 10

The form Element

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 reloadmail-ing 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">

<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">Email:</label>

</ol>

</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

Note

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.

Định dạng
Số trang	10
Dung lượng	377,95 KB