HTML and CSS Reference
In-Depth Information
Formatting Tables with CSS
Starting with CSS2, Cascading Style Sheets included support for Web tables. As browser
support for these styles has grown, CSS gradually has replaced the HTML attributes
you've just reviewed; although you will still frequently see those HTML attributes used
on the Web. Kyle suggests that you replace the HTML table attributes with an external
style sheet that he can apply to all of the program schedule tables on the KPAF Web site.
To create the style sheet:
◗
1.
Open the
tablestxt.css
file from the tutorial.05\tutorial folder. Enter
your name
and
the date
in the comment section of the file. Save the file as
tables.css
in the
same folder.
◗
2.
Return to the
schedule.htm
file in your text editor and insert the following
link
element directly above the closing
</head>
tag:
<link href=”tables.css” rel=”stylesheet” type=”text/css” />
◗
3.
Because you'll be replacing the HTML attributes with CSS styles, delete the
border
,
cellpadding
, and
cellspacing
attributes from the opening
<table>
tag.
◗
4.
Delete the
valign
attribute from the opening
<tbody>
tag.
◗
5.
Save your changes to the file.
Now that you've linked the
schedule.htm
fi le to the
tables.css
style sheet and you've
removed the old HTML table attributes, you're ready to begin creating the style sheet.
You'll start with styles for the table border.
Don't combine HTML
table attributes and
CSS table styles in the
same Web table design.
Choose one or the other to
avoid conflicts in the two
approaches.
Table Border Styles
The fi rst styles you'll apply to the program schedule are the border styles. Web tables
use the same border styles you already used with other page elements in Tutorial 4.
Unlike the HTML
border
attribute, you can apply one set of borders to a Web table itself
and another set of borders to the individual cells within the table. You decide to add a
10-pixel purple border in the outset style around the entire schedule table. You'll also
add a 1-pixel solid gray border around each cell within the table.
To add the table border styles:
◗
1.
Return to the
tables.css
file in your text editor. Add the following style to apply a
border to the entire Web table:
/* Styles for the schedule table */
table.schedule {
border: 10px outset rgb(153, 0, 153);
}
◗
2.
Add the following style to apply borders to each table cell (see Figure 5-30):
table.schedule th, table.schedule td {
border: 1px solid gray;
}
