Каждая таблица состоит из строк и ячеек, минимально может быть одна строка и одна ячейка. В таком случае, впрочем, непонятно, зачем использовать таблицу, потому что как такового табличного представления уже нет. Кроме того, таблице можно задать заголовок, который кратко описывает её содержимое, указать «шапку», «тело» и «подвал» таблицы. Они нужны для стилевого или смыслового выделения части данных. В примере 1 показано создание таблицы, содержащей все упомянутые компоненты.
Пример 1. Создание таблицы
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Таблица</title> <style> table { width: 100%; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные границы */ } td, th { border: 1px solid #333; /* */ padding: 3px; /* Поля в ячейках */ } thead, tfoot { background: #f0f0f0; /* Цвет фона */ } tbody:hover { background: #f5e0.
t;td>Горячая штамповка</td> <td>20, Ст3кп3, Ст3сп3</td> <td>ГОСТ 1050–79</td> </tr> </tbody> <tbody> <tr> <td rowspan="2">5</td> <td>Холодная штамповка</td> <td>10, 10кп</td> <td>ГОСТ 0702–78</td> </tr> <tr> <td>Горячая штамповка</td> <td>20</td><td></td> </tr> </tbody> <tbody> <tr> <td>6</td> <td>Холодная штамповка</td> <td>10, 10кп, 15, 15кп</td> <td>ГОСТ 0702–78</td> </tr> </tbody> <tbody> <tr> <td rowspan="2">8, 9</td> <td>Горячая штамповка</td> <td>35</td> <td rowspan="2">ГОСТ 1050–74<br>ГОСТ 4543–71<br>ГОСТ 10702–78</td> </tr> <tr> <td>Холодная штамповка</td> <td>20, 20кп</td> </tr> </tbody> <tfoot> <tr> <th>Класс прочности</th> <th>Технологические процессы</th> <th>Марка стали</th> <th>Обозначение стандарта</th> </tr> </tfoot> </table> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Таблица с заголовком, «шапкой» и «подвалом»
При использовании элементов <thead>, <tbody> и <tfoot> придерживайтесь следующих правил.
- Заголовок таблицы <caption> пишется в самом верху таблицы, сразу после открывающего тега <table>.
- <thead> вставляется вверху таблицы, сразу после заголовка, если он присутствует.
- <tfoot> вставляется после <tbody>, при этом отображается всегда в самом низу таблицы.
- Элемент <tbody> для таблиц нужен обязательно, но для простых таблиц без <thead> и <tfoot> его можно не указывать. Браузеры сами научились вставлять его автоматически в код, понимая, что большинство разработчиков ленятся добавлять элемент, который визуально никак не влияет на таблицу.
- <tbody> может быть один или несколько, вы сами решаете, по какому принципу их добавлять. Например, в примере выше в некоторых строках имеются объединения ячеек и чтобы строки при наведении на них курсора мыши выделялись как нам требуется, мы их объединяем в <tbody> согласно нашей логике.
Колонки
Кроме объединения группы строк через <thead> есть ещё один способ группирования ячеек — по колонкам с помощью элементов <col> и <colgroup>. Каждая колонка таблицы сопоставляется со своим элементом <col> который пишется после открывающего тега <table>. Часть колонок можно объединять с помощью атрибута span, его значением выступает число объединяемых колонок. Элементы <col> допустимо помещать в один или несколько <colgroup>, объединяя колонки согласно нашим понятиям.
Элементы <col> и <colgroup> никак не влияют на вид таблицы и её отображение в браузере и применяются только со стилями, как показано в примере 2. Между колонками здесь добавляются двойные линии.
Пример 2. Колонки таблицы
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Таблица</title> <style> table { width: 100%; border-collapse: collapse; } td, th { border: 1px solid #333; padding: 3px; } col { border-left: 4px double #333; } col:first-child { border-left-width: 1px; } </style> </head> <body> <table> <colgroup> <col> <col span="3".
<td>5</td><td>5,6</td> <td>5,8</td><td></td> <td>≤ М16</td> </tr> <tr> <td>6</td><td>6,8</td> <td></td><td></td> <td>≤ М48</td> </tr> </table> </body> </html>Результат данного примера показан на рис. 2. Заметим, что похожего результата можно добиться заменив в стилях селектор col на td и th.
Рис. 2. Двойные линии между колонок
webref.ru
HTML5 Tables
Tables are not new to HTML but there are a few new tags available in HTML5. To define a table in HTML you need to use the <table> tag. Tables are divided into rows using the <tr> tag. To define the cells in the table you need to use the <td> tag.
Tables can contain column elements, row elements, headers, footers and other elements. This tutorial will show you how to use the various table tags to define these elements and how to format the elements using style sheet options.
HTML5 Table Creation
Here is the code necessary to create your table:
<table style="width:300px"><tr><td>Jack</td><td>Sales</td><td>555-5555</td></tr><tr><td>John</td> <td>Admin</td> <td>555-5555</td> </tr> <tr> <td>James</td> <td>Sales</td> <td>555-5555</td> </tr> </table>
The table will be displayed as follows:
Note that HTML defaults to no borders unless you specify a border for the table. To specify borders for your table, you need to add the border element to your table tag:
<table border=”1″ style=”width:300px”>
The table will then look like this:
HTML5 Tables – Adding Headers and Footers
You can use the following tabs to create and format the headers and footers for your table:
- <th> – used to denote a table header cell – th stands for table header
- <thead> – This element tag can be used to group content as the header of a table for formatting purposes
- The <tbody> tag can be used to group table content to format it as the body of the table
- <tfoot> – set to group footer information for your table for formatting purposes.
Cells formatted using the <th> tag will be centered and the text will be bold. Table elements defined using the body tag <td> will be left aligned and the text will be normal.
All HTML5 attributes can be used to format the table using the <thead>, <tbody> and <tfoot> tags. In this tutorial, we will use the color attribute to format the various elements of the table in different colors. We will set the header as green, the body as blue and the footer as red for this tutorial.
Take a look at the following code:
<!DOCTYPE html><html><head><style>thead {color:green;} tbody {color:blue;} tfoot {color:red;} table,th,td {border:1px solid black;} </style> </head> <body> <table border="1" style.
|
The table will look like this on your page:
Note that the Name, Surname and Telephone cells are all center aligned and bold because of the use of the <th> tag.
If you would like to learn more about HTML5 tags, try enrolling in the HTML5 Fundamentals course. This course offers 43 lessons that include all of the HTML fundamentals you need to know to create your own webpages. You will learn to work with text elements and how to format any text elements. The course will teach you how to create lists and links using HTML5. You will learn to work with tables and images and you will learn website basics to ensure your websites work on various browsers.
HTML5 Tables – Formatting Columns
The column group tag allows you to specify formatting to columns within your table. If you want to add specific formatting to columns in your table then you can specify the elements and formats using the <colgroup> tag.
The <colgroup> tag must appear within the table it is being used to format. The span element within the <colgroup> tag can be used to span multiple columns. If no span element is defined, the formatting will be applied to a single column. All HTML formatting attributes can be used for formatting purposes. For our table we will use the background color attribute to format background color of the various columns.
Take a look at the code below:
<!DOCTYPE html><html><head><style>thead {color:green;} tbody {color:blue;} tfoot {color:red;} table,th,td {border:1px solid black;} </style> </head> <body> <table border="1" style="width:300px"> <thead> <tr> <th>Name</th> <th>Surname</th> <th>Telephone</th> </tr> </thead> <tbody> <tr> <td>Jack</td> <td>Sales</td> <td>555-5555</td> </tr> <tr> <td>John</td> <td>Admin</td> <td>555-5555</td> </tr> <tr> <td>James</td> <td>Sales</td> <td>555-5555</td> </tr> <tbody> <tfoot> <tr> <td>Total</td> <td>Total</td> <td>Total</td> </tr> </tfoot> </table> </body> </html>
This is what the table will look like:
HTML5 Tables are Easy
Tables are often a great way to present your data. The HTML5 tags make table creation and formatting really simple.
If you are eager to learn how to take advantage of the new HTML5 tags, then sign up to Learn HTML 5 today. This course offers 44 lectures that will teach you all about the HTML building blocks needed to create a page in HTML5. You will learn about the commonly used HTML tags and how to use them in your development. The course will teach you how to create forms and use the form tags. You will learn how to style HTML. Once you are familiar with HTML basics, the course will teach you about advanced HTML concepts like scripting and handling events. The course will help you create responsive, interactive websites using HTML5.
blog.udemy.com
Объединение столбцов
Объединение столбцов в элементах <td> (ячейка данных) или <th> (заголовочная ячейка) допускается производить с помощью атрибута colspan (при этом ячейка растягивается вправо на заданное количество ячеек).
<!DOCTYPE html> <html> <head> <title>Пример объединения столбцов в таблицах</title> </head> <body> <table border = "1"> <!--начало содержимого таблицы--> <caption>Элементарная таблица</caption> <!--наименование таблицы--> <tr> <!--описываем первую строку--> <th colspan = "2">Ячейка заголовка 1</th> <!--растягиваем на 2 ячейки--> <th>Ячейка заголовка 2</th> </tr> <tr> <!--описываем вторую строку--> <td>Ячейка данных 1 Строка 2</td><td>Ячейка данных 2 Строка 2</td><td>Ячейка данных 3 Строка 2</td> </tr> <tr> <!--описываем третью строку--> <td>Ячейка данных 1 Строка 3</td><td>Ячейка данных 2 Строка 3</td><td>Ячейка данных 3 Строка 3</td> </tr> </table> <!--конец таблицы--> </body> </html>
Результат нашего примера:
Объединение строк
Объединение строк в элементах <td> или <th> допускается с помощью атрибута rowspan (диапазон ячеек задается сверху вниз и охватывает несколько строк – ячейка растягивается вниз).
<!DOCTYPE html> <html> <head> <title>Пример объединения строк в таблицах</title> </head> <body> <table border = "1"> <!-- начало содержимого таблицы--> <caption>Элементарная таблица</caption> <!--наименование таблицы--> <tr> <!--описываем первую строку--> <th colspan = "2">Ячейка заголовка 1</th><!--растягиваем на 2 ячейки--> <th>Ячейка заголовка 2</th> </tr> <tr><!--описываем вторую строку--> <td rowspan = "2">Ячейка данных 1 Строка 2</td><td>Ячейка данных 2 Строка 2</td><td>Ячейка данных 2 Строка 3</td> </tr> <tr> <!--описываем третью строку (первая ячейка занята предыдущей строкой) --> <td>Ячейка данных 2 Строка 3</td><td>Ячейка данных 3 Строка 3</td> </tr> </table> <!--конец таблицы--> </body> </html>
Результат нашего примера:
Свойства столбцов
Элемент <colgroup> определяет группу из одного или нескольких столбцов внутри таблицы. Элемент <colgroup> может состоять из одного, либо нескольких элементов <col>. Тег <col> определяет свойства конкретного столбца, либо столбцов в пределах тега <colgroup> внутри таблицы.
Использование тега <colgroup> совместно с атрибутом span позволяет указать какое количество столбцов должна охватывать группа. В случае если необходимо задать различные свойства для столбцов, то необходимо использовать теги <col> внутри элемента <colgroup>.
Пример использования атрибута span к отдельным столбцам таблицы:
<!DOCTYPE html> <html> <head> <title>Применение стилей к отдельным столбцам таблицы</title> </head> <body> <table> <colgroup> <!-- задаем определённый стиль для двух колонн (атрибут span="2"), а после для каждой последующей свой --> <col span = "2" style = "background-color:khaki"> <col style = "background-color:silver"> <col style = "background-color:coral"> </colgroup> <tr> <th>№ заявки </th><th>Услуга</th><th>Цена, руб.</th><th>Итого</th> </tr> <tr> <td>31337</td><td>Чтение в слух</td><td>1 000</td><td>1 000</td> </tr> </table> </body> </html>
Результат нашего примера:
Если Вам необходимо стилизовать только один столбец, то достаточно указать атрибут span внутри элемента <colgroup>, а не внутри элемента <col>:
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута span HTML тега <colgroup></title> </head> <body> <table> <colgroup span = "2" style = "background-color:lime"> </colgroup> <tr> <th>№ заявки</th><th>Услуга</th><th>Цена, руб.</th><th>Комиссия, руб.</th> </tr> <tr> <td>31337</td><td>Чтение в слух</td><td>1 000</td><td>150</td> </tr> </table> </body> </html>
Результат нашего примера:
Разделение таблицы на части
Следующие HTML теги используются для разделения таблицы на части:
- Тег <thead> используется для содержания заголовка группы в таблице («шапка таблицы», не путайте с заголовками).
- Тег <tfoot> используется для содержания «подвала» таблицы (футер).
- Тег <tbody> используется для содержания «тела» таблицы (боди).
Элемент <thead> должен быть использован только один раз в одной таблице в следующем контексте: в составе элемента <table> (как дочерний (вложенный) элемент), при наличии тегов <caption> (наименование таблицы) и <colgroup> (определяет группу столбцов в таблице) должен следовать после этих элементов, но прежде, чем любой тег <tbody>, <tfoot> и <tr>. Кроме того, элемент <thead> должен иметь один или более тегов <tr> внутри (контейнер для создания строки).
Элементы <thead>, <tbody> и <tfoot> не влияют на расположение таблицы по умолчанию. Тем не менее, с использованием CSS, вы сможете стилизовать эти элементы по своему усмотрению.
Пример:
<!DOCTYPE html> <html> <head> <title>Пример использования тега <thead></title> </head> <body> <table> <thead style="background-color:silver"> <tr> <th>Услуга</th><th>Стоимость</th> </tr> </thead> <tfoot style="background-color:coral"> <!-- Тег <tfoot> применяется для создания подвала таблицы. Его принято писать после тега<thead>, но отображается он в самом низу таблицы. --> <tr> <td>Сумма</td><td>3 000</td> </tr> </tfoot> <tbody style="background-color:khaki"> <tr> <td>Чтение в слух</td><td>1 000</td> </tr> <tr> <td>Игра на перфораторе</td><td>2 000</td> </tr> </tbody> </table> </body> </html>
Результат нашего примера:
Язык гипертекстовой разметки HTML предоставил нам десять уникальных тегов, предназначенных для работы с таблицами, предлагаю Вам повторить их перед прохождением практического задания:
| Тег | Описание |
|---|---|
| <table> | Определяет содержимое таблицы. |
| <caption> | Определяет наименование таблицы. |
| <th> | Определяет заголовочную ячейку таблицы. |
| <tr> | Определяет строку таблицы. |
| <td> | Определяет ячейку данных таблицы. |
| <thead> | Используется для содержания заголовка группы в таблице (шапка таблицы). |
| <tbody> | Используется для содержания «тела» таблицы. |
| <tfoot> | Используется для содержания «подвала» таблицы (футер). |
| <col> | Определяет заданные свойства столбцов для каждого столбца в пределах тега <colgroup>. |
| <colgroup> | Определяет группу столбцов в таблице. |
basicweb.ru
Основные html теги таблицы
Чтобы сделать таблицу в html, достаточно следующих тегов:
| <table>…</table> | обрамление самой таблицы; |
| <tr>…</tr> | обрамление строки таблицы; |
| <td>…</td> | обрамление обычной ячейки таблицы; |
| <th>…</th> | обрамление особой ячейки таблицы (текст, размещенный между этими тегами, отображается жирным начертанием с выравниванием по центру). |
По умолчанию вокруг ячеек таблицы рамок нет.
Пример
<style type="text/css"> table { border-collapse: collapse; } table th, table td { padding: 0 3px; } table.brd th, table.brd td { border: 1px solid #000; } </style> <h3>Таблица без рамок</h3> <table> <tr> <th>Имя</th> <th>Фамилия</th> </tr> <tr> <td>Лариса</td> <td>Исаева</td> </tr> <tr> <td>Дмитрий</td> <td>Колесников</td> </tr> </table> <h3>Таблица c рамками</h3> <table class="brd"> <tr> <th>Имя</th> <th>Фамилия</th> </tr> <tr> <td>Лариса</td> <td>Исаева</td> </tr> <tr> <td>Дмитрий</td> <td>Колесников</td> </tr> </table>Атрибуты тегов <td> и <th> для объединения ячеек
| colspan | Число столбцов, перекрываемых ячейкой |
| rowspan | Число строк, перекрываемых ячейкой |
Пример
<style type="text/css"> table { border-collapse: collapse; } table th, table td { padding: 0 5px; border: 1px solid #000; text-align: center; } </style> <table> <tr> <td rowspan="2"></td> <td colspan="2">хорьки</td> </tr> <tr> <td>вес</td> <td>размер</td> </tr> <tr> <td>самцы</td> <td>1.2 – 2.5 кг</td> <td>до 70см</td> </tr> <tr> <td>самки</td> <td>0.7 – 1.0 кг</td> <td>до 40см</td> </tr> </table>
Теги группирования строк html таблицы
Для создания более сложных таблиц можно использовать теги:
| <caption>…</caption> | обрамление заголовка таблицы (текст, размещенный между этими тегами, выравнивается по центру). В исходном коде тег <caption> ставится сразу после тега <table>; |
| <thead>…</thead> | обрамление шапки таблицы (в одной таблице допускается не более одного тега <thead>); |
| <tbody>…</tbody> | группирует строки таблицы в один табличный блок (таких блоков в таблице может быть несколько); |
| <tfoot>…</tfoot> | обрамление футера, т.е. нижней, завершающей части таблицы (в одной таблице допускается не более одного тега <tfoot>). В исходном коде тег <tfoot> ставится до тега <tbody>. |
Пример
<style type="text/css"> table { border-collapse: collapse; } table th, table td { padding: 0 3px; } table tr td:last-child { text-align: right; } table tbody { border-top: 1px solid #000; border-bottom: 1px solid #000; } </style> <table> <caption>Потребление пива</caption> <thead> <tr> <th>Ф.И.О.</th> <th>литров</th> </tr> </thead> <tfoot> <tr> <td>Итого</td> <td>250</td> </tr> </tfoot> <tbody> <tr> <td>Иванов Иван Иванович</td> <td>133</td> </tr> <tr> <td>Петров Петр Петрович</td> <td>117</td> </tr> </tbody> </table>Теги группирования столбцов html таблицы
| <colgroup>…</colgroup> | группирование столбцов для более удобного форматирования. В исходном коде тег <colgroup> ставится после открывающего тега <table> и после тега <caption> (если он присутствует), перед тегами <thead>, <tbody>, <tfoot> и <tr>; |
| <col> | один или несколько столбцов в контейнере <colgroup>…</colgroup> (<col> – одиночный тег). |
Атрибут тегов <colgroup> и <col>
| span | Число столбцов, следующих друг за другом |
Проще всего понять, как можно использовать группировку строк и столбцов на примере таблицы Судоку.
Тег col устанавливает параметры отдельно для каждого столбца. При этом неважно, как написать в исходном коде:
<colgroup><col span="3"></colgroup> или <colgroup><col><col><col></colgroup>
Пример
<style type="text/css"> table { width: 200px; } col { border: 1px solid #000; width: 25%; } th { border: 1px solid #000; padding: 5px; } tr { height: 20px; } </style> <table> <colgroup style="background-color: yellow"><col span="2"></colgroup> <colgroup style="background-color: red"><col><col></colgroup> <tr> <th colspan="2">желтый</th> <th colspan="2">красный</th> </tr> <tr><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td></tr> </table>
Горизонтальное выравнивание текста в определенном столбце таблицы можно изменить, указав стиль text-align для псевдокласса td:nth-child(n), где n – номер столбца. Однако, этот метод не сработает, если среди ячеек таблицы присутствует атрибут colspan.
htmlweb.ru
Простая HTML таблица
Чтобы создать простую таблицу HTML достаточно 3 тега: <table>, <tr> и <td>.
Тег <table> является корневым контейнером таблицы. Все содержимое таблицы должно находится внутри него.
Далее необходимо определить строки и ячейки — структуру таблицы.
В HTML таблицах строка (ряд) <tr> является контейнером для ячеек. Колонки таблицы определяются позицией ячеек: первая ячейка <td> внутри строки <tr> будет в первой колонке, второй элемент <td> — во второй колонке и так далее.
Для разделения таблицы на колонтитулы (об этом ниже) и основную часть, как обвертку строк <tr> основной части таблицы используют тег <tbody>. Его использование не обязательно в простых таблицах, однако некоторые браузеры и HTML редакторы добавляют его автоматически, поэтому в примерах ниже мы также будем его использовать. Если ваша таблица не имеет колонтитулов, вы можете не использовать тег <tbody>.
Пример простой таблицы HTML
Исходный код простой таблицы HTML
<table>
<tbody>
<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>
</tbody>
</table>Заголовки таблицы HTML
В HTML таблицах существует 2 типа ячеек. Тег <td> определяет ячейку обычного типа. Если ячейка выполняет роль заголовка, она определяется с помощью тега <th>.
Для наглядности в примерах далее мы будем использовать конкретные ситуации, где можно применять те или иные возможности HTML таблиц.
Пример HTML таблицы с заголовком th
Исходный код таблицы HTML с заголовками th
<table>
<tbody>
<tr>
<th>Volkswagen AG</th>
<th>Daimler AG</th>
<th>BMW Group</th>
</tr>
<tr>
<td>Audi</td>
<td>Mercedes-Benz</td>
<td>BMW</td>
</tr>
<tr>
<td>Skoda</td>
<td>Mercedes-AMG</td>
<td>Mini</td>
</tr>
<tr>
<td>Lamborghini</td>
<td>Smart</td>
<td>Rolls-Royce</td>
</tr>
</tbody>
</table>Объединение ячеек в таблице HTML
В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.
Чтобы объединить ячейки по горизонтали используйте атрибут colspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.
Чтобы объединить ячейки по вертикали используйте атрибут rowspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.
Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:
<td colspan="3" rowspan="2">Текст ячейки</td>Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке <tr>. Например, если в таблице 3 колонки с ячейками <td>, и мы объединяем первую и вторую ячейку, то всего внутри тега <tr>, определяющего данную строку будет 2 элемента <td>, первый из них будет содержать атрибут colspan=»2″.
Пример HTML таблицы с объединением ячеек
Исходный код таблицы HTML с объединенными ячейками
<table>
<tbody>
<tr>
<th colspan="3">Nissan</th>
</tr>
<tr>
<th>Модель</th>
<th>Комплектация</th>
<th>Наличие</th>
</tr>
<tr>
<td rowspan="2">Nissan Qashqai</td>
<td>VISIA</td>
<td>+</td>
</tr>
<tr>
<td>TEKNA</td>
<td>+</td>
</tr>
<tr>
<td rowspan="2">Nissan X-Trail</td>
<td>ACENTA</td>
<td>+</td>
</tr>
<tr>
<td>CONNECTA</td>
<td>-</td>
</tr>
</tbody>
</table>Колонтитулы и подпись в HTML таблицах
HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул.
Делается это при помощи обвертки строк <tr> выбранной части таблицы тегами. <thead> определяет область верхнего колонтитула, <tfoot> — область нижнего колонтитулы, <tbody> — основную часть таблицы.
По умолчанию, колонтитулы не отличаются стилями (это можно сделать через CSS при необходимости), но могут быть использованы браузерами. Например, при печати многостраничной таблицы колонтитулы могут дублироваться на каждой напечатанной странице.
Правильный порядок размещения тегов областей в коде HTML таблицы <table> следующий: вначале верхний колонтитул <thead>, за ним нижний колонтитул <tfoot>, после них основная часть <tbody>. При этом на странице основная часть будет выведена между колонтитулами.
По необходимости к таблице можно добавить подпись. Для этого используйте тег <caption>.
Подпись <caption>, при использовании, ставится сразу после открывающего тега <table>.
Пример HTML таблицы с колонтитулами и подписью
Исходный код таблицы с колонтитулами и подписью
<table>
<caption>Комплектации Renault Sandero Stepway</caption>
<thead>
<tr>
<th>Характеристика</th>
<th>SUTA 09H 6R</th>
<th>SUTA 09HR6R</th>
<th>SUTA 15H 5R</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Наличие</th>
<td>+</td>
<td>+</td>
<td>+</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Мощность двигателя</th>
<td>0,9 (90 л.с.)</td>
<td>0,9 (90 л.с.)</td>
<td>1,5 (90 л.с.)</td>
</tr>
<tr>
<th>Топливо</th>
<td>бензин</td>
<td>бензин</td>
<td>дизель</td>
</tr>
<tr>
<th>Норма токсичности</th>
<td>Евро-6</td>
<td>Евро-6</td>
<td>Евро-5</td>
</tr>
</tbody>
</table>Колонки и группы колонок
HTML таблицу можно делить на колонки и группы колонок с помощью тегов <col> и <colgroup>.
Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).
Теги <col>и <colgroup> ставятся внутри тега <table> перед тегами <thead>, <tfoot>, <tbody>, <tr> и после тега <caption>.
Оба тега могут определять стили для одной или нескольких колонок. Атрибут span=»число«, указывает количество колонок, на которые будет влиять тег. Если атрибут span не указан, его значение приравнивается к единице.
Теги <col> и <colgroup> похожи друг на друга, однако тег <colgroup> позволяет использование вложенных тегов <col>, таким образом можно задать стили группе колонок через <colgroup> и конкретной колонке внутри группы через элемент <col> (см. пример ниже).
Если внутри <colgroup> есть вложенные теги <col>, то атрибут span у тега <colgroup> не ставится, а количество колонок на которые влияет тег определяется вложенными <col> элементами.
Пример HTML таблицы с разделением на колонки
Исходный код таблицы HTML c <col> и <colgroup>
<table>
<colgroup style="background-color: #ddd;">
<col>
<col style="background-color: #ccc;">
<col>
</colgroup>
<tbody>
<tr>
<th>ZEN 2E2C AL A</th>
<th>ZEN 2E2C J5 A</th>
<th>INTENSE 2E3C AL A</th>
<th>Характеристика</th>
</tr>
<tr>
<td>1.5 (90 л.с.)</td>
<td>1.2 (115 л.с.)</td>
<td>1.5 (90 л.с.)</td>
<th>Мощность двигателя</th>
</tr>
<tr>
<td>дизель</td>
<td>бензин</td>
<td>дизель</td>
<th>Топливо</th>
</tr>
<tr>
<td>АКП6 (EDC)</td>
<td>АКП6 (EDC)</td>
<td>АКП6 (EDC)</td>
<th>Трансмиссия</th>
</tr>
</tbody>
</table>Таблицы в макете страниц сайта
На современных сайтах немаловажно корректное отображение страниц как на компьютерах, так и на мобильных устройствах. Использовать таблицы для создания каркаса HTML страницы не целесообразно, так как теряется возможность адаптирования контента под экрыны разного размера (компьютеры, смартфоны, планшеты).
Теги группы Table лучше использовать внутри страницы для отображения контента табличного формата.
guruweba.com
10. Таблицы
В HTML есть мощный инструмент отображения информации, структурированной в виде таблиц. Для этой цели предусмотрен десяток структурных тегов. Простейшая таблица состоит из элемента <table>, включающего по одному или несколько элементов <tr>, <th> и <td>.
<table border="1"> <caption>Выписка лицевого счета</caption> <tr> <th>Месяц</th> <th>Баланс</th> </tr> <tr> <td>Январь</td> <td>500 грн.</td> </tr> </table>Если необходимо отобразить описание таблицы, то его можно поместить в элемент <caption>, располагаемый сразу за открывающим тегом <table>. Далее последовательно располагаются строки таблицы, обозначаемые тегом <tr>. Каждая строка содержит в себе ячейки <th> или <td>, формируя таким образом столбцы таблицы.
Элементы <th> обозначают ячейки с заголовками столбцов или строк. Содержимое их по умолчанию отображается браузерами жирным начертанием и центрируется. Тег <td> же предназначен для всех остальных ячеек с данными. Наличие заголовков <th> не является обязательным, но в таблице должна быть хотя бы одна строка с одной ячейкой.
С помощью атрибута border элемента <table> можно определить, будут ли ячейки таблицы обведены рамкой или нет. Значение 1 указывает, что рамка нужна, пустое значение — нет.
Объединение ячеек
Логично, что в каждой строке должно быть одинаковое количество ячеек, чтобы таблица имела прямоугольный вид. Но как быть, если необходимо растянуть какую-нибудь ячейку на несколько столбцов или строк? На помощь приходят атрибуты colspan и rowspan элементов <td> и <th>. Присвоив ячейке атрибут colspan="3", вы сообщите браузеру, что этот элемент занимает место трех ячеек в строке — свое собственное и двух следующих. Соответственно, две следующих ячейки указывать не нужно, и строка будет содержать на 2 элемента <td> (или <th>) меньше.
Объединение ячеек в таблице
Аналогично, атрибут rowspan="2", например, в пятой ячейке строки означает, что она занимает два места в своем столбце, и в следующем элементе <tr> пятую ячейку нужно пропустить. Помните, что если вы примените один из этих атрибутов, но забудете удалить «лишние» ячейки, то браузер сместит их в следующий столбец, передвинув остальные ячейки еще дальше и исказив тем самым таблицу.
Группирование строк и столбцов
Еще 5 тегов предназначены для объединения строк и столбцов в группы. Это необходимо, когда, например, одна ячейка заголовка соответствует нескольким столбцам с данными или, скажем, последняя строка таблицы содержит итоговые значения, лексически выделяясь на фоне остальных строк.
Для объединения строк в группы предназначены три тега. Во-первых, строки с ячейками заголовка можно поместить в элемент <thead>. Во-вторых, завершающие строки с «итоговыми» ячейками — в элемент <tfoot>. Наконец, все остальные строки с данными группируются в одном или нескольких элементах <tbody>. Таким образом вы можете сформировать необходимое вам количество групп. Несмотря на то, что строки из <tfoot> будут отображены последними, размещать сам элемент <tfoot> можно как после последнего, так и перед первым элементом <tbody> (после <thead>). В одной таблице может быть только по одному элементу <thead> и <tfoot>, и любое количество <tbody>. Визуально эти теги не отличаются, пока вы не определите для них соответствующие стили CSS.
Приведенный выше пример таблицы формируется приблизительно таким кодом:
<table class="datatbl"> <col class="yellow"/> <colgroup span="2"></colgroup> <col class="red"/> <thead> <tr> <th rowspan="2"></th> <th colspan="2" scope="colgroup">Средний</th> <th rowspan="2" scope="col">Красноглазых</th> </tr> <tr> <th scope="col">Размер</th> <th scope="col">Вес</th> </tr> </thead> <tfoot class="green"> <tr> <th scope="rowgroup">Среднее</th> <td>1.8</td> <td>0.0025</td> <td>41.5%</td> </tr> </tfoot> <tbody> <tr> <th scope="row">Самцы</th> <td>1.9</td> <td>0.003</td> <td>40%</td> </tr> <tr> <th scope="row">Самки</th> <td>1.7</td> <td>0.002</td> <td>43%</td> </tr> </tbody> </table>Если вы используете <thead> или <tfoot>, то должны использовать и <tbody>. Причем в каждой из групп обязательно должна быть хотя бы одна строка <tr>, и не должно быть строк вне групп.
Для группирования столбцов применяется пустой тег <col /> и парный <colgroup>. В отличие от элементов, группирующих строки, эти теги размещаются сразу после элемента <caption> или, если его нет, за открывающим тегом <table>. Они не включают в себя ячейки, а лишь указывают на объединяемые столбцы. Оба тега поддерживают атрибут span, значением которого является количество группируемых столбцов. Если span не указан, то он считается равным единице.
На самом деле, <col /> не создает группу, а лишь позволяет определить общие атрибуты столбцов без необходимости указывать их в каждой ячейке. Например, чтобы назначить всем ячейкам первых двух столбцов class="myData", достаточно добавить в начало таблицы элемент:
<col span="2" class="myData" /><colgroup> позволяет сделать то же самое, но при этом лексически объединяет столбцы в группу. Бывает необходимость сгруппировать столбцы, но присвоить им разные классы или другие стандартные атрибуты. В таком случае в элемент <colgroup> помещается необходимое количество тегов <col />. При этом атрибут span указывается только в них, а его значение для <colgroup> определяется автоматически, как сумма значений span, присвоенных расположенным внутри элементам <col />. Другие теги в <colgroup> запрещены.
Размещая последовательно несколько элементов <col /> и/или <colgroup> в таблице, можно добиться группирования столбцов любым необходимых образом. Помните, что если вы применяете эти теги, то в итоге должны перечислить в них все столбцы таблицы, количество которых определяется строкой, с наибольшим количеством ячеек. Например, если в таблице 5 столбцов, а вам необходимо сгруппировать только второй и третий, указав им классы second и myGroup соответственно, то выглядеть это будет следующим образом:
<col /> <colgroup> <col class="second" /> <col class="myGroup" /> </colgroup> <col span="2" />Атрибут scope элемента <th> позволяет указать, относится ли этот заголовок к строке, столбцу или какой-либо группе. Допустимые значения:
col |
— ячейка является заголовком столбца |
row |
— ячейка является заголовком строки |
colgroup |
— ячейка является заголовком группы столбцов, в которой находится |
rowgroup |
— ячейка является заголовком группы строк, в которой находится |
Элементы <td> и <th> поддерживают также атрибут headers, позволяющий дополнительно указать заголовки, относящиеся к данной ячейке. Для этого у ячеек с этими заголовками должны быть указаны id, которые и надо перечислить в атрибуте headers через пробел.
7 комментариев