Бесплатные шаблоны для вашего сайта, в свободном доступе

Урок 5. Верстка таблиц, теги table, tr, td



Мы уже знаем, что самое важное, что есть на любом сайте — это информация. Для грамотного представляю данных часто возникает нужда в таблицах. У тех, кто только начинает знакомиться с версткой, часто возникают трудности с версткой именно таблиц. Иногда нужно оформлять большие и сложные таблицы, их верстка сопряжена с использованием различных тегов, структура которых не всегда понятна.

Основным тегом для верстки таблиц является тег <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;
}

Дата публикации: .




Заявка на установку шаблона
x