- •Теги для таблиц
- •Создание таблицы
- •Пример 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. Вложенные таблицы
Разделитель колонок
Использование полей не всегда подходит для установки нужного расстояния между колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу разных соображений. Тогда поможет добавление еще одной ячейки, которая выступает в качестве разделителя между колонками (пример 6).
Пример 6. Использование трех ячеек
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Две колонки</title>
<style type="text/css">
#maket {
width: 100%; /* Ширина всей таблицы */
}
TD {
vertical-align: top; /* Вертикальное выравнивание в ячейках */
padding: 5px; /* Поля вокруг ячеек */
}
TD#leftcol {
width: 200px; /* Ширина левой колонки */
background: #ccc; /* Цвет фона левой колонки */
border: 1px solid #000; /* Параметры рамки */
}
TD#rightcol {
background: #fc3; /* Цвет фона правой колонки */
border: 1px solid #000; /* Параметры рамки */
}
#spacer {
width: 10px; /* Расстояние между колонками */
}
</style>
</head>
<body>
<table cellspacing="0" id="maket">
<tr>
<td id="leftcol">Левая колонка</td>
<td id="spacer"></td>
<td id="rightcol">Правая колонка</td>
</tr>
</table>
</body>
</html>
В данном примере вводится еще одна колонка со стилевым идентификатором spacer, это позволяет легко менять ширину между колонками. Внутрь этой ячейки можно ничего не вкладывать, браузеры достаточно корректно работают с подобными ячейками.
На рис. 2 показан результат примера. Для наглядности и «красоты» вокруг колонок добавлена граница.
Рис. 2. Расстояние между колонками
Линия между колонками
Разделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Опять же, здесь пригодятся стили, с помощью которых создание линий значительно упрощается. Следует только установить свойство border-left для правой колонки или border-right для левой (пример 7).
Пример 7. Добавление линии
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Две колонки</title>
<style type="text/css">
#maket {
width: 100%; /* Ширина всей таблицы */
}
TD {
vertical-align: top; /* Вертикальное выравнивание в ячейках */
padding: 5px; /* Поля вокруг ячеек */
}
TD#leftcol {
width: 100px; /* Ширина левой колонки */
background: #ccc; /* Цвет фона левой колонки */
border-right: 1px dashed #000; /* Параметры линии */
}
TD#rightcol {
background: #fc3; /* Цвет фона правой колонки */
}
</style>
</head>
<body>
<table cellspacing="0" id="maket">
<tr>
<td id="leftcol">Левая колонка</td><td id="rightcol">Правая колонка</td>
</tr>
</table>
</body>
</html>
Результат данного примера показан ниже.
Рис. 3. Линия между колонок
Резюме
Создание колонок с помощью таблиц процесс достаточно простой и быстрый, следует только добавить таблицу с двумя ячейками и определить ее визуальные атрибуты. К тому же большинство параметров, определяющих вид таблицы, можно вынести в стили и таким образом ускорить процесс добавления однотипных таблиц и документов на их основе.
При двухколонном макете применяются разные средства по оформлению колонок. Например, используется фоновая заливка, добавляется рамка вокруг колонок, изменяется расстояние между ними или устанавливается вертикальная разделительная линия. Все эти вещи управляются с помощью стилей, что ведет к сокращению кода, расширяет варианты модификаций таблиц и удобству разработки сайта.