Posts Tagged ‘border-top’

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

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , ,

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

Вначале рассмотрим таблицу без рамки, при этом ее контур на веб-странице формируется горизонтальной линией сверху и снизу от таблицы (рис. 1).

Рис. 1. Таблица с горизонтальными линиями

Рис. 1. Таблица с горизонтальными линиями

Верхний заголовок таблицы (тег <th>) также отделяется от ее данных линией, но уже меньшей толщины.

Для добавления линий воспользуемся стилевыми свойствами border-top и border-bottom, они устанавливают линию определенной толщины сверху и снизу от элемента. Применяя эти свойства к селектору TABLE, получим нужный вид таблицы. Аналогично указывается линия внизу ячеек с заголовком, только в этом случае border-bottom следует добавить к селектору TH, как показано в примере 1. (далее…)