- •Теги для таблиц
- •Создание таблицы
- •Пример 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. Вложенные таблицы
Создание таблицы
Для создания таблицы служит тэг <TABLE>. Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг <TR>, для создания ячеек - <TH>, <TD>.
Тэг <TH> используется для создания ячеек с заголовками.
Тэг <TD> - для обыкновенных ячеек с данными.
Содержание ячеек заголовков отображается полужирным шрифтом и выравнивается по центру.
В чем же "прелесть" таблиц и почему они нашли такое широкое применение в сайтостроении? Дело в том, что, используя таблицы, можно сделать аккуратную компоновку информации в пределах Вэб-страницы, добиться точного расположения того или иного фрагмента страницы, будь то текст, графика или гиперссылка. Например, используя таблицу, можно легко добиться отображения текста в нескольких колонках, подобно газетной публикации.
Пример:
HTML-код:
<table border="1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> |
Отображение в браузере:
|
Обрамление таблицы
Для того, чтобы сделать видимой границы таблицы, служит атрибут BORDER тэга <TABLE>.
Определяя рамку таблицы, надо указать толщину ее внешних линий в пикселях. Чтобы задать толщину разграничивающих линий внутри таблицы, необходимо воспользоваться атрибутом CELLSPACING.
По умолчанию браузер отображает рамку таблицы темно-серым цветом. Чтобы изменить цвет рамки надо применить атрибут BORDERCOLOR.
Пример:
HTML-код:
<table border="2" cellspacing="5" bordercolor="#0ff00f"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> |
Отображение в браузере:
|
Заголовок таблицы
Для создания заголовка таблицы служит тэг <CAPTION>.
По умолчанию браузер располагает заголовок таблицы по центру над ней. При помощи атрибута ALIGN со значением bottom можно разместить заголовок под таблицей.
Следует сказать, что стандарт HTML не позволяет ставить одной таблице несколько заголовков.
Пример:
HTML-код:
<table border="1"> <caption> Заголовок таблицы </caption> <tr> <td>1</td> <td>2</td> </tr> </table> |
Отображение в браузере:
|
Группирование столбцов
Для группирования столбцов таблицы служат тэги <COLGROUP> и <COL>.
Дескриптор <COLGROUP> создает структурную группу столбцов, которая выделяет множество логически однородных ячеек. Так одна структурная группа может охватывать ячейки заголовков столбцов, а другая - ячейки, содержащие данные.
Дескриптор <COL> предназначен для формирования неструктурных групп столбцов, которые делят таблицу на разделы, не имеющих отношения к структуре. Это удобно в том случае, когда не все столбцы содержат информацию одного типа.