Мы уже знаем, что самое важное, что есть на любом сайте — это информация. Для грамотного представляю данных часто возникает нужда в таблицах. У тех, кто только начинает знакомиться с версткой, часто возникают трудности с версткой именно таблиц. Иногда нужно оформлять большие и сложные таблицы, их верстка сопряжена с использованием различных тегов, структура которых не всегда понятна.
Основным тегом для верстки таблиц является тег <table>. Он оборачивает все содержимое и закрывается по окончанию. Все мы знаем, что у таблицы есть строки и столбцы. Для обозначения строк используем тег <tr>, а для столбцов тег <td>. Содержимое каждого столбца оборачиваем тегом td. Теги td находятся внутри тегов tr. В случае с простейшей таблицей число тегов td в каждой строке(tr) одинаково.
Иногда в процессе верстки таблиц возникает необходимость создать заголовки столбца, для этого мы используем тег th. Этот тег аналогичен тегу td, тоже расположен внутри tr, но идеологически и стилистически отличается. По умолчанию он выделен жирно, и текст в нем выравнивается по центру.
Не совесем понятно? Рассмотрим таблицу из 4 строк и 2х столбцов с заголовками:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Простая таблица</title>
</head>
<body>
<table border="1">
<tr>
<th>Заголовок 1</td>
<th>Заголовок 2</td>
</tr>
<tr>
<td>Пример столбца 1</td>
<td>Пример столбца 2</td>
</tr>
<tr>
<td>Пример столбца 3</td>
<td>Пример столбца 4</td>
</tr>
<tr>
<td>Пример столбца 5</td>
<td>Пример столбца 6</td>
</tr>
<tr>
<td>Пример 7</td>
<td>Длинный текст 8</td>
</tr>
</table>
</body>
</html>В итоге получаем:
| Заголовок 1 | Заголовок 2 |
|---|---|
| Пример столбца 1 | Пример столбца 2 |
| Пример столбца 3 | Пример столбца 4 |
| Пример столбца 5 | Пример столбца 6 |
| Пример 7 | Длинный текст 8 |
Объединение ячеек в таблице по вертикали и горизонтали, верстка
Теперь поговорим об одном достаточно сложном и непонятном моменте в верстке таблиц. Часто нам необходимо объединить ячейки таблицы между собой по вертикали или горизонтали. Для этого используется атрибут colspan для ячеек таблицы td. Значения у этого атрибута в виде чисел. Если ставим цифру 2 в значение, то совмещаем по горизонтали две ячейки, текущую и ту, что справа, но в разметке правой ячейки уже быть не должно, содержимое пишем в тот td, которому задали colspan.
Для совмещения ячеек по вертикали необходимо использовать аналогичный атрибут rowspan для тега td. Например, задаем значение 2, значит совмещаем ячейку с нижней. Не забываем удалить ту ячейку, с которой совмешаем из разметки таблицы, иначе выйдет смещение и появление лишних элементов в таблице. Почему объединение по вертикали сложнее? Ведь в разметки таблицы данных нижняя ячейка лежит в следующем теге tr, поэтому ее удаление не столь очевидно, как при объединении по горизонтали.
Можно объединить ячейки одновременно по вертикали и горизонтали, для это задаем оба атрибута сразу. Наглядно станет понятно в примере:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Простая таблица</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">Объединяем вправо</td>
<td colspan="2" rowspan="2">Объединяем все</td>
</tr>
<tr>
<td>Пример столбца 3</td>
<td rowspan="2">Объединяем вниз</td>
</tr>
<tr>
<td>Пример столбца 5</td>
<td>Пример столбца 6</td>
<td>Текст</td>
</tr>
<tr>
<td>Пример 7</td>
<td>Длинный текст 8</td>
<td>Текст</td>
<td>Текст</td>
</tr>
</table>
</body>
</html>| Объединяем вправо | Объединяем все | ||
| Пример столбца 3 | Объединяем вниз | ||
| Пример столбца 5 | Пример столбца 6 | Текст | |
| Пример 7 | Длинный текст 8 | Текст | Текст |
CSS-оформление таблиц
Верстать таблицы научились, теперь можно создавать таблицы с любым количеством столбцов и строк, нужно лишь корректировать необходимым образом html-разметку. Чтобы придать таблицам привычный вид, нужно знать о css-свойствах, которые полезны при верстке таблиц.
Во-первых, таблицам можно задавать рамки. Рамку можно задать, как самой таблице, так и каждой размеченой ячейке таблицы. Но выглядят такие рамки неэстетично и непривычно, чтобы избежать просветов между рамками, используют свойство border-collapse: collapse; Оно накладывает рамки ячеек и убирает нежелательные расстояния между ними. Рамку задаем с помощью свойства border: 2px solid #000; Этим свойством и его значением задаем размер рамки в два пикселя, черного цвета, простой линией.
С помощью рамок можно придать таблице определенный вид. Допустим, хотим расчертить таблицу только на строки или столбцы. Для этого используем css-свойства border-bottom и border-right. С помощью этих свойств задаем рамку у ячейки только с одной стороны,что расчерчивает таблицу нужным образом.
Еще одним важным моментом в верстке таблиц становятся отступы внутри ячейки, их задаем с помощью свойства padding. Можно задать отступ только с одной стороны, для это используем одно из свойств padding-top, padding-right, padding-bottom или padding-left.
Для выравнивания текста внутри ячейки по горизонтали используем css-свойство text-align со значениями left, center и right. Для выравнивания по вертикали подойдет свойство vertical-align. Оно имеет значения top, middle, bottom. Можно задать для ячеек и строк цвет текст (color), цвет фона (background-color), жирность текста (font-weight) и так далее. Чтобы присвоить определенные стили только для конкретной строки или ячейки целесообразно использовать классы для них, а затем писать css-свойства уже для новых классов.
Пример css-кода для разметки простой таблицы.
table {
border-collapse: collapse;
border: 2px solid black;
}
td {
padding: 5px;
padding-right: 10px;
border-bottom: 1px solid lightgray;
text-align:center;
}
th {
padding: 10px;
border: 1px solid black;
}
tr {
background-color: #eee;
}
