HTML and CSS Reference
In-Depth Information
The first step when deciding to span rows or columns is to sketch the table design
on a piece of paper, as shown in Figure 4-38. Again, for this Web page, it was determined
that column spanning was unnecessary. The table organizes menu items by lunch and
dinner and thus should have rowspanning for those two row headings.
BLT
Chips and coleslaw
$9.95
Chicken croissant
Lunch Menu
Macaroni salad
$10.95
Veggie burger
Fries and fruit
$10.95
Salmon
Rice and vegetables
$18.95
Dinner Menu
Chicken parmesan
Baked potatoes and vegetables
$19.95
Quiche
Fruit salad
$16.95
Figure 4-38
After defining the main sections of the table, you must determine how many rows
each heading should span. In this project, the headings, Lunch Menu and Dinner Menu,
should span three rows. In the following steps, you will open the file dining.html, link the
external style sheet stylesch4.css, and add rowspan attributes to create table headings that
span rows.
•
Determine if a caption is needed
. A caption can help clarify the table's purpose. For
some tables, such as the table used to position images and the tables used to create
navigation bars, captions are not appropriate. Tables used to structure columns and
rows of information, such as the dining table, can benefit from having a caption to
clarify or add information about the contents of the table. The caption tag must be
inserted directly after the <table> tag.
Determine whether to use row and column spanning
Plan
Ahead
•
. The purpose of the table
determines whether you need to add row or column spanning. If the content is broken
into logical segments of information, you may also need to include row or column
spanning in order to make the content clear. If you decide to add row or column
spanning, it is best to sketch your ideas on paper first. This could help you understand
more clearly what tags you need to use where.
Determine if different colors are needed for backgrounds
•
. You can help visitors more
easily read a table full of information by varying the background colors effectively. If
you use the same color background for the same level (or type) of information, it can
help visually organize the information. Again, you may have to use a light font color if
the background color is very dark.
To Open an HTML File
1
Switch to Notepad++ and open dining.html, located in the Chapter04\ChapterFiles folder.
