Мы уже знаем, что самое важное, что есть на любом сайте — это информация. Для грамотного представляю данных часто возникает нужда в таблицах. У тех, кто только начинает знакомиться с версткой, часто возникают трудности с версткой именно таблиц. Иногда нужно оформлять большие и сложные таблицы, их верстка сопряжена с использованием различных тегов, структура которых не всегда понятна.
Основным тегом для верстки таблиц является тег <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;}
2025-10-30 15:36:43
0
35
Написать комментарий