Улучшаем табличный дизайн стилями 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. Есть еще множество способов разместить содержимое так, как нужно, но самые необходимые уже описаны.


Оставить комментарий или два

Я не робот!

Оповещать о новых комментариях по RSS