×
Traktatov.net » HTML, XHTML и CSS на 100% » Читать онлайн
Страница 35 из 156 Настройки

•  – данных в ячейке внизу/по центру/ вверху.

В листинге 3.6 приведен пример использования в различных комбинациях описанных выше атрибутов форматирования таблицы и содержимого ячеек (рис. 3.11).

Листинг 3.6. Пример использования выравнивания таблицы и содержимого ячеек

Простая HTML-таблица

Наименование товара
Товар КодКоличествоЦена
Клей028190 шт 12,2 руб
Скотч058120 шт 4,6 руб
Ластик986100 шт 2,3 руб

Рис. 3.11. Пример использования выравнивания таблицы и содержимого ячеек

3.8. Объединение ячеек таблицы

На практике встречается большое количество таблиц, в которых одна ячейка объединяет в себе несколько ячеек по высоте и ширине (см. рис. 3.2). В HTML ячейки объединяют с помощью атрибутов colspan и rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan – по вертикали.

На рис. 3.12 изображена таблица с объединенными ячейками. Заголовок таблицы находится в ячейке, объединяющей все три ячейки строки. Таблица содержит еще две ячейки, каждая из которых объединяет две ячейки по вертикали. Код такой таблицы приведен в листинге 3.7.

Рис. 3.12. Таблица с объединенными ячейками


Листинг 3.7. Пример использования атрибутов объединения ячеек

HTML-таблица

Ячейка объединяет в себе все ячейки строки
Ячейка на две строки Ячейка 2х2Ячейка 2х3
Ячейка 3х2Ячейка 3х3
Ячейка на две строкиЯчейка 4х2Ячейка 4х3
Ячейка 5х2Ячейка 5х3

3.9. Установка фонового цвета или рисунка ячейки

В HTML возможны различные варианты установки фонового цвета или рисунка. Благодаря атрибуту bgcolor можно изменять цвет содержимого ячейки, строки, группы столбцов, группы строк, таблицы целиком.

Используя конструкцию , чередующуюся с конструкцией (со стандартным фоновым цветом ячеек), можно создать таблицу, изображенную на рис. 3.13.

Рис. 3.13. Пример использования атрибута bgcolor


С помощью атрибута background можно задать графический фон ячейки или таблицы целиком, указав путь к изображению. Например, .

Если размеры изображения превышают габариты ячейки или таблицы, для которых оно предназначено, браузер обрезает его таким образом, чтобы оно уместилось в пределах соответствующего объекта.