Таблицы HTML
- Предыдущая страница Изображения HTML
- Следующая страница Списки HTML
Вы можете создавать таблицы с помощью HTML.
Пример
- Таблица
- Этот пример демонстрирует, как создавать таблицы в документе HTML.
- Рамки таблицы
- Этот пример демонстрирует различные типы рамок таблицы.
Таблица
Таблицы определяются тегом <table>. Каждая таблица имеет несколько строк (определяемых тегом <tr>), каждая строка делится на несколько ячеек (определяемых тегом <td>). Letter td означает данные таблицы (table data), то есть содержимое ячеек данных. Ячейки данных могут содержать текст, изображения, списки, абзацы, формы, горизонтальные линии, таблицы и т.д.
<table border="1"> <tr> <td>строка 1, ячейка 1</td> <td>строка 1, ячейка 2</td> </tr> <tr> <td>строка 2, ячейка 1</td> <td>строка 2, ячейка 2</td> </tr> </table>
В браузере будет отображаться следующим образом:
строка 1, ячейка 1 | строка 1, ячейка 2 |
строка 2, ячейка 1 | строка 2, ячейка 2 |
Таблицы и атрибут рамки
Если не определить атрибут рамки, таблица не будет отображать рамку. Иногда это полезно, но в большинстве случаев мы хотим отображать рамку.
Используйте атрибут рамки, чтобы отобразить таблицу с рамкой:
<table border="1"> <tr> <td>Строка 1, ячейка 1</td> <td>Строка 1, ячейка 2</td> </tr> </table>
Заголовки таблицы
Заголовки таблицы определяются тегом <th>.
Большинство браузеров будут отображать заголовки таблицы как жирный текст по центру:
<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>строка 1, ячейка 1</td> <td>строка 1, ячейка 2</td> </tr> <tr> <td>строка 2, ячейка 1</td> <td>строка 2, ячейка 2</td> </tr> </table>
В браузере будет отображаться следующим образом:
Heading | Another Heading |
---|---|
строка 1, ячейка 1 | строка 1, ячейка 2 |
строка 2, ячейка 1 | строка 2, ячейка 2 |
Пустые ячейки в таблице
В некоторых браузерах таблицы без содержимого отображаются не очень хорошо. Если ячейка пуста (нет содержимого), браузер может не показать рамку этой ячейки.
<table border="1"> <tr> <td>строка 1, ячейка 1</td> <td>строка 1, ячейка 2</td> </tr> <tr> <td></td> <td>строка 2, ячейка 2</td> </tr> </table>
Браузер может отображаться следующим образом:

Внимание:Эта пустая ячейка рамку не показывает. Чтобы избежать这种情况, добавьте пустой маркер-заполнитель в пустые ячейки, чтобы рамка была видна.
<table border="1"> <tr> <td>строка 1, ячейка 1</td> <td>строка 1, ячейка 2</td> </tr> <tr> <td> </td> <td>строка 2, ячейка 2</td> </tr> </table>
В браузере будет отображаться следующим образом:
строка 1, ячейка 1 | строка 1, ячейка 2 |
строка 2, ячейка 2 |
Более примеров
- Таблица без рамки
- Этот пример показывает таблицу без рамки.
- Заголовки таблицы (Heading)
- Этот пример показывает, как отображать заголовки таблицы.
- Пустые ячейки
- Этот пример показывает, как обрабатывать ячейки таблицы без содержимого с помощью " ".
- Таблица с заголовком
- Этот пример показывает таблицу с заголовком (caption).
- Ячейки таблицы,跨越多行或多列
- Этот пример показывает, как определить таблицу с跨越多行或多 столбцов ячеек.
- Тэги в таблице
- Этот пример показывает, как отображать элементы в различных элементах.
- Отступ между ячейками (Cell padding)
- Этот пример показывает, как использовать "Cell padding" для создания пустого пространства между содержимым ячеек и их рамкой.
- Интервал между ячейками (Cell spacing)
- Этот пример показывает, как использовать "Cell spacing" для увеличения расстояния между ячейками.
- Добавление фонового цвета или изображения к таблице
- Этот пример показывает, как добавить фоновый цвет или изображение к таблице.
- Добавление фонового цвета или изображения к ячейкам таблицы
- Этот пример показывает, как добавить фоновый цвет или изображение к одной или нескольким ячейкам таблицы.
- Выравнивание содержимого ячеек таблицы
- Этот пример показывает, как использовать атрибут "align" для выравнивания содержимого ячеек, чтобы создать красивую таблицу.
- Атрибут рамки (frame)
- Этот пример показывает, как использовать атрибут "frame" для управления рамкой вокруг таблицы.
Тэг таблицы
Таблица | Описание |
---|---|
<table> | Определяет таблицу. |
<caption> | Определяет заголовок таблицы. |
<th> | Определяет заголовок таблицы. |
<tr> | Определяет строку таблицы. |
<td> | Определяет ячейку таблицы. |
<thead> | Определяет верхний колонтитул таблицы. |
<tbody> | Определяет тело таблицы. |
<tfoot> | Определяет нижний колонтитул таблицы. |
<col> | Определяет атрибуты, используемые для столбцов таблицы. |
<colgroup> | Определяет группу столбцов таблицы. |
- Предыдущая страница Изображения HTML
- Следующая страница Списки HTML