Примеры - попробуй сам
Таблицы HTML
Как определить таблицы в документе HTML.
Рамки таблицы HTML
Этот пример демонстрирует различные границы таблицы.
(Вы найдете больше примеров в нижней части страницы.)
Таблицы
Таблицы определяются с тег <table>. Таблица состоят из строк (с тег <tr>), а каждая строка делится на ячейки данных (с тег <td>). Сокращение TD означает "данные таблицы", которые являются содержанием данной клетке. Ячейка данных может содержать текст, изображения, списки пунктов, формы, горизонтальные линии, таблицы и т.д.
|
<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>Заголовок</th> <th>Другой заголовок</th> </tr> <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> <tr> <td>строка 2, ячейка 1</td> <td></td> </tr> </table> |
Как это выглядит в браузере:
| строка 1, ячейка 1 | строка 1, ячейка 2 |
| строка 2, ячейка 1 |
Обратите внимание, что границы вокруг пустых ячеейк таблицы отсутствуют (NB! Mozilla Firefox отображает границы).
Чтобы избежать этого, добавьте неразрывный пробел ( ) в пустых ячейках данных, чтобы сделать видимыми границы:
|
<table border="1"> <tr> <td>строка 1, ячейка 1</td> <td>строка 1, ячейка 2</td> </tr> <tr> <td>строка 2, ячейка 1</td> <td> </td> </tr> </table> |
Как это выглядит в браузере:
| строка 1, ячейка 1 | строка 1, ячейка 2 |
| строка 2, ячейка 1 |
Основные замечания - Полезные советы
Элементы <thead>,<tbody> и <tfoot> используются редко, из-за плохой поддержки браузеров. Ожидаем, что это изменится в будущих версиях XHTML.
Дополнительные примеры
Таблица без границ HTML
Этот пример показывает таблицу без границ.
Заголовки в таблице HTML
Этот пример показывает, как отобразить заголовки таблицы.
Пустые ячейки HTML
Этот пример демонстрирует, как использовать " " для обработки клеток, которые не имеют содержания.
Таблица с заголовком HTML
Этот пример показывает таблицу с заголовком.
Ячейки таблиц, которые охватывают более чем одну строку / столбец HTML
Этот пример демонстрирует, как можно определить ячейки таблицы, которые охватывают более чем одну строку или один столбец.
Теги внутри таблицы HTML
Этот пример демонстрирует, как отображать элементы внутри других элементах.
Расстояние между ячейками HTML
Этот пример демонстрирует, как использовать расстояние между ячейками, чтобы создать пространство между содержанием ячейки и ее границей.
Расстояние между ячейками HTML
Этот пример демонстрирует, как использовать атрибут CELLSPACING, чтобы увеличить расстояние между ячейками.
Добавить цвет фона или фоновое изображение для таблицы HTML
Этот пример демонстрирует, как добавить фон к таблице.
Добавить цвет фона или фоновое изображение для ячейки таблицы HTML
Этот пример демонстрирует, как добавить фон к одной или более ячеек таблицы.
Выравнивание содержимого в ячейке таблицы HTML
Этот пример демонстрирует, как использовать атрибут "align" для выравнивания содержимого клеток, чтобы создать "красивую" таблицы.
Атрибут рамки HTML
Этот пример демонстрирует, как с помощью "frame" отображать границы вокруг таблицы.
Атрибуты рамок и границ HTML
Как использовать атрибуты "frame" и "border" для контроля границ вокруг таблицы.
Таблица тегов
| тег | описание |
|---|---|
| <table> | Определяет таблицу |
| <th> | Определяет заголовок |
| <tr> | Определяет строку таблицы |
| <td> | Определяет ячейку таблицы |
| <caption> | Определяет заголовок таблицы |
| <colgroup> | Определяет группы столбцов таблицы |
| <col> | Определяет значения атрибутов для одного или нескольких столбцов в таблице |
| <thead> | Определяет <thead> таблицы |
| <tbody> | Определяет <tbody> таблицы |
| <tfoot> | Определяет <tfoot> таблицы |
Была ли эта информация полезной?
