Таблицы в HTML создаются с помощью нескольких тегов. Родительским является тег <table>, внутри которого располагаются теги <tr> - от англ. table row - это строки таблицы. А внутри <tr> размещают несколько ячеек, формируемых тегами <td> - от англ. table data. Именно внутри ячеек располагается основная информация таблицы (данные - отсюда и название ячейки table data). Все, что не попало внутрь тегов <td>, выносится за пределы таблицы.
Пример простой таблицы, который формируется простой аббревиатурой Emmet table>tr*3>td*5>{Ячейка $}:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <table> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> <td>Ячейка 4</td> <td>Ячейка 5</td> </tr> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> <td>Ячейка 4</td> <td>Ячейка 5</td> </tr> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> <td>Ячейка 4</td> <td>Ячейка 5</td> </tr> </table> |
По умолчанию любая таблица ниже не имеет никаких разделителей - ни между строками, ни между ячейками.
Как их добавить, рассмотрим в разделе "CSS для таблиц".
Теги заголовочных ячеек таблицы
Для того чтобы выделить шапку таблицы, используют теги <th> - от англ. table header. По умолчанию они выделяются жирным шрифтом и текст в таких ячейках размещается по центру.
Пример такой таблицы:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <table> <tr> <th>№ п/п</th> <th>Название</th> <th>Цена</th> </tr> <tr> <td>1</td> <td>Товар 1</td> <td>400</td> </tr> <tr> <td>2</td> <td>Товар 2</td> <td>400</td> </tr> <tr> <td>3</td> <td>Товар 3</td> <td>400</td> </tr> <tr> <td>4</td> <td>Товар 4</td> <td>400</td> </tr> <tr> <td>5</td> <td>Товар 5</td> <td>400</td> </tr> </table> |
Визуально:
Заголовок для таблицы
Заголовок для таблиц задается тегом <caption>. Записывается этот тег сразу за открывающим тегом <table>. По умолчанию текст заголовка таблицы выводится посередине.
Добавим заголовок для нашей таблицы:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <table> <caption>Заказ пользователя Клара Иванова</caption> <tr> <th>№ п/п</th> <th>Название</th> <th>Цена</th> </tr> <tr> <td>1</td> <td>Юбка в клетку</td> <td>450</td> </tr> <tr> <td>2</td> <td>Брюки в полоску</td> <td>600</td> </tr> <tr> <td>3</td> <td>Симпатичное платье с принтом</td> <td>300</td> </tr> ... </table> |
CSS для таблиц
Чтобы оформить таблицу, необходимо задать для тега <table>, как минимум, свойство border:
| 1 | table { border: 2px solid #124480; } |
Вид рамки вы можете выбрать по собственному усмотрению, равно как и ее цвет.
Для тегов <td>, как правило, нужно задавать внутренние отступы и рамки:
| 1 2 3 | td, th { border: 1px solid #185eb2; padding: 10px; } |
Да, и если у вас есть теги <th>, про них тоже не стоит забывать.
Что получилось:
В примере видно, что между всеми ячейками и границами таблицы и ячейками есть пустое пространство. Раньше оно определялось атрибутом cellspacing для тега <table>. Но сейчас он считается устаревшим и заменяется css-свойством border-spacing:
| 1 2 3 4 | table { border: 2px solid #124480; border-spacing: 10px; } |
Прямо скажем, используют его нечасто, т.к. вид таблицы с border-spacing: 10px будет таким:
Поэтому значительно чаще для таблиц используют свойство border-collapse со значением collapse. В этом случае пустое пространство между ячейками "сплющивается", мы получаем привычный вид таблицы, а свойство border-spacing с любым значением просто игнорируется.
| 1 2 3 4 | table { border: 2px solid #124480; border-collapse: collapse; } |
Если хочется получить таблицу с разделителями между строк, стоит задать такое правило:
| 1 | tr { border: 1px solid #3f7ec9; } |
Если необходимо "раскрасить" строки через одну, необходимо использовать следующие селекторы и свойства:
| 1 2 3 4 | /* Для четных строк */ tr:nth-child(even){ background-color: #cde; } /* Для нечетных строк */ tr:nth-child(odd){ background-color: #d3f5f4; } |
В последнем примере, чтобы расположить 2 таблицы рядом, для тега <table> было использовано свойство:
| 1 | table { display: inline-table } |
В этом случае таблицы ведут себя аналогично элементам с display: inline-block.
Естественно, вы можете вместо background-color использовать свойство background-image:
| 1 2 3 4 5 6 | tr:nth-child(even) { background-image: url(img/diagonal-noise.png); } tr:nth-child(odd) { background-image: url(img/tetr.gif); } |
Для разнообразного управления ячейками таблицы можно использовать селекторы псевдоклассов типа :first-child, :last-child или :nth-child(n):
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | table { border: 2px solid #124480; border-collapse: collapse; <strong>width: 500px;</strong> } td:first-child{ text-align: right; } td:last-child{ width: 30%; text-align: right; } td:last-child:after{ content: ' грн.'; } |
Так, с помощью правил выше мы задали width для <table>, а также выравнивание текста по правому краю для первой и последней колонки. А с помощью псевдоэлемента :after для последней колонки добавили еще единицу для цены - 'грн'. В результате получилась такая таблица:
О том, как создавать сложные таблицы, читайте в статье Объединение ячеек и строк в таблице.
