HTML and CSS Reference
In-Depth Information
Table Border Colors
Most browsers display a table border in gray, in a raised style that gives the border a 3D
effect. There is no HTML attribute to change the border style, but many browsers allow
you to change the color by adding the
bordercolor
attribute to the
table
element,
using the syntax
<table border=”
value
” bordercolor=”
color
”> ... </table>
where
color
is either a recognized color name or a hexadecimal color value. For
example, the following HTML code adds a 10-pixel blue border to a table:
<table border=”10” bordercolor=”blue”> ... </table>
The exact appearance of the table border differs among browsers. Internet Explorer,
Google Chrome, and Safari display the border in a solid blue color; Firefox displays
the border in a raised style using two shades of blue; and Opera does not support the
bordercolor
attribute at all. Thus, you should not rely on getting a consistent border
color across all browsers with this attribute.
The
bordercolor
attribute has been deprecated by the World Wide Web Consortium
(W3C) and is being gradually phased out. The recommended method is to use one of the
CSS border styles discussed in Tutorial 4; however, you may still see this attribute used
in many older Web pages.
Spanning Rows and Columns
Reviewing the schedule from Figure 5-2, you notice that several programs are longer than
a half hour, and some are repeated across several days. For example, national news and
local news air every day at 6:00 and 6:30, respectively. Likewise, from Monday through
Thursday, the hour from 7:00 to 8:00 is needed for the shows Opera Fest, Radio U, Science
Week, and The Living World, respectively. And fi nally, The Classical Music Connection airs
Monday through Thursday for two hours from 8:00 to 10:00. Rather than repeat the names
of programs in all of the half-hour slots, Kyle would prefer that the table cells stretch across
those hours and days so that the text must be entered only once.
To do this, you create a spanning cell, which is a single cell that occupies more than
one row or one column in the table. Spanning cells are created by adding either or both
of the following
rowspan
and
colspan
attributes
rowspan=”
rows
” colspan=”
columns
”
to a
th
or
td
element, where
rows
is the number of rows that the cell should cover and
columns
is the number of columns. The spanning starts in the cell where you put the
rowspan
and
colspan
attributes, and goes downward and to the right from that cell. For
example, to create a data cell that spans two columns and three rows, you'd enter the
td
element as follows:
<td colspan=”2” rowspan=”3”> ... </td>
It's important to remember that when a cell spans multiple rows or columns, it pushes
other cells down or to the right. If you want to maintain the same number of rows and
columns in your table, you must adjust the number of cells in a row or column that
includes a spanning cell. To account for a column-spanning cell, you have to reduce
the number of cells in the current row. For example, if a table is supposed to cover if ve
columns, but one of the cells in the row spans three columns, you need only three cell
elements in that row: two cells that occupy a single column each and one cell that spans
the remaining three columns.
