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

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

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

Таблицы и css

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

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

<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 оформим нашу табличку как следует!

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

table td{
	border: 2px solid blue;
}

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

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

table{
	border-collapse: collapse;
}

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

table td{
	padding: 10px 15px;
}

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

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

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

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

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. Добавим и к нему стили:

caption{
	font-size: 32px;
}

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

<tr>
		<td colspan = "2">Ячейка таблицы</td>
		<td>Ячейка таблицы</td>
		<td>Ячейка таблицы</td>
</tr> 

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

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

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

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

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

table{
	border-collapse: separate;
	border-spacing: 10px;
	background: pink;
	border-radius: 20px;
}

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

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree