Простая таблица характеризуется тем, что в ней не используется цветовое решение, а визуальное отделение одного блока данных от другого происходит с помощью линий.
Вначале просмотрим таблицу без рамки, при этом ее контур на web-странице формируется горизонтальной линией сверху и снизу от таблицы (рис. 1).
Рис. 1. Таблица с горизонтальными линиями
Верхний заголовок таблицы (тег <TH>) также отделяется от ее данных линией, но уже меньшей толщины.
Для добавления линий воспользуемся стилевыми свойствами border-top и border-bottom, они устанавливают линию определенной толщины сверху и снизу от элемента. Применяя эти параметры к селектору TABLE, получим нужный вид таблицы. Аналогично указывается линия внизу ячеек с заголовком, только в этом случае border-bottom следует добавляем к селектору TH, как показано в примере 1.
Пример 1. Применение горизонтальных линий
В данном примере меняется выравнивание содержимого ячеек <TH> по левоой стороне, поскольку исходно для таких ячеек оно установлено по центру.
Следующий вариант таблицы еще проще выглядит и содержит всего две линии, которые разбивают содержимое таблицы на три блока (рис. 2). Первый блок содержит названия драгоценных камней, второй — годы, а третий — набор чисел.
Рис. 2. Простая таблица, оформленная при помощи линий
Горизонтальную линию создаем путем добавления стилевого свойства border-bottom к селектору TH, как это было показано в примере 1. А для вертикальной линии заводим новый класс, назовем его vl, который устанавливает линию справа, и добавляем класс к определенным ячейкам (пример 2).
Пример 2. Использование линий в таблице
В данном примере класс vl, который устанавливает вертикальную линию справа, добавляется ко всем ячейкам первой колонки, это тег <TH> и <TD>.
Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru
О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект