Как оформить таблицы css

Как оформить таблицы css

От автора: таблицы продолжают оставаться неотъемлемой частью веб-страниц – они встречаются практически на всех сайтах. В этой статье я хотел бы подробнее рассмотреть оформление таблиц css-свойствами, потому что у них есть свои нюансы.

Таблицы и css

Сама по себе таблица формируется парным тегом table, а уже в него попадает все ее содержимое. Оно записывается в ее ячейки, именно они в таблице служат хранилищем информации (парный тег td). Tr же, это ряд таблицы. Элемент имеет чисто структурное значение, при этом никаких стилей оформления к нему применять нельзя. Не то, что нельзя, просто они не сработают.

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

Разметка готова. Пока выглядит все следующим образом?

Как бы вы прокомментировали такой внешний вид? Очень скверно, других слов я сейчас подобрать не могу. Но сейчас мы с вами с помощью css оформим нашу табличку как следует!

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

Пусть они будут толщиной 2 пикселя, сплошные и синего цвета. Этим селекторам мы с вами обратились ко всем ячейкам во всех тегах table, какие могут быть на веб-странице. Для более конкретного выбора вам нужно пользоваться стилевыми классами, идентификаторами или другими селекторами.

Пока наши клетки не прижаты вплотную друг к другу. Нужно это исправить, потому что пустое место нам в данном случае не нужно. Это можно сделать с помощью специального свойства:

Вот, именно так и запишите и теперь наши клеточки отображаются нормально. И давайте сразу добавим какие-то внутренние отступы, чтобы текст располагался свободнее и наши элементы растянулись.

Так-то оно уже получше, верно? Текст тут автоматически выравнивается по вертикали, чего не происходит в блоках.

Дальнейшее оформление

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

Можно воспользоваться средствами CSS3, в котором появилось много свойств для придания красоты любым элементам без использования графики. Например, давайте добавим такие свойства:

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

Также нам могут помочь html-теги. В одну ячейку можно добавить все, что угодно: картинки, списки, цитаты и т.д. Тег th выводит тоже клеточку, но текст в ней становится жирным и она помечается как заглавная. Обычно они выводятся перед остальными элементами, в самом начале.

Также можно задать заголовок. За это отвечает тег caption. Он может быть добавлен в любом месте внутри тега table. Добавим и к нему стили:

Ну вот, теперь у нас есть заглавные ячейки, есть обычные, есть заголовок, оформление. Что мы еще можем реализовать? Объединение ячеек, но это уже будет делаться не в css, а в html с помощью специальных атрибутов colspan (по горизонтали) и rowspan (по вертикали). Суть в том, что вы пишите, сколько ячеек объединить, а потом удаляете лишние. Например:

Помните, у нас ведь было 4 ячейки по горизонтали, верно? А тут в разметке мы записали всего 3, но поскольку у первой атрибут colspan = «2», то по сути, она занимает место двух ячеек.

Таким же образом действует и объединение по вертикали, но тут нужно внимательно следить за тем, какие клетки формируют вертикальный столбец и удалить лишние.

Как видите, с помощью таких атрибутов можно изменить структуру, что скажется и на внешнем виде.

Пустые промежутки между ячейками

Вначале статьи я как-то сразу предложил вам прописать border-collapse: collapse, но ведь у этого свойства есть и другое значение. Давайте запишем для нашей таблицы такие свойства:

Мы записали для нее фон и скругление углов, а благодаря border-collapse: separate, между ячейками образуется пустое пространство. Управлять им можно с помощью свойства border-spacing.

Стиль оформления таблицы в css зависит от того, какой дизайн у вашего сайта. Сами свойства применяются практически одни и те же (цвет, отступы, фон и т.д.).

Итак, в этой статье мы с вами посмотрели несколько способов оформления. Разница в основном заключается только в том, есть ли между клетками пустое пространство, потому что это дает возможность задать общий фон всему элементу. Как видите, в оформлении табличных данных нет ничего сложного. На этом я заканчиваю сегодняшнюю статью. Если вам понравился материал, вы можете подписаться на обновления и получать новости нашего блога.

Метки:

Похожие статьи:

Комментарии Вконтакте: