HTML and CSS Reference
In-Depth Information
Planning the Table
To create effective tables, you must plan how the information will appear in the
table and then create a good design. Before writing any HTML code, sketch the table
on paper. After the table is sketched on paper, it is easier to see how many rows and col-
umns to create, if the table will include headings, and if any of the headings span rows or
columns. Conceptualizing the table on paper first saves time when you try to determine
which HTML table tags to use to create the table.
For example, to create a simple table that lists the times run by various cross-
country team members, you might sketch the table shown in Figure 4-8a. If runners
participate in two different race lengths, such as 5K and 10K, that information can be
included in a table designed as shown in Figure 4-8b. If the table needs to include dif-
ferent race dates for each race length, that information can be included in a table such
as the one shown in Figure 4-8c. Finally, to make the table easier for the Web page
visitor to understand, the table should include headings that span rows and columns.
For instance, in Figure 4-8b, the headings 5K and 10K each span two columns of data.
Because column spanning is used, you can easily see which runners ran in the 5K or
10K races. In Figure 4-8c, because of row spanning, you can easily tell what date each
race was run. Design issues such as these should be considered in the planning stage
before any HTML code is entered. Figure 4-9, on the next page, shows how the table
might look after it is coded. You will use a variety of style sheets together with format-
ting tag attributes to create the tables for the project in this chapter.
5K
Table Tutorial
Table tutorials are
available through online
sources. Tutorials take you
step-by-step through the
table creation process.
Search the Web for
the phrase HTML Table
Tutorial to find excellent
sources of information.
NAME1
NAME2
NAME3
NAME4
10K
TIME
TIME
TIME
TIME
NAME1
NAME2NAME3
NAME4
TIME
TIME
TIME
TIME
(a) Simple table.
(b) Column spanning added.
5K
10K
NAME1NAME2
NAME3NAME4
MAY 5
MAY 12
MAY 19
TIME
TIME
TIME
TIME
TIME
TIME
TIME
TIME
Meet
Dates
TIME
TIME
TIME
TIME
MAY 26
TIME
TIME
TIME
TIME
(c) Row spanning added.
Figure 4-8
