Как сделать таблицу в HTML? Теги таблицы HTML и их атрибуты
Таблица в 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>.
Давайте создадим простую таблицу используя вышеупомянутые теги. Откройте любой текстовый редактор (можно обычный Блокнот) и впишите в него следующий код:
Сохраните созданный файл с расширением .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>, браузеры отображают его в самом низу таблицы.
Что даёт нам разделение таблицы на логические части?
Например, у вас очень большая таблица и вы выводите её на печать. В таком случае, браузер обрабатывает код таблицы и формирует её верхний и нижний колонтитул, которые будут напечатаны соответственно в верхней и нижней части каждой страницы. Также браузеры могут использовать вышеупомянутые элементы для включения прокрутки тела таблицы, независимо от заголовка и нижнего колонтитула.
Пример как разделить таблицу на логические части:
Как создать ячейку заголовка столбца таблицы в HTML
Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Как правило, текст в такой ячейке отображается браузером жирным шрифтом и выравнивается по центру. Это единственное отличие тега <th> от элемента <td>.
Элемент <th> обязательно размещается внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
Пример как создать ячейку заголовка столбца таблицы в HTML:
Как создать строки и ячейки таблицы в HTML
Для создания строки таблицы HTML используют элемент <tr>. А для создания ячейки — тег <td>.
Например, следующим кодом, мы добавили ещё одну строку с двумя ячейками в тело нашей таблицы (в раздел <tbody>):
Как сделать заголовок таблицы в HTML
Тег <caption> предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <table>, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.
Пример как сделать заголовок таблицы в HTML:
Как сделать границы таблицы в HTML
Для того, чтобы сделать границу таблицы в HTML используется атрибут border. Если задан атрибут border=»0″, то таблица будет без рамки. Если же border=»1″, то ширина границы будет равна 1px. Если border=»10″ — то 10px.
Пример как сделать границы таблицы в HTML:
Как сделать отступ в таблице HTML
Атрибут cellpadding определяет расстояние между границей ячейки и ее содержимым. Он добавляет пустое пространство к ячейке и тем самым увеличивает ее размеры. Без cellpadding текст в таблице плохо воспринимается, так как он накладывается на границу ячеек (при условии, что граница таблицы не равна 0). А с cellpadding вокруг текста образуется свободное пространство и благодаря этому такой текст комфортнее читать.
Атрибут cellspacing задает расстояние между внешними границами ячеек. Если установлен атрибут border, то толщина границы принимается в расчет.
Пример как сделать отступ в таблице HTML:
Как объединить ячейки таблицы в HTML
Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега <td>.
Атрибут colspan устанавливает число ячеек, которые должны быть объединены по горизонтали.
Атрибут rowspan устанавливает число ячеек, которые должны быть объединены по вертикали.
Пример как объединить ячейки таблицы в HTML по вертикали:
Пример как объединить ячейки таблицы в HTML по горизонтали:
Как сделать фон таблицы в HTML
Атрибут bgcolor устанавливает цвет фона ячейки.
Пример как сделать фон таблицы в HTML:
Как задать размер таблицы в HTML
Атрибут width задает ширину элемента, атрибут height — его высоту. Таким образом, создавая таблицу в HTML, можно указать её ширину, или высоту (при необходимости).
Для этого нам достаточно прописать для элемента table атрибут width=»значение», или height=»значение». Значение может быть указано как в пикселях, так и в процентах.
Пример как установить ширину таблицы в HTML:
Группирование строк и столбцов таблицы
Тег <colgroup> предназначен для задания ширины и стиля одной или нескольких колонок таблицы. Этот тег позволяет уменьшить код таблицы за счет сокращения повторяющихся атрибутов, и при наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки.
Тег <colgroup> можно использовать в комбинации с тегом <col>, который определяет характеристики одной или нескольких колонок.
Тег <col> также задает ширину и другие характеристики одной или нескольких колонок таблицы.
Добавляются эти теги непосредственно после элементов <table> и <caption>.