HTML and CSS Reference
In-Depth Information
he
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
iles named home.html, about.html, and what.html.
Oten 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 deined by table tags,
<table></table>
, enclosing one or more
table row elements,
<tr></tr>
, each of which encloses one or more table cells.
here are two diferent kinds of table cells: table header cells (
<th></th>
), and
table data cells (
<td></td>
). he 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 ixed 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
