To place the caption below the table, add the attribute align with the value bottom to the caption element.. Grid lines are a function of the border attribute specified in the table tag
Trang 1content can be placed in a section element without having to reduce all the
headings by one level Remember, there should be only one level-one heading
on a page The exception to this rule is when a page is composed of multiple
sections In that case, each section is allowed to retain the level-one heading it
would have when published on its own Although a section element may
con-tain other sections, a section’s parent element should only be another section
or the body element It would be incorrect to have a section inside a division
Also in HTML5, a number of elements behave as divisions but actually pro-vide specific semantic meaning for robots and other HTML processors
The article element, <article></article>, should be used when marking
up content that is article-like, such as the posts on a blog or the articles in an
online magazine Like the section element, an article element can contain all
markup that would be appropriate if the article was published on a page by
itself, including a single address element with authorship information Unlike
the section element, an article should not be nested inside another article
Similarly, the navigation (<nav></nav>), header (<header></header>), and footer (<footer></footer>) elements are semantic markup intended to provide
more information for search robots and other nonhuman readers than can
be gleaned from division elements To illustrate, consider a web page using
division elements with id and class attributes to define the various parts of the
page Example 2.18 shows the HTML Figure 2.18 shows how this page appears
in a browser
Example 2.18: HTML divisions
<!DOCTYPE html>
<html>
<head>
<title>Example 2.18</title>
<style type="text/css">
body { padding: 0 36px; }
h1 { font-family: sans-serif; padding-top: 60px; }
#header { margin-bottom: 36px; }
#header img { float: left; }
#header a { text-decoration: none; }
#top-menu,
#bottom-menu { margin-left: -36px; }
Trang 2#top-menu li { float: left;
padding: 5px;
border: 1px solid;
list-style: none;
margin-right: 5px; }
#bottom-menu li { float: left;
padding: 0 10px;
border-right: 1px solid;
list-style: none; }
div.navigation { clear: left; font-family: arial,sans-serif;}
address { clear: left; text-align: right; padding-top: 36px;}
</style>
</head>
<body>
<div id="header"> <! Logo and main menu >
<div id="logo">
<img src=" /images/logo.gif" alt="Logocorp Inc."/>
<h1>Welcome to Logocorp</h1>
</div>
<div class="navigation">
<ul id="top-menu">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="what.html"> </a></li>
</ul>
</div>
</div>
<hr/>
<div id="content"> <! content division >
<h2>Logocorp News</h2>
<p>We are doing good things </p>
<p>Logos are everywhere </p>
continues
Trang 3</div>
<hr />
<div id="footer"> <! page footer >
<div class="navigation">
<ul id="bottom-menu">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="what.html"> </a></li>
</ul>
</div>
<address>copyright © 2010, Logocorp, Inc.</address>
</div>
</body>
<html>
Figure 2.18: using division elements
Example 2.18: HTML divisions (continued)
Trang 4The id and class attributes used in Example 2.18 may be useful to the next
web developer who works with the code, but they do not provide any useful
information to search robots, because they are arbitrary names If the division
elements are replaced with appropriate header, footer, and nav elements, an
HTML5-aware browser would display the page similarly to the page shown
in Figure 2.18 An HTML5-aware robot, on the other hand, would be able to
make greater sense of the page Note that if you experiment with the preceding
code, clicking the links gives you File Not Found errors unless you also have
files named home.html, about.html, and what.html
TA B LE S
Often you need to present information in a more structured fashion than that
provided by lists Tables allow information to be displayed in rows and
col-umns Tables are defined by table tags, <table></table>, enclosing one or more
table row elements, <tr></tr>, each of which encloses one or more table cells
There are two different kinds of table cells: table header cells (<th></th>), and
table data cells (<td></td>) The default for browsers is to use the default font
for data cell text and bold, centered text for header cell content
Tables are intended for the layout of tabular data such as the contents of a
spreadsheet However, tables are used extensively on the Web to position and
lay out page elements Tables give web designers and developers a powerful
tool to precisely position page elements on a fixed grid As a bonus,
develop-ers can set the background color of a table cell by adding the BGCOLOR attribute
to that element Before this change, designers could only set the background
color of the entire page
Example 2.19 generates a simple three-row-by-three-column table, and
Figure 2.19 shows the result
Example 2.19: HTML markup for a simple table
<!DOCTYPE html>
<html>
<head><title>Example 2.19</title></head>
<body>
<table>
<caption>total table items</caption>
<tr>
<th></th> <th>lunch</th> <th>dinner</th>
continues
Trang 5</tr>
<tr>
<th>kitchen</th> <td>23</td> <td>30</td>
</tr>
<tr>
<th>dining room</th> <td>31</td> <td>45</td>
</tr>
</table>
</body>
</html>
Figure 2.19: A simple table
For the table displayed in Figure 2.19, it is important to note the following
First, the table is only as wide as it needs to be Second, the caption is centered
above the table because that is where table captions are placed by default, not
because the caption element appears before the table rows To place the caption
below the table, add the attribute align with the value bottom to the caption
element Finally, no grid lines indicate the table’s borders and cells Grid lines
are a function of the border attribute specified in the table tag and any CSS
border properties assigned to the table’s elements
The table element has optional subelements for marking up logical groups
of rows The table head element (<thead></thead>), table foot element
(<tfoot></tfoot>), and table body element (<tbody></tbody>), can each
contain zero or more table row elements A table can have many table body
elements but no more than one table head and one table foot element
Com-bining these factors, the model for a table follows this form:
Example 2.19: HTML markup for a simple table (continued)
Trang 6<table>
<caption> <! title text for this table > </caption>
<thead>
<tr>
<th>row 1, col 1 head</th>
<th>row 1, col 2 head</th>
</tr>
</thead>
<tbody> <! first table body section >
<tr>
<td>row 2, col 1</td>
<td>row 2, col 2</td>
</tr>
<tr>
<td>row 3, col 1</td>
<td>row 3, col 2</td>
</tr>
</tbody>
<tbody> <! second table body section >
<tr>
<td>row 4, col 1</td>
<td>row 4, col 2</td>
</tr>
<tr>
<td>row 5, col 1</td>
<td>row 5, col 2</td>
</tr>
</tbody>
<tfoot> <! table footer section >
<tr>
<td>row 6, col 1</td>
<td>row 6, col 2</td>
</tr>
</tfoot>
</table>
Trang 7A number of attributes can be used with table elements, although the func-tions of many of them have been replaced by CSS properties Here are some of
the more useful attributes that can be added to the table tag:
align Valid values are left, right, and center left and right are
equivalent to the CSS float property
width The table’s width, specified as either an absolute number
of pixels or a percentage height The table’s height, specified as either an absolute number
of pixels or a percentage border The pixel width of the table’s border and grid lines cellspacing The number of pixels between the “walls” of adjacent cells cellpadding The number of pixels between the “walls” of a cell and its
contents Similar to the CSS padding property
bgcolor The table’s background color, expressed as an RGB value The align attribute can also be added to table row and cell elements But the values control the text alignment property of the cell contents, not the
float-ing properties of the element, as with the table element This inconsistency is
due to the need for browsers to be backward-compatible with earlier versions
of HTML In addition to the values left, right, and center, the align attribute
can have the value justify when used in table row or cell elements The valign
attribute (vertical alignment) controls the vertical positioning of the content
within a cell It can have the values top, bottom, or middle (the default)
Alignment specified at the table cell level has precedence over row align-ment, which has precedence over table body, head, or foot alignment
Con-versely, alignment is inherited from the head/body/foot level if not specified at
the row level, and cell alignment is inherited from the row level if not specified
at the cell level
The width attribute sets an initial maximum width for the table to occupy
A browser attempts to adjust the cell sizes and word-wrap the contents of the
cells to fit within this value However, content always has a minimum width
that is determined by the number of letters in the longest word or the width of
the widest image Therefore, it is possible for a table to be wider than the value
of the width attribute’s value By contrast, the height attribute sets an initial
minimum height for the table A browser just adds extra space above and/or
Trang 8below cell contents, depending on the value of the align attribute In general, it
is better to specify table widths and heights using CSS properties
Adding a border attribute with a positive integer to the table tag turns on
the table’s grid lines and draws a border around the entire table, excluding any
caption The table border is always that number of pixels thick The grid lines,
however, are that size only if there is enough spacing between the cells The
spacing between cells is controlled by the cellspacing attribute, which can have
any nonnegative integer value The default value is about 2 pixels (depending
on the browser) Specifying a table element with 0 cell spacing and a border of
1 pixel causes the browser to draw a hairline (1-pixel) grid
Cell padding is the number of pixels that separate the contents of table cells
from the cell walls, and it applies to all cells within a table This attribute is of
less importance than the cellspacing attribute because web developers have
much more control using the CSS padding property, which can be used to add
different amounts of padding on each side of the content
To make it look better, we will add some attributes to the table defined in
Example 2.19, along with some CSS styles Example 2.20 shows the HTML
that generates the page shown in Figure 2.20
Example 2.20: providing table alignment and spacing
<!DOCTYPE html>
<html>
<head>
<title>Example 2.20</title>
<style type="text/css">
body { padding-top: 36px; }
th, td { padding: 3px 6px; }
thead th { text-align: right; }
th { text-align: left; }
td { text-align: right; }
caption { font-style: italic; }
</style>
</head>
<body>
<table cellspacing="0" border="1" align="center" width="80%">
<caption>Total Table Items</caption>
continues
Trang 9<thead>
<tr>
<th></th> <th>lunch</th> <th>dinner</th>
</tr>
</thead>
<tr>
<th>kitchen</th> <td>23</td> <td>30</td>
</tr>
<tr>
<th>dining room</th> <td>31</td> <td>45</td>
</tr>
</table>
</body>
</html>
Figure 2.20: A table with good alignment and spacing
Numeric data in a table looks better when aligned on the right This CSS statement
thead th { text-align: right; }
specifies right alignment for table head cells with the thead element The
state-ment following that specifies left alignstate-ment for the th elestate-ments used as row
labels The padding property for both th and td elements is given the value
3px 6px, which is a shorthand way of saying 3 pixels for the top and bottom
padding and 6 pixels for the left and right padding The table shown in
Example 2.20: providing table alignment and spacing (continued)
Trang 10Figure 2.20 has additional padding in the table cells because the width
attri-bute sets a minimum width of 80 percent of the available space for the table,
causing the cells to be stretched horizontally
To make even fancier tables, web developers use the rowspan and colspan
attributes Example 2.21 illustrates these techniques
Example 2.21: A table with spanned rows and columns
<!DOCTYPE html>
<html>
<head>
<title>Example 2.21</title>
<style type="text/css">
body { padding: 36px; }
th, td { padding: 3px 6px; }
th { text-align: left; }
td { text-align: right; }
caption { font-style: italic; }
</style>
</head>
<body>
<table border="2">
<caption align="bottom">The Inner Planets</caption>
<tr>
<th rowspan="2"></th>
<th colspan="2">Distance from sun</th>
<th rowspan="2">Year<br/>Length</th>
<th rowspan="2">Day<br/>Length</th>
</tr>
<tr>
<th>Kilometers</th><th>AUs</th>
</tr>
<tr>
<th>Mercury</th>
<td>57,900,000</td><td>.38</td><td>88 days</td><td>59 days</td>
</tr>
<tr>
continues