HTML HTML5 XHTML ПРИМЕРЫ СПРАВОЧНИК РЕКЛАМА ГОСТЕВАЯ

HTML Урок 14 Таблицы


« Назад Далее »

HTML Таблицы

Яблоки 44%
Бананы 23%
Апельсины 13%
Другое 10%

Примеры

Примеры

Таблицы
Как создавать таблицы в HTML документе.

Границы таблиц
Как указывать различные границы таблиц.

(Вы найдете больше примеров внизу этой страницы).


HTML Таблицы

Таблицы определяются с помощью тега <table>.

Таблица состоит из строк (тег <tr>), и каждая строка состоит из ячеек с данными (тег <td>). td означает "table data" или данные таблицы, и содержит содержимое ячейки. Тег <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>

Как HTML код выше выглядит в браузере:

строка 1, ячейка 1 строка 1, ячейка 2
строка 2, ячейка 1 строка 2, ячейка 2


HTML Таблицы и Атрибут Border

Если вы не указываете атрибут border, таблица будет отображаться без границ. Иногда это может быть полезно, но в большинстве случаев, мы хотим показать границы.

Чтобы отобразить таблицу с границами, используется атрибут border:

<table border="1">
<tr>
<td>строка 1, ячейка 1</td>
<td>строка 1, ячейка 2</td>
</tr>
</table>


HTML Заголовки Столбцов/Строк Таблицы

Информация о заголовках столбцов/строк в таблице указывается с помощью тега <th>.

Подавляющее большинство браузеров будут отображать текст в элементе <th> как жирный и выровненный по центру.

<table border="1">
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
<tr>
<td>строка 1, ячейка 1</td>
<td>строка 1, ячейка 2</td>
</tr>
<tr>
<td>строка 2, ячейка 1</td>
<td>строка 2, ячейка 2</td>
</tr>
</table>

Как HTML код выше выглядит в вашем браузере:

Заголовок 1 Заголовок 2
строка 1, ячейка 1 строка 1, ячейка 2
строка 2, ячейка 1 строка 2, ячейка 2


Примеры

Еще примеры

Таблицы без границ
Как создавать таблицы без границ.

Заголовки столбцов/строк таблицы
Как создавать заголовки столбцов/строк таблицы.

Заголовок таблицы
Как добавить заголовок к таблице.

Ячейки таблицы, которые охватывают более одной строки/столбца
Как определить ячейки таблицы, которые занимают более одной строки или одной колонки.

Теги внутри таблицы
Как отображать элементы внутри других элементов.

Атрибут cellpadding
Как использовать атрибут cellpadding для увеличения расстояния между содержимым ячейки и ее границами.

Атрибут cellspacing
Как использовать атрибут cellspacing для увеличения расстояния между ячейками.

Атрибут frame
Как использовать атрибут "frame" для контроля границ (рамки) вокруг таблицы.


HTML Теги Таблиц

ТегОписание
<table>Определяет таблицу
<th>Определяет заголовок колонки
<tr>Определяет строку таблицы
<td>Определяет ячейку таблицы
<caption>Определяет заголовок таблицы
<colgroup>Определяет группу колонок в таблице для форматирования
<col>Определяет значения атрибутов для одной или более колонок в таблице
<thead>Группирует содержимое заголовка в таблице
<tbody>Группирует содержимое тела таблицы
<tfoot>Группирует содержимое "подвала" таблицы




« Назад Далее »
© 2011-2017 Уроки HTML
Рейтинг@Mail.ru