Главная HTML5 tag Тег <table>



Тег <table>


Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>.


Внутри <table> допустимо использовать следующие элементы:

<caption>
предназначен для создания заголовка к таблице и может размещаться только внутри контейнера

<col>
задает ширину и другие характеристики одной или нескольких колонок таблицы.

<tbody>
предназначен для хранения одной или нескольких строк таблицы.

<tfoot>
предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы.

<th>
предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная.

<thead>
предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы.


Пример:
<table width="600" border="1" cellspacing="0" cellpadding="4">
<caption>caption - заголовок</caption>
<!-- col - выставляет длину колонок -->
<col width="100" valign="top">
<col width="150" valign="top">
<col width="200" valign="top">
<col width="150" valign="top">
<thead style="background-color:silver">
<tr>
<th>thead</th><th>thead</th><th>thead</th><th>thead</th>
</tr>
</thead>
<tfoot style="background-color:coral"> <!-- Тег tfoot применяется для создания подвала таблицы. Его принято писать после тега thead , но отображается он в самом низу таблицы. -->
<tr>
<td>tfoot</td><td>tfoot</td><td>tfoot</td><td>tfoot</td>
</tr>
</tfoot>
<tbody align="right"><!-- содержимое ячеек позиционируется справа -->
<tr>
<th>тег <col></th><th>Чебурашка</th>
<th>Крокодил Гена</th><th>Шапокляк</th>
</tr>
<tr>
<td>Съел, кг</td><td>5</td>
<td>2</td><td>1</td>
</tr>
<tr>
<td>Выпил, л</td><td>6</td>
<td>8</td><td>2</td>
</tr>
<tr>
<td>Смог, раз</td><td>5</td>
<td>5</td><td>1</td>
</tr>
</tbody>
</table>

caption - заголовок
theadtheadtheadthead
tfoottfoottfoottfoot
тег <col>Чебурашка Крокодил ГенаШапокляк
Съел, кг5 21
Выпил, л6 82
Смог, раз5 51

<colspan="5">
задает количество ячеек, объединенных по горизонтали.

<rowspan="5">
задает количество ячеек, объединенных по вертикали.


Понравилась страница? Поделитесь ссылкой в социальных сетях. Поддержите проект!

Нет комментариев.



    Оставить комментарий

    Заполните все поля.

    Оценка