لطفا منتظر باشید ...
10.2 Basic Table Tags
A wide variety of tables can be created with only five tags: the
<table> tag, which encapsulates a table and
its elements in the document's body content; the
<tr> tag, which defines a table row; the
<th> and <td> tags,
which define the table's headers and data cells; and
the <caption> tag, which defines a title or
caption for the table. Beyond these core tags, you may also define
and control whole sections of tables, including adding running
headers and footers, with the <colgroup>,
<col>, <tbody>,
<thead>, and
<tfoot> tags. Each tag has one or more
required and optional attributes, some of which affect not only the
tag itself but also related tags.
10.2.1 The <table> Tag
The
<table> tag and its
</table> end tag define and encapsulate a
table within the body of your document. Unless otherwise placed
within the browser window by style sheet, paragraph, division-level,
or other alignment options, the browser stops the current text flow,
breaks the line, inserts the table beginning on a new line, and then
restarts the text flow on a new line below the table.
<table>Function: Defines a table Attributes: align, background (  ,  ),bgcolor, border, bordercolor ( , ), bordercolordark (),bordercolorlight ( ), cellpadding,cellspacing, class, cols ( , ),dir, frame, height ( , ), hspace (),id, lang, nowrap ( ), onClick,onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, rules, style, summary, title, valign ( ), vspace (), widthEnd tag: </table>; never omitted Contains: table_content Used in: block |
is one or more <tr> tags, which define each
row of table contents, along with the various table sectioning tags:
<thead>, <tfoot>,
<tbody>, <col>, and
<colgroup>.
10.2.1.1 The align attribute (deprecated)
The
HTML 4 and XHTML standards have deprecated
this attribute in favor of the align property
provided by Cascading Style Sheets, yet it remains popular and is
currently well supported by the popular browsers.
Like images, tables are rectangular objects that float in the browser
display, aligned according to the current text flow. Normally, the
browser left-justifies a table, abutting its left edge to the left
margin of the display window. Or the table may be centered if under
the influence of the <center> tag, a
centered paragraph, or a centered division. Unlike images, however,
tables are not inline objects. Text content normally flows above and
below a table, not beside it. You can change that display behavior
with the align attribute or a cascading style
definition for the <table> tag.
The align attribute accepts a value of either
left, right, or
center, indicating that the table should be placed
flush against the left or right margin of the text flow, with the
text flowing around the table, or in the middle with text flowing
above and below.
Note that the align attribute within the
<table> tag is different from those used
within a table's element tags,
<tr>, <td>, and
<th>. In those tags, the attribute controls
text alignment within the table's cells, not
alignment of the table within the containing body-text
flow.
10.2.1.2 The bgcolor and background attributes
You
can make the background of a table a different color than the
document's background with the
bgcolor attribute for the
<table> tag. The color value for the
bgcolor attribute must be set to either an RGB
color value or a standard color name. Both the syntax of color values
and the acceptable color names are provided in Appendix G.
The popular browsers give every cell in the table (but not the
caption) this background color. You may also set individual row and
cell colors by providing the bgcolor attribute or
a style attribute for those rows or cells.
The
background attribute, a nonstandard extension
supported by the popular browsers, supplies the URL of an image that
is tiled to fill the background of the table. The image is clipped if
the table is smaller than the image. By using this attribute with a
borderless table, you can put text over an image contained within a
document.
10.2.1.3 The border attribute
The optional border
attribute for the <table> tag tells the
browser to draw lines around the table and the rows and cells within
it. The default is no borders at all. You may specify a value for
border, but you don't have to
with HTML. Alone, the attribute simply enables borders and a set of
default characteristics different for each of the popular browsers
(reexamine Figure 10-1; it has borders). With XHTML,
use border="border" to achieve the same default
results. Otherwise, in HTML or with XHTML, supply an integer value
for border equal to the pixel width of the 3D
chiseled-edge lines that surround the outside of the table and make
it appear to be embossed onto the page.
10.2.1.4 The frame and rules attributes
With Netscape 4, the border attribute is all or
nothing, affecting the appearance and spacing both of the frame
around the table and of the rule lines between data cells. Internet
Explorer Versions 4 and later and Netscape 6 let you individually
modify the various line segments that make up the borders around the
table (frame) as well as around the data cells
(rules).
The standard frame attribute modifies
border's effects for the lines
that surround the table. The default value what you get if you
don't use frame at all is
box, which tells the browser to draw all four
lines around the table. The value border does the
same thing as box. The value
void removes all four of the
frame segments. The frame
values above, below,
lhs, and rhs draw the various
border segments on the top, bottom, left, and right side,
respectively, of the table. The value hsides draws
borders on the top and bottom (horizontal) sides of the table;
vsides draws borders on the left and right
(vertical) sides of the table.
With standard tables (supported in Internet Explorer 4 and later and
in Netscape 6), you also may control the thickness of a
table's internal cell borders via the
rules attribute. The default
behavior, represented by the value of all, is to
draw borders around all cells. Specifying groups
places thicker borders between row and column groups defined by the
<thead>, <tbody>,
<tfoot>, <col>, and
<colgroup> tags. Using
rows or cols places borders
only between every row or column, respectively, while using
none removes borders from every cell in the table.
10.2.1.5 The bordercolor, bordercolorlight, and bordercolordark attributes
The popular browsers normally draw a table
border
in three colors, using light and dark variations on the
document's background color to achieve a 3D effect.
The nonstandard
bordercolor
attribute lets you set the color of the table borders and rules to
something other than the background (if borders are enabled, of
course). The bordercolor
attribute's value can be either an RGB hexadecimal
color value or a standard color name, both of which are described
fully in Appendix G.
Internet Explorer also lets you set the border edge colors
individually with special extension attributes: the
bordercolorlight and
bordercolordark colors shade the lighter and
darker edges of the border.
The effectiveness of the 3D beveled-border effect is tied to the
relationship between these two colors. In general, the light color
should be about 25% brighter than the border color, and the dark
color should be about 25% darker.
10.2.1.6 The cellspacing attribute
The cellspacing
attribute controls the amount of space placed between adjacent cells
in a table and along the outer edges of cells along the edges of a
table.
Browsers normally put 2 pixels of space between cells and along the
outer edges of the table. If you include a border
attribute in the <table> tag, the cell
spacing between interior cells grows by 2 more pixels (4 total) to
make space for the chiseled edge on the interior border. The outer
edges of edge cells grow by the value of the
border attribute.
By including the cellspacing attribute, you can
widen or reduce the interior cell borders. For instance, to make the
thinnest possible interior cell borders, include the
border and cellspacing=0
attributes in the table's tag.
10.2.1.7 The cellpadding attribute
The
cellpadding attribute controls
the amount of space between the edge of a cell and its contents,
which by default is 1 pixel. You may make all the cell contents in a
table touch their respective cell borders by including
cellpadding=0 in the table tag. You may also
increase the cellpadding space by making its value
greater than 1.
10.2.1.8 Combining the border, cellspacing, and cellpadding attributes
The interactions between the
border,
cellpadding, and cellspacing
attributes of the <table> tag combine in
ways that can be confusing. Figure 10-2 summarizes
how the attributes create interior and exterior borders of various
widths.
While all sorts of combinations of the border and
cellspacing attributes are possible, these are the
most common:
border=1 and cellspacing=0
produces the narrowest possible interior and exterior borders: 2
pixels wide.
border=n and
cellspacing=0 makes the narrowest possible
interior borders (2 pixels wide), with an external border that is
n + 1 pixels wide.
border=1 and
cellspacing=n tables
have equal-width exterior and interior borders, all with chiseled
edges just 1 pixel wide. All borders will be
n + 2 pixels wide.
Figure 10-2. The border, cellspacing, and cellpadding attributes of a table
10.2.1.9 The cols attribute
To
format a table, the browser must first read the entire table
contents, determining the number and width of each column in the
table. This can be a lengthy process for long tables, forcing users
to wait to see your pages. The nonstandard cols
attribute tells the browser, in advance, how many columns to expect
in the table. The value of this attribute is an integer value
defining the number of columns in the table.
The cols attribute only advises the browser. If
you define a different number of columns, the browser is free to
ignore the cols attribute in order to render the
table correctly. In general, it is good form to include this
attribute with your <table> tag, if only to
help the browser do a faster job of formatting your tables.
10.2.1.10 The valign and nowrap attributes
The valign
attribute sets the default vertical alignment of data in cells for
the entire table. Acceptable values for the valign
attribute in <table> are
top, bottom,
middle, or baseline; the
default vertical position is the center of the cell.
Browsers treat each table cell as
though it's a browser window unto itself, flowing
contents inside the cell as they would common body contents (although
they are subject to special table-cell alignment properties).
Accordingly, the browsers automatically wrap text lines to fill the
allotted table cell space. The nowrap attribute,
when included in the <table> tag, stops that
normal word wrapping in all rows in the table. With
nowrap, the browser assembles the contents of the
cell onto a single line, unless you insert a
<br> or <p> tag,
which then forces a break so that the contents continue on a new line
inside the table cell.
The valign and nowrap
attributes for the <table> tag currently are
supported by Internet Explorer Version 5 but not Version 6. You
achieve similar effects in Netscape and Internet Explorer 6 by
including a valign or nowrap
attribute within the individual <tr>,
<td>, and <th>
tags.
10.2.1.11 The width and height attributes
Browsers
automatically make a table only as wide as needed to correctly
display all of the cell contents. If necessary, you can make a table
wider with the width attribute.
The value of the width attribute is either an
integer number of pixels or a relative percentage of the screen
width, including values greater than 100%. For example:
<table width=400>
tells the extended browser to make the table 400 pixels wide,
including any borders and cell spacing that extend into the outer
edge of the table. If the table is wider than 400 pixels, the browser
ignores the attribute. Alternatively:
<table width="50%">
tells the browser to make the table half as wide as the display
window. Again, this width includes any borders or cell spacing that
extend into the outer edge of the table and has no effect if the
table normally is more than half the user's current
screen width.
Use relative widths for tables you want to resize automatically to
the user's window; for instance, tables you always
want to extend across the entire window (<table
width="100%">). Use an absolute width value for
carefully formatted tables whose contents become hard to read in wide
display windows.
For Netscape and Internet Explorer, you can use the nonstandard
height attribute to suggest a recommended height
for the table. The browser makes the table no shorter than this
height but may make the table taller if needed to contain the
table's contents. This attribute is useful when
trying to stretch tables to fit in a frame or some specific area of a
document but is of little use otherwise, particularly since it is not
a standard attribute.
10.2.1.12 The summary attribute
The summary attribute was introduced to
HTML in the 4.0 standard. Its value is a quote-enclosed string that
describes the purpose and summarizes the contents of the table. Its
intended use, according to the standard, is to provide extended
access to nonvisual browsers, particularly for users with
disabilities.
10.2.1.13 The hspace and vspace attributes
As with images, Netscape, but not Internet Explorer, lets you give
your table some extra space within the body text of your document.
Use the nonstandard hspace and
vspace attributes in the
<table> tag, each with a value equal to the
number of pixels of space to offset the table from the left and right
or top and bottom, respectively, of the enclosing text.
10.2.2 Common Table Attributes
The HTML and XHTML standards, combined with the CSS standard, provide
a number of attributes common not only to the
<table> tag and the other table-creation
tags but to most other tags as well. Except for the CSS-related
attributes class and style for
controlling the table display, none of the standard attributes are
yet fully supported by any of the popular browsers.
10.2.2.1 The id and title attributes
Use the id
attribute with a quote-enclosed string value to uniquely label a
<table> tag for later reference by a
hyperlink or an applet. Use the title attribute
with a string value to optionally entitle the table or any of its
segments for general reference. A
title's value need not be unique,
and it may or may not be used by the browser. Internet Explorer, for
example, displays the title
attribute's text value whenever the user passes the
mouse pointer over the element's contents. [Section 4.1.1.4] [Section 4.1.1.4]
10.2.2.2 The dir and lang attributes
Although its contents are predominantly
in English, the Web is worldwide. The HTML 4 and XHTML standards take
pains to extend the language to all cultures. We support that effort
wholeheartedly. The dir and
lang attributes are just small parts of that
process.
The dir attribute advises the browser which
direction the text of the contents should flow in, from left to right
(dir=ltr), as for common Western languages like
English and German, or right to left (dir=rtl), as
for common Eastern language like Hebrew and Chinese.
The lang attribute lets you explicitly indicate
the language used in the table or even individual cell contents. Its
value should be an ISO standard two-letter primary code followed by
an optional dialect subcode, with a hyphen (-)
between the two.
Currently, dir and lang are
supported by Internet Explorer Versions 5 and later and by Netscape
6. [Section 3.6.1.1] [Section 3.6.1.2]
10.2.2.3 The class and style attributes
The CSS standard is the sanctioned
way to define display attributes for HTML/XHTML elements, and it is
rapidly becoming the only way. Use the style
attribute to define display characteristics for the table and its
elements that take immediate effect and override the display styles
that may be currently in effect for the whole document. Use the
class attribute to reference a style sheet that
defines the unique display characteristics for the table and its
elements.
We discuss the class and style
attributes and the CSS standard in detail in Chapter 8. [Section 8.1.1] [Section 8.3]
10.2.2.4 The event attributes
The popular browsers have internal
mechanisms that detect the various user-initiated mouse and keyboard
events that can happen in and around your tables and their elements.
For instance, the user might click the mouse pointer in one of the
table cells or highlight the caption and then press the Enter key.
With the various event attributes, such as onClick
and onKeyDown, you can react to these events by
having the browser execute one or more JavaScript commands or applets
that you reference as the value to the respective event attribute.
See Chapter 12 for details.
10.2.3 The <tr> Tag
Make a new row in a table with the
<tr> tag. Place within the
<tr> tag one or more cells containing
headers, defined with the <th> tag, or data,
defined with the <td> tag (see Section 10.2.4). The <tr> tag
accepts a number of special attributes that control its behavior,
along with the common table attributes described in Section 10.2.2.
<tr>Function: Defines a row within a table Attributes: align, background ( ),bgcolor, bordercolor ( ), bordercolordark (),bordercolorlight ( ), char,charoff, class, dir, id, lang, nowrap ( , ), onClick,onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style, title, valign End tag: </tr>; may be omitted in HTML Contains: tr_content Used in: table_content |
the browser automatically creates empty cells to pad rows with fewer
defined cells.
10.2.3.1 The align and valign attributes
The
align attribute for the
<table> tag may be deprecated in the HTML
and XHTML standards, but it is alive and kicking for
<tr> and other table elements. The
align attribute for the
<tr> tag lets you change the default
horizontal alignment of all the contents of the cells in a row. The
attribute affects all the cells within the current row, but not
subsequent rows.
An align attribute value of
left, right,
center, justify, or
char causes the browser to align the contents of
each cell in the row against the left or right edge, in the center of
the cell, spread across the cell, or to a specified character in the
cell, respectively.
Similarly, you can change the default vertical alignment for the
contents of data cells contained within a table row with the
valign attribute. Normally, browsers render cell
contents centered vertically. By including the
valign attribute in the
<tr> tag with a value of
top, bottom,
center, middle, or
baseline (Internet Explorer only), you tell the
browser to place the table row's contents flush
against the top or bottom of their cells, centered, or aligned to the
baseline of the top line of text in other cells in the row,
respectively (see Figure 10-3). Netscape ignores the
baseline value.
<table border="border">
<tr>
<th>Alignment</th>
<th>Top</th>
<th>Baseline</th>
<th>Center</th>
<th>Middle></th>
<th>Bottom</th>
</tr>
<tr align="center">
<th><h1>Baseline_ _<br />Another line</h1></th>
<td valign="top">AAyy</td>
<td valign="baseline">_AAyy_</td>
<td valign="center">AAyy</td>
<td valign="middle">AAyy</td>
<td valign="bottom">AAyy</td>
</tr>
</table>
Figure 10-3. Effects of the valign attribute on Internet Explorer's (top) and Netscape's (bottom) table cell-content alignment
You also can specify the horizontal and vertical alignments for
individual cells within a row (see Section 10.2.4.1). Use the alignment attributes in the
<tr> tag to specify the most common
cell-content justifications for the row (if not the default), and use
a different align or valign
attribute for those individual cells that deviate from the common
alignment.
Table 10-1 contains the horizontal
(align) and vertical (valign)
table cell-content attribute values and options. Values in
parentheses are the defaults for the popular browsers.
Netscape and Internet Explorer | ||
|---|---|---|
Attribute | Headers (<th>) | Data (<td>) |
align | Left | (Left) |
(Center) | Center | |
Right | Right | |
Justify | Justify | |
Char[1] | Char[1] | |
valign | Top | Top |
(Center) | (Center) | |
(Middle) | (Middle) | |
Bottom | Bottom | |
Baseline | Baseline | |
10.2.3.2 The char and charoff attributes
Even
simple word processors let you line up decimal points for numbers in
a table. Until the advent of the HTML 4.0 standard, however, the
language was deficient in this feature. Now you may include the
char attribute to indicate which letter in each of
the table row's cells should be the axis for that
alignment. You need not include a value with char.
If you don't, the default character is
language-based: it's a period in English, for
example, and a comma in French. Include the char
attribute and a single letter as its value to specify a different
alignment character.
Use the charoff attribute and an integer value to
specify the offset to the first occurrence of the alignment character
on each line. If a line doesn't include the
alignment character, it should be horizontally shifted to end at the
alignment position.
The char and charoff attributes
are defined in HTML 4 and XHTML but are not yet supported by any of
the popular browsers.
10.2.3.3 The bgcolor and background attributes
Like
its relative for the <table> tag, the
bgcolor attribute for the
<tr> tag sets the background color of the
entire row. Its value is either an RGB color value or a standard
color name. Both the syntax of color values and the acceptable color
names are provided in Appendix G.
Every cell in the row is given this background color. Individual cell
colors can be changed by providing the bgcolor
attribute for those cells.
Unique to Netscape for the <tr> tag, the
nonstandard background attribute with its
image-file URL value places a graphic tiled into and behind the text
of the entire table row. For example, this tag fills the table row
with bricks:
<tr background="bricks.gif">
10.2.3.4 The bordercolor, bordercolorlight, and bordercolordark attributes
Like
their nonstandard brethren for the <table>
tag, Internet Explorer lets you use these attributes to set the color
of the borders within the current row.
Their values override any values set by the corresponding attributes
in the containing <table> tag. See the
corresponding descriptions of these extensions in Section 10.2.1.5 for details. Color values can be either RGB
color values or standard color names, both of which are described
fully in Appendix G.
10.2.3.5 The nowrap attribute
Browsers treat each table cell as
though it were a browser window unto itself, flowing contents inside
the cell as they would common body contents (although subject to
special table cell-alignment properties). Accordingly, the browsers
automatically wrap text lines to fill the allotted table cell space.
The nowrap attribute, when included in a table
row, stops that normal word wrapping in all cells in that row. With
nowrap, the browser assembles the contents of the
cell onto a single line, unless you insert a
<br> or <p> tag,
which forces a break so that the contents continue on a new line
inside the table cell.
10.2.4 The <th> and <td> Tags
The
<th> and <td> tags
go inside the <tr> tags of a table to create
the header and data cells, respectively, and to define the cell
contents within the rows. The tags operate similarly; the only real
differences are that the browsers render header text meant to
entitle or otherwise describe table data in boldface font style
and that the default alignment of their respective contents may be
different than for data. Data typically gets left-justified by
default; headers get centered (see Table 10-1).
<th> and <td>Function: Define table data and header cells Attributes: abbr, align, background ( , ),bgcolor, bordercolor ( ), bordercolordark (),bordercolorlight ( ), char,charoff, class, colspan, dir, headers, height, id, lang, nowrap, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, rowspan, scope, style, title, valign, width End tag: </th> or </td>; may be omitted in HTML Contains: body_content Used in: tr_content |
(<tr>) tag, the table cell tags support a
rich set of style and content-alignment attributes that you may apply
to a single data or header cell. These attributes override the
default values for the current row. There are special attributes that
control the number of columns or rows a cell may span in the table.
The <th> and <td>
tags also accept the common table attributes described in Section 10.2.2.The contents of the <th> and
<td> tags can be anything you might put in
the body of a document, including text, images, forms, and so
on even another table. And, as described earlier, the browser
automatically creates a table large enough, both vertically and
horizontally, to display all the contents of any and all the cells.
If a particular row has fewer header or data items than other rows,
the browser adds empty cells at the end to fill the row. If you need
to make an empty cell before the end of a row, for instance to
indicate a missing data point, create a header or data cell with no
content.
Empty cells look different than those containing data or headers if
the table has borders: the empty cell does not appear embossed onto
the window but instead is simply left blank. If you want to create an
empty cell that has incised borders like all the other cells in your
table, be sure to place a minimal amount of content in the cell: a
single <br> tag, for instance.
10.2.4.1 The align and valign attributes
The align and
valign attributes are identical to those
of the same name for the table row tag
(<tr>; see Section 10.2.3), except that when used with a
<th> or <td> tag,
they control the horizontal or vertical alignment of content in just
the current cell. Their value overrides any alignment established by
the respective align or valign
attribute of the <tr> tag but does not
affect the alignment of subsequent cells. See Table 10-1 for alignment details.
You may set the align attribute's
value to left, right, or
center, causing the browsers to align the cell
contents against the left or right edge or in the center of the cell,
respectively.
In addition, Internet Explorer Version 5, but not Version 6, supports
a value of justify so that the words spread out to
fill the cell, as in a newspaper column. Internet Explorer 6 centers
the align=justify text. Netscape 6 simply ignores
the justify attribute value and places the text
against the left margin of the table cell.
The valign attribute may have a value of
top (default), bottom,
center, middle, or
baseline, telling the browser to align the
cell's contents to the top or bottom edge, in the
center or middle of the cell, or (Internet Explorer 6, but not
Netscape 6) to the baseline of the first line of text in other cells
in the row.
10.2.4.2 The width attribute
Like its twin in the
<table> tag that lets you widen a table, the
width attribute for table cell tags lets you widen
an individual cell and hence the entire column it occupies. You set
the width to an integer number of pixels or a
percentage indicating the cell's width as a fraction
of the table as a whole.
For example:
<th width=400>
sets the current header cell's width, and hence the
entire column of cells, to 400 pixels wide. Alternatively:
<td width="40%">
creates a data cell with a column occupying 40% of the entire
table's width.
Since Netscape and Internet Explorer make all cells in a column the
same width, you should place a width attribute in
only one cell within a column, preferably the first instance of the
cell in the first row, for source readability. If two or more cells
in the same column happen to have width
attributes, the widest one is honored. You can't
make a column thinner than the minimum needed to display all of the
cells in the column. So, if the browser determines that the column of
cells needs to be at least 150 pixels wide to accommodate all the
cells' contents, it ignores a width attribute in one
of the column's cell tags that attempts to make the
cell only 100 pixels wide.
10.2.4.3 The height attribute
The
height attribute lets you specify a minimum
height, in pixels, for the current cell. Since all cells in a row
have the same height, this attribute need only be specified on one
cell in the row, preferably the first. If some other cell in the row
needs to be taller to accommodate its contents, the browser ignores
the width attribute, and all the cells in the row
are set to the larger size.
By default, all the cells in a row are the height of the largest cell
in the row that just accommodates its contents.
10.2.4.4 The colspan attribute
It's common to have
a table header that describes several columns beneath it, like the
headers we used in Figure 10-1. Use the
colspan attribute in a table header or data tag to
extend a table cell across two or more columns in its row. Set the
value of the colspan attribute to an integer value
equal to the number of columns you want the header or data cell to
span. For example:
<td colspan="3">
tells the browser to make the cell occupy the same horizontal space
as three cells in rows above or below it. The browser flows the
contents of the cell to occupy the entire space.
What happens if there aren't enough extra cells on
the right? The browser just extends the cell over as many columns as
exist to the right; it doesn't add extra empty cells
to each row to accommodate an overextended colspan
value. You may defeat that limitation by adding the needed extra but
contentless, cells to a single row. (Give them a single
<br> tag as their contents if you want
Netscape's embossed border around them.)
10.2.4.5 The rowspan attribute
Just as
the colspan attribute layers a table cell across
several columns, the rowspan attribute stretches a
cell down two or more rows in the table.
Include the rowspan attribute in the
<th> or <td> tag of
the uppermost row of the table where you want the cell to begin and
set its value equal to the number of rows you want it to span. The
cell then occupies the same space as the current row and an
appropriate number of cells below that row. The browser flows the
contents of the cell to occupy the entire extended space. For
example:
<td rowspan="3">
creates a cell that occupies the current row plus the two rows below
it.
Like the colspan attribute, the browser ignores
overextended rowspan attributes and extends the
current cell only down rows you've explicitly
defined by other <tr> tags following the
current row. The browsers do not add empty rows to a table to fill a
rowspan below the last defined row in a table.
10.2.4.6 Combining colspan and rowspan
You may extend a single cell both across several columns and down
several rows by including both the colspan and
rowspan attributes in its table header or data
tag. For example:
<th colspan="3" rowspan="4">
creates a header cell that, as you might expect, spans across three
columns and down four rows, including the current cell and extending
two more cells to the right and three more cells down. The browser
flows the contents of the cell to occupy the entire space, aligned
inside according to the current row's alignment
specifications or to those you explicitly include in the same tag, as
described earlier.
10.2.4.7 The nowrap attribute
Browsers treat each table cell as
though it were a browser window unto itself, flowing contents inside
the cell as they would common body contents (although subject to
special table cell-alignment properties). Accordingly, the browsers
automatically wrap text lines to fill the allotted table cell space.
The nowrap attribute, when included in a table
header or data tag, stops that normal word wrapping. With
nowrap, the browser assembles the contents of the
cell onto a single line, unless you insert a
<br> or <p> tag,
which forces a break so that the contents continue on a new line
inside the table cell.
10.2.4.8 The bgcolor and background attributes
Yet
again, you can change the background color this time for an
individual data cell. This attribute's value is
either an RGB hexadecimal color value or a standard color name. Both
the syntax of color values and the acceptable color names are
provided in Appendix G.
The background
attribute, supported by both Internet Explorer and Netscape 6,
supplies the URL of an image that is tiled to fill the background of
the cell. The image is clipped if the cell is smaller than the image.
Neither background nor bgcolor
overrides a related style-sheet property.
10.2.4.9 The bordercolor, bordercolorlight, and bordercolordark attributes
Internet Explorer lets you alter
the colors that make up an individual cell's
border if table borders are turned on with the
border attribute, of course. See the respective
attributes' descriptions under the
<table> tag in Section 10.2.1.5 for details.
The values for these three attributes override any values set for the
containing <table> or
<tr> tag. Their values can be either RGB
color values or standard color names, both of which are described
fully in Appendix G.
10.2.4.10 The char and charoff attributes
Just as for the
<tr> tag, you may use the
char attribute with <th>
or <td> to indicate which letter in the
table cell should be the axis for alignment, such as for decimal
numbers. You need not include a value with char in
HTML. If you don't, the default character is
language-based: it's a period in English, for
example, and a comma in French. Include the char
attribute and a single letter as its value to specify a different
alignment character.
Use the charoff attribute and an integer value to
specify the offset to the first occurrence of the alignment character
in the cell. If a cell doesn't include the alignment
character, it should be shifted horizontally to end at the alignment
position.
The char and charoff attributes
are standard in HTML 4 and XHTML but are not yet supported by any of
the popular browsers.
10.2.4.11 The headers and scope attributes
The headers attribute
associates header cells with a data cell in the table. The value of
this attribute is a quote-enclosed list of names that have been
defined for various header cells using the id
attribute. The headers attribute is especially
useful for nonvisual browsers, which might speak the contents of a
header cell before presenting the associated data cell contents.
Use the scope attribute to associate data cells
with a header cell. With a value of row, all cells
in the header's row are associated with the header
cell. Specifying col binds all the cells in the
current column to the cell. Using rowgroup or
colgroup binds all the cells in the
cell's row group (defined by a
<thead>, <tbody>,
or <tfoot> tag) or column group (defined by
a <col> or
<colgroup> tag) with the header cell.
10.2.4.12 The abbr attribute
The value of this attribute should be an abbreviated
description of the cell's contents. When short on
space, browsers might choose to render the abbreviation instead, or
they might use it in nonvisual contexts.
10.2.4.13 The axis attribute
Tables are usually chock full of data, prompting the reader to ask
questions. A tabular expense report, for example, naturally leads to
queries like "How much did I spend on
meals?" or "What did my cab fares
total?" In the future, browsers may support such
queries with the help of the axis attribute.
The value of this attribute is a quote-enclosed list of category
names that might be used to form a query. As a result, if you used
axis=meals on the cells containing meal purchases,
the browser could locate those cells, extract their values, and
produce a sum.
10.2.5 The <caption> Tag
A
table commonly needs a caption to explain its contents, so the
popular browsers provide a table-caption tag. Authors typically place
the <caption> tag and its contents
immediately after the <table> tag, but it
can be placed nearly anywhere inside the table and between the row
tags. The caption may contain any body content, much like a cell
within a table.
<caption>Function: Defines a table caption Attributes: align, class, dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style, title, valign ( )End tag: </caption>; never omitted Contains: body_content Used in: table_content |
10.2.5.1 The align and valign attributes
By
default, browsers place the caption's contents
centered above the table. You may place it below the table with the
align attribute set to the value
bottom (the value top, of
course, is equivalent to the default).
With Internet Explorer, you may alternatively use the
align attribute to control the horizontal position
of the caption and use the valign attribute to
change the caption's vertical position. Set the
align attribute to left,
center (the default), or right
to position the caption at the respective horizontal location
relative to the table, and use the valign
attribute to place a caption at the top or
bottom of the table. The other browsers ignore
Internet Explorer's different caption-alignment
values and attributes.
10.2.5.2 The many other attributes
Like
the other table tags, <caption> supports the
many and various language-, event-, and styles-related attributes,
which are described in Section 10.2.2. Use them
in good health. Just be sure to use the contextual selector
TABLE CAPTION when referring to
caption styles at the document level or in external style sheets.
