Таблица в HTML — это способ вывести на экран данные, упорядочив их в колонки и строки. Каждый элемент в таблице является составной частью и строки, и колонки.
В ячейках HTML таблицы могут храниться такие элементы как: заголовки, списки, текст, изображения, элементы форм, а также другие таблицы.
Таблицы в HTML: Видео
В этом уроке мы рассмотрим такие вопросы:
- Как создать таблицу в HTML (тег <table>).
- Разделение таблицы на логические части (теги <thead>, <tbody>, <tfoot>).
- Как создать ячейку заголовка столбца таблицы в HTML (тег <th>).
- Как создать строки и ячейки таблицы в HTML (теги <tr> и <td>).
- Как сделать заголовок таблицы в HTML (тег <caption>).
- Как сделать границы таблицы в HTML (атрибут border).
- Как сделать отступ в таблице HTML (атрибуты cellpadding и cellspacing).
- Как объединить ячейки таблицы в HTML (атрибуты colspan и rowspan).
- Как сделать фон таблицы в HTML (атрибут bgcolor).
- Как задать размер таблицы в HTML (атрибуты width и height).
- Группирование строк и столбцов таблицы (теги <colgroup> и <col>).
И так, обо всем по порядку.
Как создать таблицу в HTML
Для того, чтобы добавить таблицу на веб-страницу нужно использовать тег <table>. А для того, чтобы добавить строки и ячейки — теги <tr> и <td>.
Внутри тега <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
Давайте создадим простую таблицу используя вышеупомянутые теги. Откройте любой текстовый редактор (можно обычный Блокнот) и впишите в него следующий код:
<table>
<tr>
<td>Это ячейка №1</td>
<td>Это ячейка №2</td>
</tr>
</table>
Сохраните созданный файл с расширением .html (Например: index.html).
Вот мы и создали свою первую простую таблицу с одной строкой и двумя ячейками.
Давайте более детально рассмотрим вышеупомянутый код.
- тег <table> — служит контейнером для элементов, определяющих содержимое таблицы.
- тег <tr> — служит контейнером для создания строки таблицы.
- тег <td> — используется в таблицах внутри тегов <tr> для создания ячеек с данными.
Разделение таблицы на логические части
Для разделения таблицы на таблицы на логические части используют теги <thead>, <tbody>, <tfoot>.
Тег <thead> предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Он используется для группировки заголовочного содержимого таблицы и соответственно формирует верхний колонтитул таблицы.
В одной таблице допустимо использовать тег <thead> только один раз. Этот элемент должен идти в коде сразу после тега <table> (и после элементов <caption> и <colgroup>, если они есть), но обязательно перед тегами <tbody> и <tfoot>.
Тег <tbody> предназначен для хранения одной или нескольких строк и используется для группировки основного содержимого таблицы. Элемент <tbody> должен быть расположен после тегов <caption> и <colgroup> (если таковые присутствуют), а также после тега <thead>.
Тег <tfoot> предназначен для хранения одной или нескольких строк, которые должны быть отображены внизу таблицы. По сути — это нижний колонтитул таблицы. Элемент <tfoot> должен быть расположен перед элементом <tbody> в таблице. Несмотря на то, что тег <tfoot> в исходном коде определяется до тега <tbody>, браузеры отображают его в самом низу таблицы.
Что даёт нам разделение таблицы на логические части?
Например, у вас очень большая таблица и вы выводите её на печать. В таком случае, браузер обрабатывает код таблицы и формирует её верхний и нижний колонтитул, которые будут напечатаны соответственно в верхней и нижней части каждой страницы. Также браузеры могут использовать вышеупомянутые элементы для включения прокрутки тела таблицы, независимо от заголовка и нижнего колонтитула.
Пример как разделить таблицу на логические части:
<table>
<thead>
<tr>
<td>Наименование товара</td>
<td>Цена, руб.</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Итого:</td>
<td>500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Это ячейка №1</td>
<td>Это ячейка №2</td>
</tr>
</tbody>
</table>
Как создать ячейку заголовка столбца таблицы в HTML
Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Как правило, текст в такой ячейке отображается браузером жирным шрифтом и выравнивается по центру. Это единственное отличие тега <th> от элемента <td>.
Элемент <th> обязательно размещается внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
Пример как создать ячейку заголовка столбца таблицы в HTML:
<table>
<thead>
<tr>
<th>Наименование товара</th>
<th>Цена, руб.</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Итого:</td>
<td>500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Это ячейка №1</td>
<td>Это ячейка №2</td>
</tr>
</tbody>
</table>
Как создать строки и ячейки таблицы в HTML
Для создания строки таблицы HTML используют элемент <tr>. А для создания ячейки — тег <td>.
Например, следующим кодом, мы добавили ещё одну строку с двумя ячейками в тело нашей таблицы (в раздел <tbody>):
<table>
<thead>
<tr>
<th>Наименование товара</th>
<th>Цена, руб.</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Итого:</td>
<td>500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Это ячейка №1 строки №1</td>
<td>Это ячейка №2 строки №1</td>
</tr>
<tr>
<td>Это ячейка №1 строки №2</td>
<td>Это ячейка №2 строки №2</td>
</tr>
</tbody>
</table>
Как сделать заголовок таблицы в HTML
Тег <caption> предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <table>, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.
Пример как сделать заголовок таблицы в HTML:
<table>
<caption>Таблица №1. Пример таблицы HTML</caption>
<thead>
<tr>
<th>Наименование товара</th>
<th>Цена, руб.</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Итого:</td>
<td>500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Это ячейка №1 строки №1</td>
<td>Это ячейка №2 строки №1</td>
</tr>
<tr>
<td>Это ячейка №1 строки №2</td>
<td>Это ячейка №2 строки №2</td>
</tr>
</tbody>
</table>
Как сделать границы таблицы в HTML
Для того, чтобы сделать границу таблицы в HTML используется атрибут border. Если задан атрибут border="0", то таблица будет без рамки. Если же border="1", то ширина границы будет равна 1px. Если border="10" — то 10px.
Пример как сделать границы таблицы в HTML:
<table border="2">
<caption>Таблица №1. Пример таблицы HTML</caption>
<thead>
<tr>
<th>Наименование товара</th>
<th>Цена, руб.</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Итого:</td>
<td>500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Это ячейка №1 строки №1</td>
<td>Это ячейка №2 строки №1</td>
</tr>
<tr>
<td>Это ячейка №1 строки №2</td>
<td>Это ячейка №2 строки №2</td>
</tr>
</tbody>
</table>
Как сделать отступ в таблице HTML
Атрибут cellpadding определяет расстояние между границей ячейки и ее содержимым. Он добавляет пустое пространство к ячейке и тем самым увеличивает ее размеры. Без cellpadding текст в таблице плохо воспринимается, так как он накладывается на границу ячеек (при условии, что граница таблицы не равна 0). А с cellpadding вокруг текста образуется свободное пространство и благодаря этому такой текст комфортнее читать.
Атрибут cellspacing задает расстояние между внешними границами ячеек. Если установлен атрибут border, то толщина границы принимается в расчет.
Пример как сделать отступ в таблице HTML:
<table cellspacing="5" cellpadding="10" border="2">
<caption>Таблица №1. Пример таблицы HTML</caption>
<thead>
<tr>
<th>Наименование товара</th>
<th>Цена, руб.</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Итого:</td>
<td>500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Это ячейка №1 строки №1</td>
<td>Это ячейка №2 строки №1</td>
</tr>
<tr>
<td>Это ячейка №1 строки №2</td>
<td>Это ячейка №2 строки №2</td>
</tr>
</tbody>
</table>
Как объединить ячейки таблицы в HTML
Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега <td>.
Атрибут colspan устанавливает число ячеек, которые должны быть объединены по горизонтали.
Атрибут rowspan устанавливает число ячеек, которые должны быть объединены по вертикали.
Пример как объединить ячейки таблицы в HTML по вертикали:
<table cellspacing="5" cellpadding="10" border="2">
<caption>Таблица №1. Пример таблицы HTML</caption>
<thead>
<tr>
<th>Наименование товара</th>
<th>Цена, руб.</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Итого:</td>
<td>500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td rowspan="2">Это ячейка №1 строки №1</td>
<td>Это ячейка №2 строки №1</td>
</tr>
<tr>
<td>Это ячейка №1 строки №2</td>
</tr>
</tbody>
</table>
Пример как объединить ячейки таблицы в HTML по горизонтали:
<table cellspacing="5" cellpadding="10" border="2">
<caption>Таблица №1. Пример таблицы HTML</caption>
<thead>
<tr>
<th>Наименование товара</th>
<th>Цена, руб.</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Итого:</td>
<td>500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="2">Это ячейка №1 строки №1</td>
</tr>
<tr>
<td>Это ячейка №1 строки №2</td>
<td>Это ячейка №2 строки №2</td>
</tr>
</tbody>
</table>
Как сделать фон таблицы в HTML
Атрибут bgcolor устанавливает цвет фона ячейки.
Пример как сделать фон таблицы в HTML:
<table cellspacing="5" cellpadding="10" border="2" bgcolor="blue">
<caption>Таблица №1. Пример таблицы HTML</caption>
<thead>
<tr>
<th>Наименование товара</th>
<th>Цена, руб.</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Итого:</td>
<td>500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="2" bgcolor="#ffcc00">Это ячейка №1 строки №1</td>
</tr>
<tr>
<td>Это ячейка №1 строки №2</td>
<td>Это ячейка №2 строки №2</td>
</tr>
</tbody>
</table>
Как задать размер таблицы в HTML
Атрибут width задает ширину элемента, атрибут height — его высоту. Таким образом, создавая таблицу в HTML, можно указать её ширину, или высоту (при необходимости).
Для этого нам достаточно прописать для элемента table атрибут width="значение", или height="значение". Значение может быть указано как в пикселях, так и в процентах.
Пример как установить ширину таблицы в HTML:
<table cellspacing="5" cellpadding="10" border="2" bgcolor="blue" width="500">
<caption>Таблица №1. Пример таблицы HTML</caption>
<thead>
<tr>
<th>Наименование товара</th>
<th>Цена, руб.</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Итого:</td>
<td>500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="2" bgcolor="#ffcc00">Это ячейка №1 строки №1</td>
</tr>
<tr>
<td>Это ячейка №1 строки №2</td>
<td>Это ячейка №2 строки №2</td>
</tr>
</tbody>
</table>
Группирование строк и столбцов таблицы
Тег <colgroup> предназначен для задания ширины и стиля одной или нескольких колонок таблицы. Этот тег позволяет уменьшить код таблицы за счет сокращения повторяющихся атрибутов, и при наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки.
Тег <colgroup> можно использовать в комбинации с тегом <col>, который определяет характеристики одной или нескольких колонок.
Тег <col> также задает ширину и другие характеристики одной или нескольких колонок таблицы.
Добавляются эти теги непосредственно после элементов <table> и <caption>.
Пример как задать характеристики для столбцов таблицы:
<table cellspacing="5" cellpadding="10" border="2" bgcolor="blue" width="500">
<caption>Таблица №1. Пример таблицы HTML</caption>
<colgroup>
<col span="1" style="background:Khaki"><!-- С помощью этой конструкции задаем цвет фона для первого столбца таблицы-->
<col style="background-color:LightCyan"><!-- Задаем цвет фона для следующего (одного) столбца таблицы-->
</colgroup>
<thead>
<tr>
<th>Наименование товара</th>
<th>Цена, руб.</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Итого:</td>
<td>500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="2" bgcolor="#ffcc00">Это ячейка №1 строки №1</td>
</tr>
<tr>
<td>Это ячейка №1 строки №2</td>
<td>Это ячейка №2 строки №2</td>
</tr>
</tbody>
</table>