HTML and CSS Reference
In-Depth Information
5
TUTORIAL
Working with
Tables and
Columns
Creating a Radio Program Schedule
OBJECTIVES
Session 5.1
• Explore the structure of a
Web table
• Create headings and cells
in a table
• Create cells that span multiple
rows and columns
• Add a caption to a table
• Create row and column groups
• Add a summary to a table
Case |
KPAF Radio
Session 5.2
• Format a table using HTML
attributes
• Format a table using CSS styles
• Collapse table borders
• Display page elements in
tabular form
• Create a multi-column layout
Kyle Mitchell is the program director at KPAF, a public radio station
broadcasting out of Bismarck, North Dakota. To remain viable,
it's important for the station to continue to have a presence on the
Web. With this in mind, Kyle has begun upgrading the KPAF Web
site. He envisions a site in which listeners have quick and easy
access to information about the station and its programs.
The Web site includes pages listing the KPAF morning, afternoon,
and evening schedules. Kyle decides that this information is best
conveyed to the listener in a table, with each column of the table
displaying one day's program schedule and each row displaying the
broadcast times for the various KPAF programs. Kyle has never cre-
ated a Web table, so he's come to you for help in designing a Web
page describing the KPAF evening schedule. Kyle wants the table
you create to be easy to read and informative. He also wants you to
add table styles that will enhance the appearance of the Web page.
STARTING DATA FILES
tutorial.05
tutorial
review
case1
case2
schedtxt.htm
tablestxt.css
kpaftxt.css
kpaf.jpg
modernizr-1.5.js
morningtxt.htm
programstxt.css
kpaf2.css
kpaf.jpg
modernizr-1.5.js
stabletxt.css
sudokutxt.htm
jpf.css
+ 3 graphic fi les
modernizr-1.5.js
caltxt.css
febtxt.htm
ccc.css
+ 11 graphic fi les
modernizr-1.5.js
case3
case4
dhometxt.htm
dtabletxt.css
dome.css
+ 10 graphic fi les
modernizr-1.5.js
rooms.txt
hcclogo.jpg
modernizr-1.5.js
HTML 317
