Вы здесь: Главная » CSS » Таблицы в HTML

Таблицы в HTML

Таблицы в HTML создаются с помощью нескольких тегов. Родительским является тег <table>, внутри которого располагаются теги <tr> - от англ. table row - это строки таблицы. А внутри <tr> размещают несколько ячеек, формируемых тегами <td> - от англ. table data. Именно внутри ячеек располагается основная информация таблицы (данные - отсюда и название ячейки table data). Все, что не попало внутрь тегов <td>, выносится за пределы таблицы.

Пример простой таблицы, который формируется простой аббревиатурой Emmet table>tr*3>td*5>{Ячейка $}:

По умолчанию любая таблица ниже не имеет никаких разделителей - ни между строками, ни между ячейками.

Как их добавить, рассмотрим в разделе "CSS для таблиц".
Для того чтобы выделить шапку таблицы, используют теги <th> - от англ. table header. По умолчанию они выделяются жирным шрифтом и текст в таких ячейках размещается по центру.
Пример такой таблицы:

Визуально:

Заголовок для таблиц

Заголовок для таблиц задается тегом <caption>. Записывается этот тег сразу за открывающим тегом <table>. По умолчанию текст заголовка таблицы выводится посередине.

Добавим заголовок для нашей таблицы:

CSS для таблиц

Чтобы оформить таблицу, необходимо задать для тега <table>, как минимум, свойство border:

Вид рамки вы можете выбрать по собственному усмотрению, равно как и ее цвет.

Для тегов <td>, как правило, нужно задавать внутренние отступы и рамки:

Да, и если у вас есть теги <th>, про них тоже не стоит забывать.

Что получилось:

В примере видно, что между всеми ячейками и границами таблицы и ячейками есть пустое пространство. Раньше оно определялось атрибутом cellspacing для тега <table>. Но сейчас он считается устаревшим и заменяется css-свойством border-spacing:

Прямо скажем, используют его нечасто, т.к. вид таблицы с border-spacing: 10px будет таким:

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


Если хочется получить таблицу с разделителями между строк, стоит задать такое правило:


Если необходимо "раскрасить" строки через одну, необходимо использовать следующие селекторы и свойства:


В последнем примере, чтобы расположить 2 таблицы рядом, для тега <table> было использовано свойство:

В этом случае таблицы ведут себя аналогично элементам с display: inline-block.

Естествено, вы можете вместо background-color  использовать свойство background-image:


Для разнообразного управления ячейками таблицы можно использовать селекторы псевдоклассов типа :first-child, :last-child или :nth-child(n):

Так, с помощью правил выше мы задали width для <table>, а также выравнивание текста по правому краю для первой и последней колонки. А с помощью псевдоэлемента :after для последней колонки добавили еще единицу для цены - 'грн'. В результате получилась такая таблица:

О том, как создавать сложные таблицы, читайте в статье Объединение ячеек и строк в таблице.

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

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