- Таблицы
- Где используются?
- Как использовать?
- Как задать свои стили для таблицы?
- Что может находиться внутри табличных ячеек?
- Ширина таблицы и ячеек
- Как правильно верстать HTML-таблицы: подробное руководство
- Как создать таблицу
- Как создать строки таблицы
- Заголовок столбцов и строк, объединение ячеек
- Заголовок таблицы
- Группирование строк и столбцов таблицы
- Тело таблицы
- Шапка и подвал таблицы
- Общая сводка по HTML-таблицам
Таблицы
Таблица в общем понимании — это способ структурирования данных путем их распределения по строкам и столбцам.
По своей сути HTML таблицы ничем не отличаются от привычных нам с вами таблиц, используемых на работе, учебе, и просто в повседневной жизни.
Единственное отличие — для их создания, редактирования и визуализации используются не привычные Excel, Word, Numbers и т.п., а HTML и CSS .
Примечание
Когда-то давно таблицы использовались для верстки веб-страниц. Было даже название «табличная верстка». Однако, такой подход не обеспечивал адаптивность сайта и гибкость его структуры, попутно увеличивая HTML-разметку. В современном мире делать разметку сайта с помощью таблиц нельзя!
Где используются?
Примеры использования таблиц на сайтах:
- расписание занятий в спортклубах/школах и пр;
- информация о комплектации/характеристиках автомобиля;
- курсы валют;
- сравнение товаров.
Как использовать?
Существует три основных тега, которые нужно помнить при работе с таблицами:
- — тег-контейнер, внутри которого находятся все остальные элементы таблицы
- — тег, определяющий строку таблицы
- — тег, определяющий столбец таблицы (ее ячейка)
Рассмотрим простой пример.
table> tr> td>Запись 1 td> td>Запись 2 td> td>Запись 3 td> tr> tr> td>Запись 4 td> td>Запись 5 td> td>Запись 6 td> tr> tr> td>Запись 7 td> td>Запись 8 td> td>Запись 9 td> tr> table>
Как задать свои стили для таблицы?
- Границы — таблица без границ используется крайне редко. Давайте нарисуем границу для каждой из колонок. Делается это при помощи CSS свойства border .
table < border-collapse: collapse; >
Результат:
Заголовок — обычно у каждой ячейки таблицы есть свой заголовок. За его создание в html-таблице отвечает тег Давайте добавим его в нашу табличку:
table> tr> th>Заголовок 1 th> th>Заголовок 2 th> th>Заголовок 3 th> tr> tr> td>Запись 1 td> td>Запись 2 td> td>Запись 3 td> tr> tr> td>Запись 4 td> td>Запись 5 td> td>Запись 6 td> tr> tr> td>Запись 7 td> td>Запись 8 td> td>Запись 9 td> tr> table>
Результат:
Примечание
table> tr> th>Заголовок 1 th> th>Заголовок 2 th> th>Заголовок 3 th> tr> tr> td colspan="2">Запись 1 td> td>Запись 3 td> tr> tr> td>Запись 4 td> td>Запись 5 td> td>Запись 6 td> tr> tr> td>Запись 7 td> td>Запись 8 td> td>Запись 9 td> tr> table>
Результат: Чуть больше потренироваться с данным свойством можно здесь.
Объединение столбцов таблицы — атрибут rowspan задает количество ячеек, объедененных по вертикали.
table> tr> th>Заголовок 1 th> th>Заголовок 2 th> th>Заголовок 3 th> tr> tr> td colspan="2">Запись 1 td> td>Запись 3 td> tr> tr> td rowspan="2">Запись 4 td> td>Запись 5 td> td>Запись 6 td> tr> tr> td>Запись 8 td> td>Запись 9 td> tr> table>
Результат: Чуть больше потренироваться с данным свойством можно здесь
Примечание
Заголовок таблицы — тег задает подпись таблице.
Примечание
table> caption>test table for PE caption> colgroup> col span="2" class="own-items"> col class="another-items"> colgroup> tr> th>Заголовок 1 th> th>Заголовок 2 th> th>Заголовок 3 th> tr> tr> td colspan="2">Запись 1 td> td>Запись 3 td> tr> tr> td rowspan="2">Запись 4 td> td>Запись 5 td> td>Запись 6 td> tr> tr> td>Запись 8 td> td>Запись 9 td> tr> table>
.own-items < background-color: yellow; > .another-items < background-color: green; >
Потренироваться с данным свойством можно здесь
- — верхняя часть таблицы. Располагается после , ,
- — основная часть таблицы. Располагается после , , , ,
- — нижняя часть таблицы. Располагается после , , , и перед
table> caption>test table for PE caption> colgroup> col span="2" class="own-items"> col class="another-items"> colgroup> thead> tr> th>Заголовок 1 th> th>Заголовок 2 th> th>Заголовок 3 th> tr> thead> tfoot> tr> td>Запись 7 td> td>Запись 8 td> td>Запись 9 td> tr> tfoot> tbody> tr> td colspan="2">Запись 1 td> td rowspan="2">Запись 3 td> tr> tr> td>Запись 4 td> td>Запись 5 td> tr> tbody> table>
Что может находиться внутри табличных ячеек?
Внутри ячеек могут находиться любые HTML-элементы: заголовки, списки, изображения, элементы форм, другие таблицы и т.д.
Ширина ячеек таблицы по умолчанию равна ширине их содержимого. Изменить ее можно с помощью свойства width .
.own-items < background-color: yellow; width: 300px; >
Задання ширина включает в себя следующие значения: padding-left , padding-right и не включает border-left , border-right .
Ширина таблицы и ячеек
Браузеру можно указать, как именно ему вычислять ширину ячеек таблицы. Для этого используется CSS свойство table-layout . Возможные значения:
- auto (значение по умолчанию) — браузер загружает всю таблицу, анализирует её для определения размеров ячеек, и только после этого отображает.
- fixed — ширина колонок в этом случае определяется либо с помощью тега , либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины.
Примечание
При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.
table> caption>Test table for PE caption> colgroup> col span="2" class="own-items"> col class="another-items"> colgroup> thead> tr> th>Заголовок 1 th> th>Заголовок 2 th> th>Заголовок 3 th> tr> thead> tfoot> tr> td>Запись td> td>Запись 866666666666666666666666666666666666 td> td>Запись 9 td> tr> tfoot> tbody> tr> td >Запись 1 td> td >Запись 2 td> td rowspan="2">Запись 3 td> tr> tr> td>Запись 4 td> td>Запись 5 td> tr> tbody> table>
table < width: 400px; border-collapse: collapse; border: 1px solid red; table-layout: auto; > th < border: 1px solid red; > td < border: 1px solid red; > .own-items < background-color: yellow; > .another-items < background-color: green; >
Вторая колонка приняла ширину содержимого своей последней ячейки.
Поменяем значение свойства table-layout: fixed
Ширина второй колонки не зависит от содержимого, находящегося в ней.
Как правильно верстать HTML-таблицы: подробное руководство
Таблицы в формате HTML выводят на экран данные с помощью строк и столбцов. В них может содержаться как обычный текст, так и изображения или видео. В раннюю эпоху интернета таким способом верстали даже полноценные веб-страницы.
Что же представляют собой HTML-таблицы и как их создать – во всем этом разбираемся в сегодняшней статье.
Как создать таблицу
Откройте HTML-документ и пропишите туда следующее:
Давайте попробуем добавить в наш тег немного информации – например, простой текстовый фрагмент «Моя первая таблица». В коде это будет выглядеть так:
А вот как этот фрагмент отображается в браузере:
Выглядит довольно странно, да? Мы вроде бы создали таблицу, а на экране видим лишь текст, который будто просто написан в теге . Все это потому, что нужно добавить строки и столбцы, а уже потом в них прописать текстовый фрагмент – только тогда таблица примет оригинальный вид. Но и это еще не все, предварительно нам нужно добавить обводку для таблицы, иначе чуда не произойдет.
Мы можем использовать CSS-стили либо просто прописать в HTML-файле тег и добавить в него следующее:
У нас появится маленькая точка внизу:
Как создать строки таблицы
В результате видим все ту же картину с маленькой точкой:
Моя первая таблица | А вот и столбец |
А вот и новая строка | И еще один столбец |
Третья строка! | И последний столбец! |
Просто прописываем в теге пару строчек кода:
Чтобы получить ту таблицу, которую мы хотим видеть, необходимо совместить рамки. Для этого прописываем еще одну строчку кода в тег для table:
И, вуаля, перед нами отображается полноценная таблица с привычными границами:
Теперь наша таблица растянута:
Width со значением 100% растягивает таблицу на всю ширину страницы. Также вы можете указывать значения в пикселях, например width: 500px – в таком случае на любом экране таблица примет указанную ширину. Аналогичным образом можно присвоить и высоту – в пикселях или в процентах.
Заголовок столбцов и строк, объединение ячеек
Мы также можем задать заголовок для столбцов и строк – в этом нам помогает тег . В такой ячейке обычно хранится атрибут для всех данных строк или столбцов. А к содержимому таких ячеек применяется определенный стиль – выделение жирным шрифтом и выравнивание по центру ячейки.
Данный тег лучше всего применять для выделения ячейки-заголовка. Если необходимо визуальное форматирование, то воспользуйтесь стилями для обычных ячеек.
Давайте для примера добавим тег с надписью «Заголовок» в еще одну строку таблицы:
Заголовок | |
---|---|
Моя первая таблица | А вот и столбец |
А вот и новая строка | И еще один столбец |
Третья строка! | И последний столбец! |
В итоге получаем следующее:
Обратите внимание, что заголовок выровнен не по всей таблице, а только по первому столбцу. Чтобы сделать его по центру – необходимо прописать дополнительный атрибут colspan, который объединяет столбцы. В нашем случае нужно связать два столбца, поэтому значение будет равно двум:
Вот как это выглядит на экране:
Данный атрибут мы можем добавлять к любым столбцам. Также есть еще один атрибут, который объединяет не столбцы, а строки – rowspan. Прописывается он аналогичным образом. Для примера давайте совместим вторую и третью строки второго столбца:
Заголовок | |
---|---|
Моя первая таблица | А вот и столбец |
А вот и новая строка | И еще один столбец |
Третья строка! |
Обратите внимание, что я удалил из последнего столбца одну строку, чтобы получилось совместить вторую и третью строки. Так мы можем создавать правильно построенные таблицы без лишних полей. Это пригодится тогда, когда в двух столбцах разное количество строк.
Заголовок таблицы
С базовыми правилами создания таблицы мы разобрались, теперь давайте пойдем немного дальше – первым делом обсудим общий заголовок, который присваивается сверху или снизу таблицы. Он задается с помощью тега , а его размещение корректируется с помощью свойства caption-side: значение top – для вывода до таблицы, bottom – после.
Заголовок может потребоваться в следующих случаях:
- чтобы показать пользователям краткое содержимое таблицы – такой подход будет полезен, когда на странице много таблиц;
- тег влияет на оптимизацию страницы – его любят поисковики.
Давайте добавим в таблицу и посмотрим, что из этого выйдет. Для примера возьмем фразу «Таблица обо всем»:
С помощью стилей мы можем задать отступы либо изменить жирность заголовка – это поможет вам улучшить визуальную часть. Для отступов используйте CSS-стили margin или padding, а жирность задается свойством font-weight или тегом .
Группирование строк и столбцов таблицы
Тег создает структурную группу столбцов, выделяя логически объединенные ячейки. Он группирует один или несколько столбцов для единого форматирования, позволяя таким образом применять стили к столбцам, чтобы не повторять стили для каждой ячейки или строки.
Еще один важный тег – . Он формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре. С его помощью можно задавать свойства столбцов для каждого столбца в пределах элемента .
Давайте добавим к уже существующей таблице данные теги:
Группирование строк и столбцов таблицы позволяет нам быстро задать нужные стили без их дублирования.
Тело таблицы
Тег содержит основную часть информации и группирует главные части таблицы. Его можно использовать сколько угодно раз, чтобы разбивать основной контент таблицы на части, данные которых связаны общей логикой.
Тело таблицы располагается после заголовка и шапки .
Шапка и подвал таблицы
Тегом мы можем задать заголовочную секцию таблицы. Чаще всего речь идет о первой строке, содержащей заголовки столбцов. В нем для ячеек используется тег . Контент в этой ячейке выравнивается по центру, а текст становится жирным.
Общая сводка по HTML-таблицам
Давайте закрепим полученную информацию. Вот теги, которые мы использовали при построении HTML-таблиц:
Чтобы добавить визуальные эффекты, используйте CSS-стили – с их помощью можно как увеличить размер обводки границ, так и задать цвет фона, размер и шрифт текста.
Создание HTML-таблицы – это дело нескольких минут. Главное – разобраться с базовыми понятиями и попрактиковаться на нескольких примерах. В последующем создание таблицы не будет вызывать у вас никаких проблем.