beginning html xhtml css and javascript phần 3 pdf

Chapter 4: Tables
146
The < td > and < th > Elements Represent Table Cells
Every cell in a table will be represented by either a < td > element for cells containing table data or a < th >
element for cells containing table headings.
By default, the contents of a
< th > element are usually displayed in a bold font, horizontally aligned in
the center of the cell. The content of a
< td > element, meanwhile, will usually be displayed left - aligned
and not in bold (unless otherwise indicated by CSS or another element).
The
< td > and < th > elements can both carry the same set of attributes, and the attribute only applies to
that one cell carrying it. Any effect these attributes have will override settings for the table as a whole or
any containing element (such as a row).
In addition to the universal attributes and the basic event attributes, the
< td > and < th > elements can
also carry the following attributes:
abbr align axis bgcolor char charoff colspan headers
height nowrap rowspan scope valign width

The abbr Attribute
The abbr attribute is used to provide an abbreviated version of the cell ’ s content.
abbr=”description of services”

While the major browsers do not currently support this attribute, it ’ s possible that it will be used by
some of the increasing number of devices with small screens accessing the Internet. For example, if a
browser with a small screen is being used to view the page, the content of this attribute could be
displayed instead of the full content of the cell.
The align Attribute (Deprecated)
The align attribute sets the horizontal alignment for the content of the cell.
align=”

alignment
”

The possible values for the align attribute are left , right , center , justify , and char , each of which
was described earlier in “The < tr > Element Contains Table Rows” section.
The axis Attribute
The axis attribute allows you to add conceptual categories to cells and therefore represent n -
dimensional data. The value of this attribute would be a comma - separated list of names for each
category the cell belonged to.
axis=”heavy, old, valuable”

Rather than having a visual formatting effect, this attribute allows you to preserve data, which then may
be used programmatically, such as querying for all cells belonging to a certain category.
c04.indd 146c04.indd 146 11/20/09 4:14:00 PM11/20/09 4:14:00 PM
Chapter 4: Tables
147
The bgcolor Attribute (Deprecated)
The bgcolor attribute sets the background color for the cell. The value of this attribute should be either
a color name or a hex code — both are covered in Appendix D.
bgcolor=”red”

It has been replaced by the background - color property in CSS.
The char Attribute
The char attribute specifies a character, the first instance of which should be used to horizontally align
the contents of a cell. (See the full description in the “ The
char Attribute ” subsection within the “ The
< tr > Element Contains Table Rows ” section earlier in the chapter.)
The charoff Attribute
The charoff attribute specifies the number of offset characters that can be displayed before the
character specified as the value of the

char attribute. (See the full description in the “ The charoff
Attribute ” subsection within the “ The
< tr > Element Contains Table Rows ” section earlier in the chapter.)
The colspan Attribute
The colspan attribute is used when a cell should span across more than one column. The value of the
attribute specifies how many columns of the table a cell will span across. (See the section “ Spanning
Columns Using the
colspan Attribute ” later in this chapter.)
colspan=”2”

The headers Attribute
The headers attribute is used to indicate which headers correspond to that cell. The value of the
attribute is a space - separated list of the header cells ’
id attribute values:
headers=”income q1”

The main purpose of this attribute is to support voice browsers. When a table is being read to you, it can
be hard to keep track of which row and column you are on; therefore, the
header attribute is used to
remind users which row and column the current cell ’ s data belongs to.
The height Attribute (Deprecated)
The height attribute allows you to specify the height of a cell in pixels, or as a percentage of the available space:
height=”20” or height=”10%”

It has been replaced by the CSS height property.
The nowrap Attribute (Deprecated)
The nowrap attribute is used to stop text from wrapping onto a new line within a cell. You would use

nowrap only when the text really would not make sense if it were allowed to wrap onto the next line (for
example, a line of code that would not work if it were spread across two lines). When it was initially

c04.indd 147c04.indd 147 11/20/09 4:14:01 PM11/20/09 4:14:01 PM
Chapter 4: Tables
148
introduced in HTML, it was used without an attribute value, but that would not be allowed in XHTML.
Rather, you would have to use the following:
nowrap=”nowrap”

The rowspan Attribute
The rowspan attribute specifies the number of rows of the table a cell will span across, the value of the
attribute being the number of rows the cell stretches across. (See the example in the section “ Spanning
Rows Using the
rowspan Attribute ” later in this chapter.)
rowspan=”2”

The scope Attribute
The scope attribute can be used to indicate which cells the current header provides a label or header
information for. It can be used instead of the
headers attribute in basic tables, but does not have much
support.
scope=”
range
”

The table that follows shows the possible values of the attribute:
Value Purpose

row Cell contains header information for that row.

col Cell contains header information for that column.

rowgroup Cell contains header information for that rowgroup (a group of cells in a row created
using the
< thead > , < tbody > , or < tfoot > elements).

colgroup Cell contains header information for that colgroup (a group of columns created
using the
< col > or < colgroup > element, both of which are discussed later in
the chapter).
The valign Attribute (Deprecated)
The valign attribute allows you to specify the vertical alignment for the content of the cell. Possible
values are
top , middle , bottom , and baseline , each of which was discussed earlier in the chapter
in the subsection entitled “ The
valign Attribute ” within the section “ The < tr > Element Contains
Table Rows . ”
The width Attribute (Deprecated)
The width attribute allows you to specify the width of a cell in pixels, or as a percentage of the table:
width=”150” or width=”30%”

c04.indd 148c04.indd 148 11/20/09 4:14:01 PM11/20/09 4:14:01 PM
Chapter 4: Tables
149
You only need to specify the width attribute for the cells in the first row of a table, and the rest of the
rows will follow the first row ’ s cell widths.
If you had already specified a
width attribute for the < table > element, and the widths of individual
cells add up to more than that width, most browsers will squash those cells to fit them into the width of
the table.
You can also add a special value of
* , which means that this cell will take up the remaining space

available in the table. So if you have a table that is 300 pixels wide and the first two cells in a row are
specified as being 50 pixels wide, if the third cell has a value of
* , it will take up 200 pixels — the
remaining width of the table. If the width of the table had not been specified, then the third column
would take up the remaining width of the browser window.
It is worth noting that you cannot specify different widths for different
< td > elements that belong
in the same column. So, if the first row of a table had three
< td > elements whose widths were
100 pixels, the second row could not have one
< td > element whose width was 200 pixels and two that
were 50 pixels.
Try It Out An Opening Hours Table
In this example, you will create a table that shows the opening hours of the Example Caf é web site we
have been working on throughout the book. The table will look like the one shown in Figure 4 - 9.
Figure 4 - 9
1. Start off by opening the contact.html file in your text or XHTML editor; we will be adding a
table to show serving hours beneath the e-mail link.
2. The table is contained within the < table > element and its content is then written out a row at
a time. The table has three rows and eight columns.
c04.indd 149c04.indd 149 11/20/09 4:14:01 PM11/20/09 4:14:01 PM
Chapter 4: Tables
150
Starting with the top row, you have eight table heading elements. The first < th > element is
empty because the top - left corner cell of the table is empty. The next seven elements contain
the days of the week.
In the second row of the table, the first cell acts as a heading for that row, indicating the meal
(breakfast). The remaining cells show what times these meals are served. The third row
follows the same format as the second row but shows times for lunch.

< table >
< tr >
< th > < /th >
< th > Monday < /th >
< th > Tuesday < /th >
< th > Wednesday < /th >
< th > Thursday < /th >
< th > Friday < /th >
< th > Saturday < /th >
< th > Sunday < /th >
< /tr >
< tr >
< th > Breakfast < /th >
< td > 7:00am - 10:00am < /td >
< td > 7:00am - 10:00am < /td >
< td > 7:00am - 10:00am < /td >
< td > 7:00am - 10:00am < /td >
< td > 7:00am - 11:00am < /td >
< td > 8:00am - 11:30pm < /td >
< td > 8:00am - 11:30pm < /td >
< /tr >
< tr >
< th > Lunch < /th >
< td > 11:30am - 2:30pm < /td >
< td > 11:30am - 2:30pm < /td >
< td > 11:30am - 2:30pm < /td >
< td > 11:30am - 2:30pm < /td >
< td > 11:30am - 2:30pm < /td >
< td > 11:30am - 3:30pm < /td >
< td > 11:30am - 3:30pm < /td >

< /tr >
< /table >
< /body >

As long as you accept that each row is written out in turn, you will have no problem creating
quite complex tables.
3. Save your file as contact.html.

c04.indd 150c04.indd 150 11/20/09 4:14:02 PM11/20/09 4:14:02 PM
Chapter 4: Tables
151
Adding a < caption > to a Table
Whether your table shows results for a scientific experiment, values of stocks in a particular market, or what is
on television tonight, each table should have a caption so that visitors to your site know what the table is for.
Even if the surrounding text describes the content of the table, it is good practice to give the table a
formal caption using the
< caption > element. By default, most browsers will display the contents of this
element centered above the table, as shown in Figure 4 - 10 in the next section.
The
< caption > element appears directly after the opening < table > tag; it should come before the
first row:
< table >
< caption > Opening hours for the Example Cafe < /caption >
< tr >

By using a < caption > element, rather than just describing the purpose of the table in a previous or
subsequent paragraph, you are directly associating the content of the table with this description — and
this association can be used by screen readers and by applications that process web pages (such as
search engines).
Grouping Sections of a Table

In this section, you are going to look at some techniques that allow you to group together cells, rows,
and columns of a table, and learn the advantages that doing this can bring. In particular, you will see
how to do the following:
Use the
rowspan and colspan attributes to make cells stretch over more than one row
or column
Split a table into three sections: a head, body, and foot
Group columns using the < colgroup > element
Share attributes between unrelated columns using the
< col > element
Spanning Columns Using the colspan Attribute
As you saw when looking at the < td > and < th > elements, both can carry an attribute called colspan
that allows the table cell to span (or stretch) across more than one column.
If you look at Figure 4 - 10, you can see a table that has three rows; the cells of the table are shaded to
illustrate the
colspan attribute in action:
The first row has three columns of equal width, and there is one cell for each column.
In the second row, the first cell is the width of one column, but the second cell spans the width
of two columns.
The third row has just one cell that spans all three columns.
❑
❑
❑
❑
❑
❑
❑
c04.indd 151c04.indd 151 11/20/09 4:14:02 PM11/20/09 4:14:02 PM
Chapter 4: Tables
152

Let ’ s take a look at the code for this example to see how the colspan attribute is used. This example also
uses the deprecated
border , width , height , and bgcolor attributes in order to illustrate a point
visually (
ch04_eg04.html ):
< table border=”1” >
< caption > Spanning columns using the colspan attribute < /caption >
< tr >
< td bgcolor=”#efefef” width=”100” height=”100” > & nbsp; < /td >
< td bgcolor=”#999999” width=”100” height=”100” > & nbsp; < /td >
< td bgcolor=”#000000” width=”100” height=”100” > & nbsp; < /td >
< /tr >
< tr >
< td bgcolor=”#efefef” width=”100” height=”100” > & nbsp; < /td >
< td colspan=”2” bgcolor=”#999999” > & nbsp; < /td >
< /tr >
< tr >
< td colspan=”3” bgcolor=”#efefef” height=”100” > & nbsp; < /td >
< /tr >
< /table >

In the first row, you can see that there are three < td > elements, one for each cell.
In the second row, there are only two
< td > elements, and the second of these elements carries a colspan
attribute. The value of the
colspan attribute indicates how many columns the cell should stretch across.
In this case, the second cell spans two columns; therefore, it has a value of
2 .
In the final row, there is just one
< td > element, and this time the colspan attribute has a value of 3 ,

which indicates that it should take up three columns.
Figure 4-10
c04.indd 152c04.indd 152 11/20/09 4:14:02 PM11/20/09 4:14:02 PM
Chapter 4: Tables
153
As I mentioned at the start of this chapter, when dealing with tables you have to think in terms of grids.
This grid is three cells wide and three rows tall, so the middle row could not have two equal - sized cells
(because they would not fit in the grid — you cannot have a cell spanning 1.5 columns).
An example of where the
colspan attribute might be useful is in creating a timetable or schedule where
the day is divided into hours — some slots lasting one hour, others lasting two to three hours.
You might also have noticed the use of the non - breaking space character (
& nbsp; ) in the cells, which is
included so that the cell has some content; without content for a table cell, some browsers will not
display the background color (whether that color is specified using CSS or the deprecated
bgcolor
attribute).
Spanning Rows Using the rowspan Attribute
The rowspan attribute does much the same thing as the colspan attribute, but it works in the opposite
direction: it allows cells to stretch vertically across cells. You can see the effect of the
rowspan attribute in
Figure 4 - 11.
Figure 4-11
When you use a rowspan attribute, the corresponding cell in the row beneath it must be left out
(
ch04_eg05.html ):
< table border=”1” >
< caption > Spanning rows using the colspan attribute < /caption >
< tr >
< td bgcolor=”#efefef” width=”100” height=”100” > & nbsp; < /td >

< td bgcolor=”#999999” width=”100” height=”100” > & nbsp; < /td >
< td rowspan=”3” bgcolor=”#000000” width=”100” height=”100” > & nbsp; < /td >
< /tr >
< tr >
< td bgcolor=”#efefef” height=”100” > & nbsp; < /td >
< td rowspan=”2” bgcolor=”#999999” > & nbsp; < /td >
c04.indd 153c04.indd 153 11/20/09 4:14:03 PM11/20/09 4:14:03 PM
Chapter 4: Tables
154
< /tr >
< tr >
< td bgcolor=”#efefef” height=”100” > & nbsp; < /td >
< /tr >
< /table >

The rowspan and colspan attributes were popular with designers who used tables to control the
layout pages, but tables are rarely used to lay out pages these days, and this technique has largely been
replaced by the use of CSS to control layouts.
Splitting Up Tables Using a Head, Body, and Foot
There are occasions when you may wish to distinguish between the body of a table (where most of the
data is held) and the headings or maybe even the footers. For example, think of a bank statement: you
may have a table where the header contains column headings, the body contains a list of transactions,
and the footer contains the balance in the account.
If the table is too long to show on a screen, then the header and footer might remain in view all the time,
while the body of the table gains a scrollbar. Similarly, when printing a long table that spreads over more
than one page, you might want the browser to print the head and foot of a table on each page.
Unfortunately, the main browsers do not yet support these ideas.
However, if you add these elements to your tables, you can use CSS to attach different styles to the
contents of the
< thead > , < tbody > , and < tfoot > elements. It can also help those who use aural

browsers, which read pages to users.
The three elements for separating the head, body, and foot of a table are:

< thead > to create a separate table header

< tbody > to indicate the main body of the table

< tfoot > to create a separate table footer
A table may also contain several
< tbody > elements to indicate different “ pages ,” or groups of data.

Note that the < tfoot > element must appear before the < tbody > element in the
source document.
Here you can see an example of a table that makes use of these elements ( ch04_eg06.html ):
< table >
< thead >
< tr >
< th > Transaction date < /th >
< th > Payment type and details < /th >
< th > Paid out < /th >
❑
❑
❑
c04.indd 154c04.indd 154 11/20/09 4:14:03 PM11/20/09 4:14:03 PM
Chapter 4: Tables
155
< th > Paid in < /th >
< th > Balance < /th >
< /tr >
< /thead >

< tfoot >
< tr >
< td > < /td >
< td > < /td >
< td > $1970.27 < /td >
< td > $2450.00 < /td >
< td > $8940.88 < /td >
< /tr >
< /tfoot >
< tbody >
< tr >
< td > 12 Jun 09 < /td >
< td > Amazon.com < /td >
< td > $49.99 < /td >
< td > < /td >
< td > $8411.16 < /td >
< /tr >
< tr >
< td > 13 Jun 09 < /td >
< td > Total < /td >
< td > $60.00 < /td >
< td > < /td >
< td > $8351.16 < /td >
< /tr >
< tr >
< td > 14 Jun 09 < /td >
< td > Whole Foods < /td >
< td > $75.28 < /td >
< td > < /td >
< td > $8275.88 < /td >

< /tr >
< tr >
< td > 14 Jun 09 < /td >
< td > Visa Payment < /td >
< td > $350.00 < /td >
< td > < /td >
< td > $7925.88 < /td >
< /tr >
< tr >
< td > 15 Jun 09 < /td >
< td > Cheque 122501 < /td >
< td > < /td >
< td > $1450.00 < /td >
< td > $9375.88 < /td >
< /tr >
< /tbody >
< tbody >
< tr >
c04.indd 155c04.indd 155 11/20/09 4:14:04 PM11/20/09 4:14:04 PM
Chapter 4: Tables
156
< td > 17 Jun 09 < /td >
< td > Murco < /td >
< td > $60.00 < /td >
< td > < /td >
< td > $9315.88 < /td >
< /tr >
< tr >
< td > 18 Jun 09 < /td >
< td > Wrox Press < /td >

< td > < /td >
< td > $1000.00 < /td >
< td > $10315.88 < /td >
< /tr >
< tr >
< td > 18 Jun 09 < /td >
< td > McLellans Bakery < /td >
< td > $25.00 < /td >
< td > < /td >
< td > $10290.88 < /td >
< /tr >
< tr >
< td > 18 Jun 09 < /td >
< td > Apple Store < /td >
< td > $1350.00 < /td >
< td > < /td >
< td > $8940.88 < /td >
< /tr >
< /tbody >
< /table >

Figure 4 - 12 shows what this example looks like in Firefox, which supports the thead , tbody , and tfoot
elements. Note that this example uses CSS to give the header and footer of the table a background shade.
Figure 4-12
c04.indd 156c04.indd 156 11/20/09 4:14:04 PM11/20/09 4:14:04 PM
Chapter 4: Tables
157
All three elements carry the same attributes. In addition to the universal attributes, they can carry the
following attributes (each of which was covered in the earlier section “ Basic Table Elements and Attributes ” ):
align char charoff valign

Grouping Columns Using the < colgroup > Element
If two or more columns are related, you can use the < colgroup > element to explain that those columns
are grouped together.
For example, in the following table, there would be six columns. The first four columns are in the first
column group, and the next two columns are in the second column group (
ch04_eg07.html ):
< table >
< colgroup span=”4” class=”mainColumns” / >
< colgroup span=”2” class=”subTotalColumns” / >
< tr >
< td > 1 < /td >
< td > 2 < /td >
< td > 3 < /td >
< td > 4 < /td >
< td > 5 < /td >
< td > 6 < /td >
< /tr >
< /table >

When the < colgroup > element is used, it comes directly after the opening < table > tag and carries a

span attribute, which is used to indicate how many columns the group contains.
In this example, the
class attribute is used to attach CSS rules that tell the browser the width of each
column in the group and the background color for each cell. You will learn more about CSS in Chapter 7,
but it is worth noting that some browsers support only a subset of the CSS rules for this element.
You can see what this example looks like in Figure 4 - 13.
Figure 4-13
In addition to the universal attributes, the < colgroup > element can carry the following attributes:

align char charoff span valign width

c04.indd 157c04.indd 157 11/20/09 4:14:04 PM11/20/09 4:14:04 PM
Chapter 4: Tables
158
Columns Sharing Styles Using the < col > Element
The < col > element was introduced to specify attributes of the columns in a < colgroup > (such as width
or alignment of cells within that column). Unlike the
< colgroup > element, the < col > element does not
imply structural grouping and is therefore more commonly used for presentational purposes.
The
< col > elements are always empty elements, which means they do not have any content, although
they do carry attributes.
For example, the following table would have six columns, and the first five, while not a group in their
own right, could be formatted differently than the last column because it belongs to a separate set
(
ch04_eg08.html ):
< table >
< colgroup span=”6” >
< col span=”5” class=”mainColumns” / >
< col span=”1” class=”totalColumn” / >
< /colgroup >
< tr >
< td > < /td >

< td > < /td >
< /tr >
< /table >

You can see what this looks like in Figure 4 - 14.

Figure 4-14
The attributes that the < col > element can carry are the same as for the < colgroup > element.
Nested Tables
As mentioned earlier in the chapter, you can include markup inside a table cell, as long as the whole
element is contained within that cell. This means you can even place another entire table inside a table
cell, creating what ’ s called a nested table . Figure 4 - 15 shows you an example of a table that shows a
schedule for a weekend of activities.
c04.indd 158c04.indd 158 11/20/09 4:14:05 PM11/20/09 4:14:05 PM
Chapter 4: Tables
159
In the bottom - right cell of this table is a second table that divides up the attendees into two groups.
(
ch04_eg09.html ):
< table >
< tr >
< th > < /th >
< th > Morning < /th >
< th > Afternoon < /th >
< /tr >
< tr >
< th > Saturday < /th >
< td > Cycling < /td >
< td > Fishing < /td >
< /tr >
< tr >
< th > Sunday < /th >
< td > Rowing < /td >
< td >
< table >
< tr >

<
th > Group 1 < /th >
< th > Group 2 < /th >
< /tr >
< tr >
< td > Water ski-ing < /td >
< td > Wake boarding < /td >
< /tr >
< /table >
< /td >
< /tr >
< /table >

Now that you ’ ve seen how to create a nested table, it is worth noting that they should be used very
sparingly, because they are quite hard for those who rely upon screen readers to follow. You are about to
see this in the next section.
Figure 4-15
c04.indd 159c04.indd 159 11/20/09 4:14:05 PM11/20/09 4:14:05 PM
Chapter 4: Tables
160
Accessible Tables
By their nature, tables can contain a lot of data and they provide a very helpful visual representation of
this information. When looking at a table, it is easy to scan across rows and up and down columns to
find a particular value or compare a range of values. If you think back to the examples you saw at the
very start of the chapter (the NFL sports results or the train timetable), you would not need to read all
the content of the table just to find out how your team is doing this season or when a train is leaving.
However, for those who listen to pages on a voice browser or a screen reader, tables can be much harder
to understand. For example, if you imagine having a table read to you, it would be much more difficult
to compare entries across a row or column because you have to remember what you have heard so far (it
is not as easy to scan back and forth).

Yet with a little thought or planning, you can make tables a lot easier for all to understand. Here are
some things you can do to ensure your tables are easy to understand:
Add captions to your tables. The
< caption > element clearly associates a caption with a table,
and the screen reader will read the caption to the user before they see the table so that they
know what to expect. If the listener knows what to expect, it will be easier to understand the
information.
Always try to use the
< th > element to indicate a table heading.
Always put headings in the first row and the first column.
Avoid using nested tables (like the one you saw in the previous section), as this will make it
harder for the user of a screen reader to follow.
Avoid using
rowspan and colspan attributes, which again make it harder for the user with a
screen reader to follow. If you do use them, make sure that you use the
scope and headers
attributes, which are discussed shortly.
Learn how a voice browser or screen reader would read a table, and the order in which the cells
are read out; this will help you to understand how to structure your tables for maximum ease of
use (we will see examples of this in the following section).
If you use the
scope and headers attributes to clearly indicate which headings apply to which
rows and columns, then screen readers can help users retrieve headings for a particular cell. If
you imagine someone having a table read to him or her, the screen reader will often give the
user an option to hear the headers that are relevant to that cell again (without having to go up
to the first row or back to the first cell in the column to hear the heading that corresponds with
that cell).
You already saw how to add a caption to a table, so let ’ s move on and see how tables are read to a user,
or how they are linearized.
How to Linearize Tables

When a screen reader is being used to read a table, it will tend to perform what is known as linearization,
which means that the reader starts at the first row and reads the cells in that row from left to right, one
by one, before moving on to the next row, and so on until the reader has read each row in the table.
Consider the following simple table (
ch04_eg10.html ):
❑
❑
❑
❑
❑
❑
❑
c04.indd 160c04.indd 160 11/20/09 4:14:05 PM11/20/09 4:14:05 PM
Chapter 4: Tables
161
< table border=”1” >
< tr >
< td > Column 1, Row 1 < /td >
< td > Column 2 Row 1 < /td >
< /tr >
< tr >
< td > Column 1, Row 2 < /td >
< td > Column 2, Row 2 < /td >
< /tr >
< /table >

Figure 4 - 16 shows what this simple table would look like in a browser.
Figure 4-16
The order in which the cells in Figure 4 - 16 would be read is therefore:
Column 1 Row 1

Column 2 Row 1
Column 1 Row 2
Column 2 Row 2
This small example is fairly easy to follow. But imagine a larger table: the headings will be read first,
followed by a row of data. If the table had several more columns, it would be very hard to remember
which column you were in. (Even worse, if you use nested tables, it becomes far harder for users to
follow where they are, because one table cell can contain an entirely new table that often has different
numbers of rows or columns.)
Luckily, most screen readers are able to remind the user of the column and row they are currently in, but
this works far better when the table uses
< th > elements for headers. And if you are building a complex
table, you can also enhance this information using the
id , scope , and headers attributes, covered in the
following section.
Using the id, scope, and headers Attributes
The id , scope , and headers attributes have already been mentioned in this chapter, when we looked at
the attributes that the
< td > and < th > elements can carry. Here we will take a look at how they can be
used to record the structure of a table better and make it more accessible.
When you make a cell a heading, adding the
scope attribute to the < th > element, helps you indicate
which cells that element is the heading for. If you give it a value of
row , you are indicating that this
❑
❑
❑
❑
c04.indd 161c04.indd 161 11/20/09 4:14:06 PM11/20/09 4:14:06 PM
Chapter 4: Tables
162

element is the header for that row; given the value of column, it indicates that it is the header for that
column. You can also have values for a
rowgroup or columngroup .
Value Purpose

row Cell contains header information for that row.

col Cell contains header information for that column.

rowgroup Cell contains header information for that rowgroup — a group of cells in a row
created using the
< thead > , < tbody > , or < tfoot > elements. (There is no
corresponding element for columns like the
< colgroup > element.)

colgroup Cell contains header information for that colgroup (a group of columns created using
the
< col > or < colgroup > element, both of which are discussed later in the chapter).
The
headers attribute performs the opposite role to the scope attribute, because it is used on < td >
elements to indicate which headers correspond to that cell. The value of the attribute is a space - separated
list of the header cells ’
id attribute values, so here you can tell that the headers for this cell would have

id attributes whose values are income and q1 .
headers=”income q1”

The main purpose of this attribute is to support voice browsers. When a table is being read to you, it can
be hard to keep track of which row and column you are on; therefore, the
header attribute is used to

remind users which row and column the current cell ’ s data belongs to.
Try It Out An Accessible Timetable
In this Try It Out, you are going to create a new page for the Example Caf é web site featuring a
timetable for a weekend cookery course, with morning and afternoon sessions over two days. It
should look like the screenshot in Figure 4 - 17.
Figure 4-17
c04.indd 162c04.indd 162 11/20/09 4:14:06 PM11/20/09 4:14:06 PM
Chapter 4: Tables
163
While you cannot see it from this screenshot, the table is specifically designed to be accessible for those
with visual impairments.
1. Because this example contains deprecated attributes, you need to set up the skeleton of this
page to handle a Transitional XHTML 1.0 document:
< ?xml version=”1.0” encoding=”UTF-8”? >
< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“ >
< html xmlns=” lang=”en” >
< head >
< title > Ultimate brunch course < /title >
< /head >
< body >
< /body >
< /html >

2. The table has three rows and three columns; the first row and the left column contain
headings and therefore use
< th > elements. The remaining table cells use a < td > element.
While you are adding these elements, you ’ ll add in some content for the table, too:
< body >
< table >

< tr >
< th > < /th >
< th > Tuesday < /th >
< th > Wednesday < /th >
< /tr >
< tr >
< th > Morning < /th >
< td > Baking bread: loaves, croissants and muffins. < /td >
< td > Sweet treats: pancakes and waffles. < /td >
< /tr >
< tr >
< th > Afternoon < /th >
< td > Eggs 4 ways: boiled, scrambled, poached, fried. < /td >
< td > Fry pan specials: Fritters and hash browns. < /td >
< /tr >
< /table >
< /body >

3. The next stage is to add id attributes to the < th > elements that have content, and header
attributes to the
< td > elements to indicate which headers apply to those elements; this
approach improves accessibility for visitors who use screen readers. The value of the
header
attributes should correspond to the values of the
id attributes indicating which headings
correspond to each cell:
< table >
< tr >
< th > < /th >
< th id=”Saturday” > Saturday < /th >

< th id=”Sunday” > Sunday < /th >
c04.indd 163c04.indd 163 11/20/09 4:14:07 PM11/20/09 4:14:07 PM
Chapter 4: Tables
164
< /tr >
< tr >
< th id=”Morning” > Morning < /th >
< td headers=”Saturday Morning” abbr=”Bread” > Baking bread: loaves,
croissants and muffins. < /td >
< td headers=”Sunday Morning” abbr=”Eggs” > Eggs 4 ways: boiled,
scrambled, poached, fried < /td >
< /tr >
< tr >
< th id=”Afternoon” > Afternoon < /th >
< td headers=”Saturday Afternoon” abbr=”Sweet breakfasts” > Sweet treats:
pancakes and waffles. < /td >
< td headers=”Sunday Afternoon” abbr=”Fried foods” > Fry pan specials:
Fritters and hash browns. < /td >
< /tr >
< /table >

4. Save your file as course.html . To be honest, this example is quite a bit more complex than
most tables you will come across. Not many people have gotten into the practice of using the

id and header attributes on < table > elements, but it makes tables a lot easier to use for
those with visual impairments, in particular on larger tables that have a lot of columns and
rows. Neither will you often see the
abbr attribute used on table cells. In fact, if you look at
the code for other people ’ s web sites, you are still more likely to come across the use of lots of
deprecated attributes rather than these attributes.

Including attributes like these will help set you apart from other coders who have not yet learned to
make their tables more accessible. Furthermore, awareness of accessibility issues is required in an
increasing number of jobs, so you should learn how to use such attributes.
Summary
In this chapter, you have seen how tables can be a powerful tool when creating pages. You have seen
how all tables are based on a grid pattern and use the four basic elements:
< table > , which contains each
table;
< tr > , which contains the rows of a table; < td > , which contains a cell of table data; and < th > ,
which represents a cell that contains a heading.
You have also seen how you can add headers, footers, and captions to tables. It is particularly helpful to
add a
< thead > and < tfoot > element to any table that may be longer than a browser window or sheet
of printed paper, as these could help a reader relate between the content and the information in
headers or footers.
You can now make cells span both columns and rows, although you should avoid doing this in tables
that contain data, as it makes them harder for aural browsers to read to a user. You have also seen how to
group columns so that you can preserve structure, and so they can share styles and attributes.
Finally, you saw some of the accessibility issues regarding use of tables. It is important to be aware of the
process of linearization, which a screen reader performs before reading a table to a user, so that your
c04.indd 164c04.indd 164 11/20/09 4:14:07 PM11/20/09 4:14:07 PM
Chapter 4: Tables
165
Figure 4-18
Figure 4-19
sites are accessible to users with visual impairments. You also need to know how you can provide extra
information that indicates the headers for each cell.
In the next chapter, you learn about using forms to collect information from visitors.
Exercises

The answers to all of the exercises are in Appendix A.
1. Where should the < caption > element for a table be placed in the document and, by default,
where is it displayed?
2. In what order would the cells in Figure 4 - 18 be read out by a screen reader?
3. Create a table to hold the data shown in Figure 4 - 19. To give you a couple of clues, the document
must be Transitional XHTML 1.0 because the
width attribute is used on the cells of the first row
of the table. You have also seen examples of how the border is generated in this chapter, using
another deprecated attribute, but on the
< table > element rather than the cells.
c04.indd 165c04.indd 165 11/20/09 4:14:07 PM11/20/09 4:14:07 PM
c04.indd 166c04.indd 166 11/20/09 4:14:17 PM11/20/09 4:14:17 PM
5
Fo rm s
Almost every time you want to collect information from a visitor to your site, you need to use a
form . Some forms are quite complex, such as those that allow you to book plane tickets or purchase
insurance online. Others are quite simple, such as the search box on the homepage of Google.
Many of the forms you will fill out online bear a strong resemblance to paper forms you have to fill
out. On paper, forms are made up of areas to enter text, boxes to check (or tick), options to choose
from, and so on. Similarly, on the Web you can create a form by combining what are known as form
controls , such as textboxes (to enter text into), checkboxes (to place a cross in), select boxes and
radio buttons (to choose from different options), and so on. In this chapter, you learn how each of
these different types of controls can be combined into a form.
In this chapter then, you ’ ll learn the following:
How to create a form using the
< form > element
The different types of form controls you can use to make a form — such as text input
boxes, radio buttons, select boxes, and submit buttons
What happens to the data a user enters
How to make your forms accessible

How to structure the content of your forms
By the end of the chapter, you will be able to create all kinds of forms to collect information from
visitors to your site.
XHTML is used only to present the form to the user; it does not allow you to say what happens
with that data once it has been collected. To get a better idea of what happens to the data once it
has been collected from a form, you will need to look at a book on a server - side language, such as
ASP.NET or PHP (you can see a range of books on these topics at
www.wrox.com ).
❑
❑
❑
❑
❑
c05.indd 167c05.indd 167 11/20/09 4:19:38 PM11/20/09 4:19:38 PM
Chapter 5: Forms
168
Introducing Forms
Let ’ s start by looking at a couple of examples of forms. First, Figure 5 - 1 shows you the Google
homepage. This contains two kinds of form controls:
A text input , which is where you enter your search term.
Submit buttons , which are used to send the form to the server. There are two on this form:
you can see the words “ Google Search ” written on the first one and “ I ’ m Feeling Lucky ” on
the second.
❑
❑
Figure 5 - 1
Now let ’ s look at a more complicated example. Figure 5 - 2 shows part of an insurance form, which
actually spreads over several pages. It shows many more types of form controls:
Select boxes , sometimes referred to as drop - down lists, such as the one in the top left of
Figure 5 - 2 to say how long you have been driving.

Radio buttons , such as the ones in the top - right corner with Yes or No options. When you have
a group of radio buttons, you can only pick one response.
Checkboxes , such as the ones at the bottom of the screenshot indicating how you can be
contacted (by e - mail, post, or phone). When you have a group of checkboxes, you can pick more
than one response.
Text inputs , to enter a date of birth and registration number.
❑
❑
❑
❑
c05.indd 168c05.indd 168 11/20/09 4:19:39 PM11/20/09 4:19:39 PM
Chapter 5: Forms
169
There are two additional types of form controls not shown in these examples: a text area (which is a
multi - line text input), and file select boxes (which allow you to upload files), both of which you will meet
later in the chapter.
Any form that you create will live inside an element called
< form > , and the form controls (the text input
boxes, drop - down boxes, checkboxes, a submit button, and so on) live between the opening
< form > and
closing
< /form > tags. A < form > element can also contain other XHTML markup as you would find in
the rest of a page.
Once users have entered information into a form, they usually have to click what is known as a submit
button (although the actual text on the button may say something different such as Search, Send, or
Proceed — and often pressing the Return key on the keyboard has the same effect as clicking this
button). This indicates that the user has filled out the form, and this usually sends the form data to a
web server.
Figure 5-2
c05.indd 169c05.indd 169 11/20/09 4:19:39 PM11/20/09 4:19:39 PM

Chapter 5: Forms
170
Once form data arrives at the server, a script or other program processes the data and sends a new web
page back to you. The returned page will respond to a request you have made or acknowledge an action
you have taken.
For example, you might want to add the search form shown in Figure 5 - 3 to your page
(
ch05_eg01.html ).
Figure 5-3
Figure 5-4
You can see that this form contains a textbox for the user to enter the keywords of what he or she is
searching for, and a submit button, which has been set to have the word “ Search ” on it. When the user
clicks the Search button, the information is sent to the server. The server then processes the data and
generates a new page for that user telling what pages meet the search criteria (Figure 5 - 4).
When a browser sends data to the server, it is transmitted in name/value pairs. The name corresponds to
the name of the form control, and the value is what the user has entered (if the user can type an answer)
or the value of the option selected (if there is a list of options to choose from).
Each item needs both a name and a value because, if you have five textboxes on a form, you need to
know which data corresponds to which textbox. The processing application can then process the
information from each form control individually.
c05.indd 170c05.indd 170 11/20/09 4:19:39 PM11/20/09 4:19:39 PM