HTML and CSS Reference
In-Depth Information
To Save, Validate, Print, and View the HTML File and Print
the Web Page
1
With the USB drive plugged into your computer, click File on the menu bar and then click
Save to save the tennis.html file.
2
Display the Oceanside Hotel and Sports Club's ~ Tennis page in Internet Explorer.
3
4
Validate the Web page using the W3C validator service.
Return to the Oceanside Hotel and Sports Club's ~ Tennis page, refresh the Web page,
and then print it.
5
Return to Notepad++ and print the file.
Adding a Caption and Spanning Rows
Row and Column
Spanning
Creating headings that
span rows and columns
defines tables more clearly.
Many Web sites contain
information about row
and column spanning. For
more information about
row and column spanning,
search the Web.
If you need to add information to a table that does not fit into the table data cells, a caption
can be a good option. For example, look at the dining.html Web page in Figure 4-1d on
page HTML 155. The caption indicates that additional menu items are available upon
request. That “additional menu items” information does not fit into either the heading
or data cells for the table. It is also not appropriate to have that information as an h1 or
h2 heading. Putting that information in a caption is a perfect solution. The <caption> tag
defines a table caption. The <caption> tag must be inserted immediately after the <table>
tag and only one caption may be specified per table. By default, the caption will be cen-
tered above the table. In this project, you previously inserted the caption-side property in
the external style sheet to align the caption at the bottom of (beneath) the table.
When you want to merge several cells into one, you can use row or column
spanning. You can span rows or columns anywhere in a table. Generally, row and column
spanning is used to create headings in tables. The
rowspan attribute
of the <th> or <td>
tag sets a number of rows spanned by a cell. Although the chapter project uses only row
spanning, you can also span columns. The
colspan attribute
of the <th> or <td> tag sets
a number of columns spanned by a cell. Figure 4-9 on page HTML 164 shows examples
of both column and row spanning. Notice that both the 5K and 10K headings span (or
go across) two columns each. The heading Meet Dates spans (or goes across) four rows of
information.
Figure 4-36, on the next page, shows what the dining.html Web page looks like at
the start of the process. All of the table content is present, but there is no row or column
spanning. You decide during the design phase that this table would benefit from row span-
ning, but that column spanning is unnecessary. You will enter the HTML code to com-
plete the row spanning. In Figure 4-37, on the next page, the heading Lunch Menu is an
example of row spanning. In this case, this heading spans three rows. In the same figure,
the words Dinner Menu also span three rows of information.
The “stripe” class is already added to every other row to give the table a unique
style. In addition, in this section of the project, you will insert the <td> class “bolder”
(line 31 in the stylech4.css file) to make the text in certain cells bolder than the surround-
ing text. This helps to highlight the name of the main dish in every row, as shown in
Figure 4-37. You could have added individual inline styles specifying the bold font weight
to each data cell that you wanted to make bolder, but using a class in the external style
sheet allows you to apply that same font weight in other tables, if it is appropriate.
