Улучшаем табличный дизайн стилями CSS

08.05.2013

Улучшаем табличный дизайн стилями CSS

В предыдущей записи говорилось про создание таблиц тегами HTML. Теперь же будем проводить оптимизацию данного дизайна, ведь случаются непоправки, и ожидаемый вид никак не получается. Некоторые атрибуты CSS исправят положение.

Например, при разработке сайтов изображение не влезает в ячейку, из-за этого выравниваются остальные ячейки, где содержимое становится искаженным. Возможно, появляются дополнительные прокрутки, а этого нельзя допускать. Если средствами HTML выполнить исправление не получается, то обратимся к CSS. Есть еще кое-что — полученный код нужно сохранять в файле со стилями CSS, либо использовать встроенные стили.

Приводим синтаксис атрибутов и их значений : { атрибут : значение; }. Проводим выравнивание содержимого ячеек. Выровнять его можно атрибутами text-align (по горизонтали) и vertical-align (по вертикали). Параметр text-align имеет значения left, right и center. Наверное, тут все понятно. У параметра vertical-align больше значений, приведем только некоторые из них — baseline (выравнивание происходит по воображаемой базовой линии ячейки), top (по верхнему краю), middle (по центру), bottom (по нижнему краю). Эти значения должны достаточно удовлетворить стандартные требования.

Переходим к отступам. Отступы можно указать внутренние (между содержимым и границами ячейки) и внешние (между ячейками). Для внутренних используется атрибуты padding-left (слева), padding-top (сверху), padding-right (справа), padding-bottom (снизу), padding (можно последовательно указать значения для всех сторон). В качестве значений нужно вписать абсолютные или относительные значения, например 2 см (2 cm) или 2 пикселя (2 px). Можно выбрать и автоматический режим (auto), значение тогда обычно равно нулю. Тоже самое производим с внешним отступом между ячейками, атрибутами margin-left, margin-top, margin-right, margin-bottom. Раз уж тут одинаково, повторяться не буду.

Также можно написать размеры ячеек или же всей таблицы, применяя атрибуты width и height. В качестве значений можно вписать абсолютные или относительные величины. Например, 20 cm или 130 px. Есть еще множество способов разместить содержимое так, как нужно, но самые необходимые уже описаны.