- •Теги для таблиц
- •Создание таблицы
- •Пример 12.1. Создание таблицы
- •Создание таблицы
- •Пример:
- •Обрамление таблицы
- •Пример:
- •Заголовок таблицы
- •Пример:
- •Группирование столбцов
- •Пример:
- •Группирование строк
- •Пример:
- •Задание цвета элементов таблицы
- •Пример:
- •Графический фон таблицы
- •Пример:
- •Выравнивание данных в таблице
- •Пример:
- •Изменение размеров таблицы
- •Пример:
- •Слияние ячеек таблицы
- •Пример:
- •Улучшение внешнего вида таблицы
- •Отображение границ таблицы
- •Пример:
- •Перенос слов в ячейках таблицы
- •Вложенные таблицы
- •Пример:
- •Обтекание таблицы текстом
- •Пример:
- •Особенности таблиц
- •Выравнивание таблиц
- •Пример 12.2. Выравнивание таблицы по правому краю
- •Объединение ячеек
- •Пример 12.3. Неверное объединение ячеек
- •Пример 12.4. Объединение ячеек по вертикали и горизонтали
- •Создание таблицы. Пример
- •Табличная верстка
- •Преимущества и недостатки таблиц
- •Преимущества таблиц
- •Создание колонок
- •«Резиновый» макет
- •«Склейка» изображений
- •Громоздкий код
- •Плохая индексация поисковиками
- •Нет разделения содержимого и оформления
- •Несоответствие стандартам
- •Особенности таблиц
- •Ширина таблицы
- •Ширина ячеек
- •Пример 1. Ширина ячеек
- •Пример 2. Свойство table-layout
- •Пример 3. Полосы прокрутки в ячейках
- •Содержимое ячеек
- •Объединение ячеек
- •Пример 4. Таблица с объединенными ячейками
- •Скорость загрузки таблицы
- •Макет из двух колонок
- •Ширина колонок
- •Пример 1. Ширина колонки в пикселах
- •Пример 2. Использование стилей
- •Поля внутри колонок
- •Пример 3. Использование полей
- •Пример 4. Поля в ячейках
- •Цвет фона колонок
- •Пример 5. Цвет фона
- •Разделитель колонок
- •Пример 6. Использование трех ячеек
- •Линия между колонками
- •Пример 7. Добавление линии
- •Макет из трех колонок
- •Ширина колонок в пикселах
- •Пример 1. Фиксированная ширина колонок
- •Ширина колонок в процентах
- •Пример 2. Ширина колонок в процентах
- •Сочетание процентов и пикселов
- •Пример 3. Ширина колонок в процентах и пикселах
- •Пример 4. Вложенные таблицы
Ширина ячеек
Ширина ячеек определяется атрибутом width тега <td>, причем устанавливать это значение требуется в том случае, если ширина ячейки должна быть задана.
Рассмотрим на примере тот случай, когда размер ячеек нужно указать. Предположим, что нам требуется создать на веб-странице две колонки, одна из них должна иметь размер 200 пикселов, а вторая занимать оставшееся место. Создаем таблицу с двумя ячейками и для левой ячейки задаем параметр width="200" (пример 1). Единицы измерения ставить не нужно, браузер сам понимает, что если задано число, значит, используются пикселы.
Пример 1. Ширина ячеек
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблица</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="4" border="1">
<tr>
<td width="200">Левая колонка</td><td>Правая колонка</td>
</tr>
</table>
</body>
</html>
Поскольку в данном примере ширина таблицы указана как 100%, таблица будет занимать всю свободную ширину окна браузера. При этом левая колонка берет под себя 200 пикселов, а правая — оставшееся свободное место.
Ширина ячейки иной раз может меняться, несмотря на то, что указана жестко. Это происходит, например, в том случае, если в ячейку добавили рисунок, размер которого превышает ширину ячейки. Чтобы вместить изображение, ячейка будет вынуждена раздаться. Также может повлиять на размер ячейки ее текстовое содержимое, которое содержит очень длинное слово.
Чтобы избежать указанной ситуации применяют несколько средств.
Не добавляют в ячейку фиксированной ширины те изображения, размер которых превышает ширину ячейки. Способ, конечно, звучит банально, тем не менее, зная особенности ячеек, можно избежать неприятностей с их отображением.
Для тега <table> используют стилевое свойство table-layout со значением fixed. Применение этого свойства позволяет обрезать рисунок, если он не помещается целиком в ячейку (пример 2).
Пример 2. Свойство table-layout
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблица</title>
<style type="text/css">
TABLE {
table-layout: fixed; /* Ячейки фиксированной ширины */
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="4" border="1">
<tr>
<td width="200"><img src="images/dino.gif" width="289" height="120" alt="Динозаврик"></td>
<td>...</td>
</tr>
</table>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Отображение рисунка при использовании свойства table-layout
Современные браузеры (Firefox 3+, Internet Explorer 8+, Chrome и Safari) несколько иначе показывают таблицу (рис. 2).
Рис. 2. Отображение рисунка в браузере Safari
Воспользоваться стилевым свойством overflow со значением scroll. Это свойство добавляет полосы прокрутки к содержимому, но из-за того, что он применяется к блочным элементам им нельзя воспользоваться для тега <td>. Поэтому приходится вкладывать внутрь ячейки тег <div> и устанавливать стилевое свойство для него (пример 3). Это конечно не совсем правильно и удобно, но зато может дать требуемый результат.