От автора: таблицы продолжают оставаться неотъемлемой частью веб-страниц – они встречаются практически на всех сайтах. В этой статье я хотел бы подробнее рассмотреть оформление таблиц css-свойствами, потому что у них есть свои нюансы.
Таблицы и css
Сама по себе таблица формируется парным тегом table, а уже в него попадает все ее содержимое. Оно записывается в ее ячейки, именно они в таблице служат хранилищем информации (парный тег td). Tr же, это ряд таблицы. Элемент имеет чисто структурное значение, при этом никаких стилей оформления к нему применять нельзя. Не то, что нельзя, просто они не сработают.
Ячейки обязательно должны располагаться в этих рядах, сами по себе они существовать не могут. Поэтому пример правильно размеченной таблицы выглядит так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<noindex> <table> <tr> <td>Ячейка таблицы</td> <td>Ячейка таблицы</td> <td>Ячейка таблицы</td> <td>Ячейка таблицы</td> </tr> <tr> <td>Ячейка таблицы</td> <td>Ячейка таблицы</td> <td>Ячейка таблицы</td> <td>Ячейка таблицы</td> </tr> <tr> <td>Ячейка таблицы</td> <td>Ячейка таблицы</td> <td>Ячейка таблицы</td> <td>Ячейка таблицы</td> </tr> </table> <noindex> |
Разметка готова. Пока выглядит все следующим образом?
Как бы вы прокомментировали такой внешний вид? Очень скверно, других слов я сейчас подобрать не могу. Но сейчас мы с вами с помощью css оформим нашу табличку как следует!
Границы ячеек. Если вы действительно выводите табличные данные, то границы вам просто необходимы, потому что они четко показывают пределы клеток и помогают отделить их друг от друга. Определим явные границы:
1 2 3 |
table td{ border: 2px solid blue; } |
Пусть они будут толщиной 2 пикселя, сплошные и синего цвета. Этим селекторам мы с вами обратились ко всем ячейкам во всех тегах table, какие могут быть на веб-странице. Для более конкретного выбора вам нужно пользоваться стилевыми классами, идентификаторами или другими селекторами.
Пока наши клетки не прижаты вплотную друг к другу. Нужно это исправить, потому что пустое место нам в данном случае не нужно. Это можно сделать с помощью специального свойства:
1 2 3 |
table{ border-collapse: collapse; } |
Вот, именно так и запишите и теперь наши клеточки отображаются нормально. И давайте сразу добавим какие-то внутренние отступы, чтобы текст располагался свободнее и наши элементы растянулись.
1 2 3 |
table td{ padding: 10px 15px; } |
Так-то оно уже получше, верно? Текст тут автоматически выравнивается по вертикали, чего не происходит в блоках.
Дальнейшее оформление
Ну а как красиво оформить таблицы? Css в этом плане дает такие же широкие возможности, как и для других элементов. Вы можете задать ячейкам фон, шрифт, цвет текста и много других свойств на свой вкус, в соответствии с дизайном вашего проекта.
Можно воспользоваться средствами CSS3, в котором появилось много свойств для придания красоты любым элементам без использования графики. Например, давайте добавим такие свойства:
1 2 3 4 5 6 7 8 |
table{ transform: rotate(-3deg); box-shadow: 10px 10px 0 0 purple; } table td{ background: #ccc; box-shadow: inset 0 0 10px 0 purple; } |
У нас получилась слегка наклоненная таблица с тенью, и отдельными внутренними тенями для каждой клетки.
Также нам могут помочь html-теги. В одну ячейку можно добавить все, что угодно: картинки, списки, цитаты и т.д. Тег th выводит тоже клеточку, но текст в ней становится жирным и она помечается как заглавная. Обычно они выводятся перед остальными элементами, в самом начале.
Также можно задать заголовок. За это отвечает тег caption. Он может быть добавлен в любом месте внутри тега table. Добавим и к нему стили:
1 2 3 |
caption{ font-size: 32px; } |
Ну вот, теперь у нас есть заглавные ячейки, есть обычные, есть заголовок, оформление. Что мы еще можем реализовать? Объединение ячеек, но это уже будет делаться не в css, а в html с помощью специальных атрибутов colspan (по горизонтали) и rowspan (по вертикали). Суть в том, что вы пишите, сколько ячеек объединить, а потом удаляете лишние. Например:
1 2 3 4 5 |
<tr> <td colspan = "2">Ячейка таблицы</td> <td>Ячейка таблицы</td> <td>Ячейка таблицы</td> </tr> |
Помните, у нас ведь было 4 ячейки по горизонтали, верно? А тут в разметке мы записали всего 3, но поскольку у первой атрибут colspan = «2», то по сути, она занимает место двух ячеек.
Таким же образом действует и объединение по вертикали, но тут нужно внимательно следить за тем, какие клетки формируют вертикальный столбец и удалить лишние.
Как видите, с помощью таких атрибутов можно изменить структуру, что скажется и на внешнем виде.
Пустые промежутки между ячейками
Вначале статьи я как-то сразу предложил вам прописать border-collapse: collapse, но ведь у этого свойства есть и другое значение. Давайте запишем для нашей таблицы такие свойства:
1 2 3 4 5 6 |
table{ border-collapse: separate; border-spacing: 10px; background: pink; border-radius: 20px; } |
Мы записали для нее фон и скругление углов, а благодаря border-collapse: separate, между ячейками образуется пустое пространство. Управлять им можно с помощью свойства border-spacing.
Стиль оформления таблицы в css зависит от того, какой дизайн у вашего сайта. Сами свойства применяются практически одни и те же (цвет, отступы, фон и т.д.).
Итак, в этой статье мы с вами посмотрели несколько способов оформления. Разница в основном заключается только в том, есть ли между клетками пустое пространство, потому что это дает возможность задать общий фон всему элементу. Как видите, в оформлении табличных данных нет ничего сложного. На этом я заканчиваю сегодняшнюю статью. Если вам понравился материал, вы можете подписаться на обновления и получать новости нашего блога.