Таблицы в CSS

 Таблицы в CSS

Опубликовано в Все для сайта - Автор VARIATECHnik В Воскресенье, августа 12, 2018 Нет комментариев

 Таблицы в CSS

Данная статья посвящена стилям и свойствам, которые можно применять к таблицам в CSS. Ранее, в курсе по HTML мы уже рассматривали структуру таблиц, а также атрибуты и свойства, которые применяются к таблицам в HTML. В этой статье мы подробно разберем CSS свойства, позволяющие манипулировать внешним видом таблиц, без использования html атрибутов.

Рамка таблицы

Свойство border, которое мы подробно рассматривали в одном из уроков по CSS, позволяет задать рамку для элементов таблицы. Для этого достаточно перечислить необходимые дескрипторы таблицы и назначить им данное свойство.

Например:

На скриншоте ниже видно, что рамка действительно появилась, но попытаемся придать ей более привычный вид.

В CSS существует такое свойство, как border-collapse, которое позволяет объединить линии соприкосновения ячеек. В нашем случае, в данном свойстве по умолчанию стоит значение separate, которое означает, что вокруг каждой ячейки отображается своя линия, но мы можем это изменить, задав значение collapse для тега table.

 

Значения CSS свойства border-collapse:

-separate – вокруг каждой ячейки отображается собственная рамка;

-collapse – отображается одна линия соприкосновения ячеек;

-inherit – наследует значение родителя.

 

Например:

Теперь, как видно из скриншота, линии объединились.

 Ширина и высота таблицы в CSS

Тег table является блочным тегом, опираясь на это можно утверждать, что ширина и высота таблицы задается с помощью свойств width и height, которые мы подробно рассматривали в предыдущем уроке по CSS .

Назначим нашей таблице значения ширины, а ячейкам зададим высоту:

Наглядно, можно посмотреть на скриншоте ниже:

Выравнивание таблицы в CSS

С помощью уже известного нам свойства margin, можно задать необходимое положение для таблицы.

Выровняем нашу таблицу по центру окна браузера, задав для тега table свойство margin со значениями 0 auto.

Скриншот:

Выравнивание текста таблицы средствами CSS

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

Для выравнивания текста по вертикали предусмотрено свойство vertical- align, которое может принимать следующие значения:

-baseline – выравнивание по базовой линии. Данное значение установлено по умолчанию;

-top – выравнивание по верхнему краю;

-middle— выравнивание по центру

-bottom – выравнивание содержимого ячейки по нижнему краю.

Зададим выравнивание текста таблицы по центру, а отступы ячеек установим в 10px. Также вспомним селекторы CSS и зададим вертикальное выравнивание строки номер 2 по нижнему краю:

Наша таблица теперь выглядит так:

Фоновый цвет таблицы

CSS свойство background-color, рассмотренное в предыдущем уроке позволяет задать цвет фона элементам таблицы. Фон можно назначать как для всей таблицы, так и для отдельных ее элементов.

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

Наш код будет выглядеть так:

А результат работы кода:

Фоновое изображение таблицы

Для установки фонового изображения таблицы используется известное нам уже свойство background-image.

Установим для последней ячейки нашей таблицы фоновое изображение:

Результат можно посмотреть ниже:

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

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

Об - Всем привет! На данном ТехноСайте мы постараемся выкладывать только полезные и занимательные статьи, с пошаговыми иллюстрациями и видео уроками. По всем вопросам пишите в комментариях. Обещаем будет интересно!

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

XHTML: Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

в