Xem mẫu
- Chapter 4: Tables
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%”
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). In HTML it was used with-
out an attribute value, but that would not be allowed in Transitional XHTML. Rather, you would 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 , , or elements).
colgroup Cell contains header information for that colgroup (a group of columns created
using the or element, both of which are discussed later in
the chapter).
121
- Chapter 4: Tables
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 is discussed more in the “The valign
Attribute” section within the “The Element Contains Table Rows” section earlier in the chapter.
The width Attribute (deprecated)
The width attribute allows you to specify the width of a cell in pixels or as a percentage of the available
space:
width=”150” or width=”30%”
You need to specify only 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 specify a width attribute for the 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 remain-
ing width of the browser window.
It is worth noting that you cannot specify different widths for elements in corresponding columns of
different rows of a table. So, if the first row of a table had three elements whose widths are 100 pixels,
the second row could not have one element whose width was 200 pixels and two that are 50 pixels.
Try It Out An Accessible Timetable
In this example you create a timetable that is specifically designed to be accessible for those with visual
impairments. Because you are likely to come across them in the real world, the example will contain
some deprecated attributes.
1. Because this example contains deprecated attributes, you need to set up the skeleton ready to
handle a Transitional XHTML 1.0 document:
An accessible timetable
122
- Chapter 4: Tables
2. Next you can add in the main elements required to create a table with three rows and three columns.
The left-most column and the top row will contain headings. While you are doing this, you’ll
add in some content for the table, too. The timetable will show a fictional weekend course on
XHTML, with morning and afternoon sessions for Saturday and Sunday:
Saturday
Sunday
Morning
The structure of a document and how to mark up text.
Adding tables and forms to pages. Splitting pages up into windows
called frames.
Afternoon
Linking between pages and adding color images and objects to
your pages.
Using CSS to style your documents and make them look attractive.
3. The next stage is to add id attributes to the elements that have content, and header attrib-
utes to the elements. The value of the header attributes should correspond to the values
of the id attributes, indicating which headings correspond to each cell:
Saturday
Sunday
Morning
The
structure of a document and how to markup text.
Adding
tables
and forms to pages. Splitting pages up into windows called
frames
Afternoon
Linking between pages, and adding color images and
objects to your pages.
123
- Chapter 4: Tables
Using CSS to style your
documents
and make them look attractive.
4. Save your file as table.html. The example in Figure 4-5 contains some CSS style rules that you
learn more about in Chapter 8.
Figure 4-5
How It Works
The table is contained within the element and its content is then written out a row at a time.
Starting with the top row, you have three table heading elements. The first is empty because the top-left
corner cell of the table is empty. The next two elements contain the headings for days. Remember that the
id attributes will be used by individual table cells so they can indicate which headings correspond to them.
Saturday
Sunday
...
In the next row of the table, the first cell is a heading for that row, indicating that this row shows times
for morning sessions. The second two cells show table data. The headers attributes contain the values
of the id attributes on their corresponding header elements, and the abbr attributes contain an abbrevi-
ation of the table cell content:
Morning
The structure of
a document and how to markup text.
Adding tables
and forms to pages. Splitting pages up into windows called frames
124
- Chapter 4: Tables
The final row uses the same structure as the second row:
Afternoon
Linking between pages, and adding color images and
objects to your pages.
Using CSS to style your documents
and make them look attractive.
As long as you accept that each row is written out in turn, you will have no problem creating quite com-
plex tables.
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 elements, but it
makes tables a lot easier to use for those with visual impairments, in particular when those tables have a
lot of columns and rows. Nor will you often see the abbr attribute used on table cells. In fact, if you look
at other people’s code around on the Web at the moment, you are more likely to come across the use of
lots of deprecated attributes rather than these attributes.
Including attributes like these will set you apart from other coders who have not yet learned to make
their tables more accessible. Furthermore, awareness of accessibility issues is being required in an
increasing number of job positions, so you should learn how to use such attributes.
Advanced Tables
Now that you’ve seen the basics behind creating tables, it’s time to look at some more advanced issues,
such as the following:
❑ Splitting a table into three sections: a head, body, and foot
❑ Captioning tables
❑ Using the rowspan and colspan attributes to make cells stretch over more than one row or
column
❑ Grouping columns using the element
❑ Sharing attributes between unrelated columns using the element
Splitting Up Tables Using a Head, Body, and Foot
Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather simi-
lar to headers and footers in a word-processed document, which remain the same for every page, while
the body is the main content of the table.
125
- Chapter 4: Tables
The separation of the parts of the table allows for the richer formatting of tables by browsers. For example,
when printing a table, browsers could print the head and foot of a table on each page if the table spreads
to more than one page. Aural browsers, which read pages to users, could allow users to navigate between
content and headers or footers with additional information easily.
It was also intended that if the table was too large for a single page then the header and footer would remain
in view, while the body of the table would gain a scroll bar. However, this is not supported in the major-
ity of browsers.
The three elements for separating the head, body, and foot of a table are:
❑ to create a separate table header
❑ to indicate the main body of the table
❑ to create a separate table footer
A table may contain several elements to indicate different “pages” or groups of data.
Note that the element must appear before the element in the
source document.
Here you can see an example of a table that makes use of these elements (ch04_eg04.html):
This is the head of the table
This is the foot of the table
Cell 1
Cell 2
Cell 3
Cell 4
...more rows here containing four cells...
Cell 1
Cell 2
126
- Chapter 4: Tables
Cell 3
Cell 4
...more rows here containing four cells...
Figure 4-6 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,
and that the font used in these elements is larger; also, the height of each element has been set to
100 pixels to make the table larger.
Figure 4-6
All three elements carry the same attributes. In addition to the universal attributes, they can carry the
following attributes:
align char charoff valign
127
- Chapter 4: Tables
The align Attribute (deprecated)
The align attribute is used to specify the horizontal positioning of the text and contained elements. The
possible values for the align attribute are left, right, center, justify, and char, each of which was
described in the “The align Attribute” subsection within the “The Element Contains Table Rows”
section earlier in the chapter.
The char Attribute
The char attribute specifies a character, the first instance of which should be used to horizontally align the
contents of each cell in the column group. (See the full description in the subsection “The char Attribute”
within the “The 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 char Attribute” sub-
section within the section “The Element Contains Table Rows” earlier in the chapter.)
The valign Attribute (deprecated)
The valign attribute allows you to specify the vertical alignment for the content of the cells in each ele-
ment. Possible values are top, middle, bottom, and baseline each of which is discussed more in the
subsection “The valign Attribute” within the “The Element Contains Table Rows” section earlier
in the chapter.
Adding a to a Table
To add a caption to a table, you just use the element after the opening tag and before
the first row or header:
Spanning columns using the colspan attribute
By default, most browsers will display the contents of this attribute centered above the table, as shown in
Figure 4-7 in the next section.
Spanning Columns Using the colspan Attribute
As you saw when looking at the and elements, both can carry an attribute that allows the table
cell to span more than one column.
Remember that whenever you work with tables, you need to think in terms of grids. The colspan attrib-
ute allows a cell to stretch across more than one column, which means it can stretch across more than one
rectangle horizontally in the grid. Take a look at the following example, which uses the deprecated border,
width, height, and bgcolor attributes to illustrate a point visually (ch04_eg05.html):
Spanning columns using the colspan attribute
128
- Chapter 4: Tables
You can see here that, for each extra column that a cell spans, you do not add in a cell for that row. So, if a
table has three columns and one of the cells spans two columns, you have only two elements in that row.
You might also have noticed the use of the non-breaking space character ( ) 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).
Figure 4-7 shows what this example would look like in a browser.
Figure 4-7
Spanning Rows Using the rowspan Attribute
The rowpsan 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.
When you use a rowspan attribute, the corresponding cell in the row beneath it must be left out:
Spanning rows using the colspan attribute
129
- Chapter 4: Tables
You can see the effect of the rowspan attribute in Figure 4-8.
Figure 4-8
The rowspan and colspan attributes were particularly popular with designers who used tables to con-
trol the layout pages; but this technique has largely been replaced by the use of CSS to control layouts.
Grouping Columns Using the Element
If you are creating complex tables, you can group one or more adjacent columns together using the
element. It is particularly helpful when two or more adjacent columns contain similar types
of information. This allows you to apply formatting to the group of columns rather than having to style
each column separately. When you look at CSS in Chapter 7, you will see how the class attribute is used
to associate this column group with a particular style.
For example, in the following table, there are 12 columns. The first eight columns are in the first column
group, the next two columns are in the second column group, and the final two columns are in the third
column group:
130
- Chapter 4: Tables
...
As you can see, when the element is used, it comes directly after the opening tag.
The span attribute is being used to indicate how many columns the group contains, the width attribute
sets the width of each column in the group (although in XHTML you should use CSS instead), and the
class attribute can be used to attach further styles using CSS.
In addition to the universal attributes, the element can carry the following attributes:
align char charoff span valign width
While this will allow basic formatting, such as background color changes, support in browsers is limited.
The align Attribute (deprecated)
The align attribute is used to specify the horizontal positioning of the text in cells within a
element. The possible values for the align attribute are left, right, center, justify, and char, each
of which was described in the “The align Attribute” subsection within the section “The Element
Contains Table Rows” earlier in the chapter.
The char Attribute
The char attribute specifies a character, the first instance of which should be used to horizontally align
the contents of each cell in the column group. (See the full description in the “The char Attribute” sub-
section within the section “The Element Contains Table Rows” earlier in the chapter.)
The charoff Attribute
The charoff attribute specifies the number of offset characters that can be displayed before the charac-
ter specified as the value of the char attribute. (See the full description in the “The charoff Attribute”
subsection within the “The Element Contains Table Rows” section earlier in the chapter.)
The span Attribute
The span attribute specifies how many columns a is supposed to stretch across.
span=”5”
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 is discussed more in the “The valign Attribute”
subsection within the “The Element Contains Table Rows” section earlier in the chapter.
131
- Chapter 4: Tables
The width Attribute
The width attribute specifies the width of each cell in the column either in pixels or as a percentage of the
available space. The width attribute can also take the special value 0*, which specifies that the column
width should be the minimum width required to display all of the content of that column.
Columns Sharing Styles Using the Element
The element can be used to perform a similar role as the element, but without actually
implying a structural group of columns. It can also be used to indicate that just one column needs for-
matting different from the rest of the group.
The elements are always empty elements, and are therefore used only to carry attributes, not content.
For example, the following table would have ten columns, and the first nine, while not a group, could be
formatted differently than the last column because it belongs to a separate set.
...
The attributes that the element can carry are the same as for the element.
Unfortunately, browser support for grouping columns is currently limited.
Accessibility Issues with Tables
Because tables can create a grid, a lot of designers used to use them to control the layout of whole
documents, and entire web pages would be built inside a table. Before you even consider using tables to
control the layout of a document, it is important to understand how they are dealt with by non-visual user
agents, such as voice browsers; otherwise, those with visual impairments might not be able to access your
pages. In order to understand how to make tables accessible, you first need to learn how tables linearize
your page.
How Tables Linearize
To understand how a screen reader reads a table, consider the following simple table:
132
- Chapter 4: Tables
Column 1, Row 1
Column 2 Row 1
Column 1, Row 2
Column 2, Row 2
Figure 4-9 shows what this simple table would look like in a browser.
Figure 4-9
Screen readers tend to perform linearization on a table when they read it to a visitor. This means that they
start at the first row and read the cells in that row from left to right, one by one, before moving on to the
next row, and so on until they have read each row in the table. The order in which the cells in Figure 4-9
would be read is therefore:
❑ Column 1 Row 1
❑ Column 2 Row 1
❑ Column 1 Row 2
❑ Column 2 Row 2
Linearization of Tables Used for Layout
Because tables can be used to control where elements appear on a page, web designers often used to use
tables as a means for positioning text and images where they wanted them to appear. Because the designer
can control properties of the table, such as width of each individual cell, it’s possible to create layouts that
feature more than one column of text and to determine how wide each column should appear. Often the
body of entire web pages is contained within a table.
While it is the W3C’s intention that tables should be used solely for tabular data and that CSS is
the preferred mechanism for positioning elements on the page, until the support for CSS positioning
in browsers improves (something you learn about in Chapter 9) and until more designers learn how
to make best use of CSS positioning, it is likely that tables will still be used to control the layout of
web pages.
You learn more about using both tables and CSS to control positioning of elements on a page in Chapters 9
and 10, but for now you should consider how pages that are written inside tables linearize for users of
screen readers and that you should use a table for layout only if you can make sure that it will linearize
correctly.
133
- Chapter 4: Tables
As mentioned earlier in the chapter, you can include markup inside a table cell, as long as the whole ele-
ment is contained within that cell. This means you can even place another whole table inside a table cell,
creating what’s called a nested table.
If you use nested tables, when a screen reader comes across a cell containing another table, the whole of
the nested table must be linearized before the reader can move onto the next cell. For example, Figure 4-10
shows a common page layout.
Figure 4-10
The layout in Figure 4-10 is created using a table with two columns and three rows:
❑ In the first row, the header and logo are in a cell that spans both columns.
❑ In the second row, the first cell contains the navigation bar, while the second cell contains a nested
table with three rows and just one column.
❑ In the third row, the cell spans both columns like the first one.
Here is the code for this page (note that there are also some CSS rules in the source document used to style
this table, ch04_eg10.html):
Page heading and logo
Navigation item 1
Navigation item 2
Navigation item 3
Navigation item 4
Article 1
Article 2
134
- Chapter 4: Tables
Article 3
Footer
This example could have used the element for the first row and the element for the last
row, but because the content of the table isn’t really tabular data, it is not the intended use of the
element in the first place; I will rely only on the basic elements.
In this example, the order in which pages are read is as follows:
❑ Page heading and logo
❑ Navigation item 1
❑ Navigation item 2
❑ Navigation item 3
❑ Navigation item 4
❑ Article 1
❑ Article 2
❑ Article 3
❑ Footer
Ideally you would be testing your tables in a voice browser such as one of the ones listed at www.w3.org/
WAI/References/Browsing#2.
Remember that if you are using tables to control layout, you should use style sheets rather than markup
to control how you want the text to appear in a table. (For example, do not use a element just to get
text centered and in a bold font; use it for headings only, and do not use the element to get italicized
text, as a screen reader may add inflection to the voice to show emphasis.)
Linearization of Tables Used for Data
If you use tables to represent data, you should try to keep your tables simple, without cells spanning rows
or columns, because they can make listening to a table very complicated. Here are some general guide-
lines for creating tables to hold data:
❑ Always try to use the element to indicate a table heading. If you do not like their visual
representation you can override this using CSS.
❑ If you cannot use the element to indicate table headings, use the scope attribute with a
value of row or col on all cells that are headings.
135
- Chapter 4: Tables
❑ Always put headings in the first row and the first column.
❑ If your table is complex and contains cells that span more than one cell, then use the headers
attribute on those cells, and the next cell in the linearization process to clearly indicate which
heading applies to that cell.
Summar y
In this chapter you have seen how tables can be a powerful tool for web developers. Tables are not only
used to lay out tabular data, but are often used to control layout of pages.
You have seen how all tables are based on a grid pattern and use the four basic elements: , which
contains each table; , which contains the rows of a table; , which contains a cell of table data;
and , 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 and element to any table that may be longer than a browser window or sheet of
printed paper, as they help a reader relate between the content and the information in headers or footers.
You can 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, and you can group columns together
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 sites
are accessible to users with visual impairments. The chapter ended with some guidelines for making
tables more accessible to all visitors.
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 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-11 be read out by a screen reader?
Figure 4-11
136
- Chapter 4: Tables
3. Create a table to hold the data shown in Figure 4-12. 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 should also have seen examples of how the border is generated in this chapter,
using another deprecated attribute, but on the element rather than the cells.
Figure 4-12
137
- 5
Forms
Almost every time you want to collect information from a visitor to your site, you need to use a form.
You have probably used several different kinds of forms on different web sites, from simple search
boxes, which allow you to enter keywords in order to find what you are looking for, to complex
forms that allow you to order groceries or book a holiday online.
Forms on the Web bear a strong resemblance to paper forms you have to fill out. On paper, there are
areas to enter text, boxes to check (or tick), options to choose from, and so on. On the Web, you can
create a form by combining what are known as form controls, such as text boxes (to enter text into),
checkboxes (to place a tick 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 learn:
❑ How to create a form using the element
❑ The different types of form control 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.
What you do with the data that you collect depends upon the server your web site is hosted on.
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, PHP, or JSP). See the book list at Wrox.com for books on at least some of these topics.
- Chapter 5: Forms
Introducing Forms
Any form that you create will live inside an element called . Between the opening and closing
tags, you will find the form controls (the text input boxes, drop-down boxes, checkboxes, a submit
button, and so on). A element can also contain other XHTML markup just like 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.
Once the data that you have entered arrives at the server, a script or other program usually processes the
data and sends a new web page back to you. The returned page will usually respond to a request you have
made or acknowledge an action you have taken.
As an example, you might want to add the search form shown in Figure 5-1 to your page.
Figure 5-1
You can see that this form contains a text box 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 (see Figure 5-2).
Figure 5-2
140
nguon tai.lieu . vn