В HTML не предусмотрено специальных средств раскрашивания таблиц. Однако как Netscape Navigator, так и Microsoft Internet Explorer имеют расширения, позволяющие изменять цвет ячеек и рамок. Вы можете изменить цвет фона ячейки при помощи атрибута bgcolor перед размещением в ней текста или изображения, а также использовать атрибут bordercolor для изменения цвета рамки ячейки. Теги <table>, <td>, <th> и <tr> также допускают использование в них указанных атрибутов. Таким образом, вы можете изменить цвет всей таблицы, отдельной ячейки или строки таблицы.
Значения цветов, установленные на уровне ячейки, будут перекрывать значения, установленные на уровне строки, которые в свою очередь, будут перекрывать значения, заданные на уровне всей таблицы.
Пример
Создадим таблицу, удовлетворяющую следующим требованиям:
- цвет таблицы -- белый;
- вторая строка светло-серого цвета, в ячейке 2 -- цвет "teal";
- цвет надписи в ячейке 5 -- красный;
- первый столбец составляет 20% от ширины таблицы, два другие -- по 40%;
- ячейка 3 центрирована, а ячейка 4 -- выровнена вправо;
- ячейки 6 и 8 объединены в одну, центрированы и выровнены по нижнему краю ячейки;
- поля внутри ячеек -- 10 пикселей.
<html>
<body>
<table border="8" width="90%" bgcolor="white"
cellpadding="10" align="center">
<tr>
<th width="20%">Простой заголовок</th>
<th width="80%" colspan="2">Заголовок на 2 столбца</th>
</tr>
<tr bgcolor="#CCCCCC">
<th width="20%">Заголовок на 1 строку</th>
<td width="40%">Ячейка 1</td>
<td width="40%" bgcolor="teal">Ячейка 2</td>
</tr>
<tr>
<th width="20%" rowspan="3">Заголовок на 3 строки</th>
<td align="center">Ячейка 3</td>
<td align="right">Ячейка 4</td>
</tr>
<tr>
<td><font color="red">Ячейка 5</font></td>
<td rowspan="2" align="center" vertical-align="bottom">Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
</tr>
</table>
</body>
</html>
| Простой заголовок | Заголовок на 2 столбца | |
|---|---|---|
| Заголовок на 1 строку | Ячейка 1 | Ячейка 2 |
| Заголовок на 3 строки | Ячейка 3 | Ячейка 4 |
| Ячейка 5 | Ячейка 6 | |
| Ячейка 7 | ||
Задание
Создайте файл table.html, в котором разместите приведенную выше таблицу.