HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
Example
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Define an HTML Table
A table in HTML consists of table cells inside rows and columns.
Example
A simple HTML table:
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.
Example
Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.
Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Example
You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.
Note: There are times when a row can have less or more cells than another. You will learn about that in a later chapter.
Table Headers
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:
th stands for table header.
Example
Let the first row be table header cells:
By default, the text in <th> elements are bold and centered, but you can change that with CSS.
HTML Exercises
HTML Table Tags
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Таблицы
Каждая строка таблицы определяется тегом <tr> . Заголовок таблицы определяется с помощью тега <th> . По умолчанию заголовки таблиц являются полужирными и центрированными. Табличные данные/ячейки определяются с помощью <td> тега.
Пример
Примечание: Элементы <td> являются контейнерами данных таблицы.
Они могут содержать все виды HTML-элементов; текст, изображения, списки, другие таблицы, etc.
Таблица HTML-Добавление границы
Если граница для таблицы не указана, она будет отображаться без границ.
Граница задается с помощью свойства CSS border :
Пример
Не забывайте определять границы как для таблицы, так и для ячеек таблицы.
Таблица HTML-свернутые границы
Если требуется свернуть границы в одну границу, добавьте свойство CSS border-collapse :
Пример
Таблица HTML-Добавление заполнения ячеек
Заполнение ячеек определяет пространство между содержимым ячейки и ее границами.
Если заполнение не задано, ячейки таблицы будут отображаться без заполнения.
Чтобы задать заполнение, используйте свойство CSS padding :
Пример
Таблица HTML-заголовки по левому краю
По умолчанию заголовки таблиц являются полужирными и центрированными.
Чтобы выровнять заголовки таблицы по левому краю, используйте свойство CSS text-align :
Пример
Таблица HTML-Добавление интервала границы
Интервал между границами определяет расстояние между ячейками.
Чтобы задать интервал границы для таблицы, используйте свойство CSS border-spacing :
Пример
Примечание: Если таблица имеет свернутые границы, border-spacing не имеет эффекта.
Таблицы HTML-ячейки, охватывающие множество столбцов
Чтобы сделать ячейку, охватывающую более одного столбца, используйте атрибут colspan :
Пример
Таблицы HTML-ячеек, которые охватывают много строк
Чтобы сделать ячейку, охватывающую более одной строки, используйте атрибут rowspan :
Пример
Таблица HTML-Добавление заголовка
Чтобы добавить подпись к таблице, используйте тег <caption> :
Пример
Примечание: Тег <caption> должен быть вставлен сразу после тега <table> .
Особый стиль для одного стола
Чтобы определить специальный стиль для специальной таблицы, добавьте в таблицу атрибут id :
HTML таблицы — тег table
Таблица — один из основных инструментов для создания web-страниц.
Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном. Если вы прошли серию уроков Делаем сайт — первые шаги, то вы понимаете о чем речь.
Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Например:
| столбец 1 | столбец 2 | столбец 3 |
|---|---|---|
| первый столбец первой строки | второй столбец первой строки | третий столбец первой строки |
| первый столбец второй строки | второй столбец второй строки | третий столбец второй строки |
| первый столбец третьей строки | второй столбец третьей строки | третий столбец третьей строки |
Рассмотрим нашу таблицу с точки зрения HTML:
-
сама таблица задается с помощью тегов <table></table>,
Создадим таблицу, где в качестве содержимого укажем пересечение номеров строк и столбцов:
Создание таблиц в HTML
Таблица – это набор данных, организованный по строкам и столбцам. В таблицах удобно отображается связь между типами данных (например, между продуктами и их стоимостью, занятостью и датами работы, рейсами и временем отправления). В этом мануале вы узнаете, как с помощью HTML создать таблицу, добавить желаемое количество строк и столбцов и внести заголовки, чтобы упростить чтение таблицы.
Требования
- Базовые навыки работы с HTML. Если вы не знакомы с основами HTML, вы можете просмотреть эти руководства:
Основы HTML-таблиц
HTML-таблица создается с помощью открывающего и закрывающего тегов <table> и </table>. Данные внутри этих тегов будут организованы в строки и столбцы с помощью тегов <tr> (table row) и <td> (table data).
Теги <tr> используются для создания строк данных. Внутри открывающих и закрывающих тегов <tr> используются теги <td> – они нужны для организации данных в столбцы.
В качестве примера давайте создадим таблицу с двумя строками и тремя столбцами:
Чтобы на практике понять, как работают таблицы HTML, вставьте приведенный выше фрагмент кода в файл index.html (или другой файл HTML, который вы используете для выполнения примеров из этого мануала).
Сохраните файл и откройте его в браузере, чтобы проверить результаты. Если вы не умеете работать с оффлайн-файлами в браузере, обратитесь к последнему разделу мануала Основы работы с HTML-элементами.
На вашей веб-странице должна быть таблица с тремя столбцами и двумя строками.
Чтобы добавить в таблицу новую строку, вставьте выделенный элемент <tr> в конец таблицы:
Сохраните файл и перезапустите его в браузере. В таблице появится новая строка данных.
Чтобы создать новый столбец, нужно добавить еще один элемент <td> в каждый элемент <tr>:
Сохраните файл и обновите страницу в браузере. В вашей таблице появится четвертый столбец.
Добавление границ таблицы
Как правило, таблицы следует стилизовать с помощью CSS. Если вы не знаете CSS, вы можете оформить таблицу с помощью HTML, добавив атрибуты к элементу <table>. Например, с помощью атрибута border можно добавить границы:
Добавьте выделенный атрибут border в свою таблицу и проверьте результаты в браузере (также вы можете очистить свой файл index.html и вставить приведенный выше фрагмент кода). Сохраните файл и загрузите его в браузере. Теперь каждая ячейка в вашей таблице будет окружена границей.
Добавление заголовков к строкам и столбцам
Чтобы упростить чтение таблиц, к строкам и столбцам можно добавлять заголовки. Также заголовки помогают пользователям скринридеров перемещаться по данным таблицы, что делает ваши таблицы более доступными. Заголовки таблиц автоматически выделяются полужирным шрифтом и центрируются, чтобы визуально отличаться от данных таблицы.
Заголовки добавляются с помощью открывающих и закрывающих тегов <th>. Чтобы добавить в таблицу заголовки для столбцов, нужно вставить новый элемент <tr> в самое начало таблицы и поместить в него имена столбцов с помощью тегов <th>.
Очистите файл index.html и добавьте строку заголовков для столбцов с помощью следующего кода:
<th>Column Header 1</th>
<th>Column Header 2</th>
<th>Column Header 3</th>
Сохраните файл index.html и перезагрузите его в браузере. Вы должны получить таблицу, которая содержит только строку с заголовками столбцов.
Обратите внимание, что заголовок первого столбца мы оставили пустым. Вы можете добавить сюда какой-то заголовок, если хотите.
Чтобы добавить заголовки для строк, нужно поместить открывающие и закрывающие теги <th> в качестве первого элемента в каждом элементе <tr>.