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
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;
Search WWH ::

Custom Search