51. Cтруктурирование HTML-таблиц
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
В предыдущем уроке мы познакомились с атрибутом border
и потихоньку начали вникать в язык CSS: научились добавлять границы для контейнеров <table>
, <tr>
и <td>
. В этом уроке познакомимся с другими элементами HTML-таблицы.
Теги <thead>
, <tbody>
, <tfoot>
, <th>
Тег <thead>
применяется для создания шапки таблицы (не путайте с заголовком, это другой тег). Этот тег пишется сразу после тега <table>
. Отображается содержимое в самом верху таблицы. Можно использовать только один тег <thead>
в одной таблице.
Обратите внимание на тег <th>
, который используется для создания заголовочной ячейки и указывается только внутри тега <thead>
. Как правило, текст в таких ячейках браузер отображает жирным шрифтом и выравнивает по центру.
ПримечаниеТо что тег
<th>
используется только внутри тега<thead>
- спорное утверждение. Можете использовать его где угодно, главное чтобы он был внутри тега<tr>
.
Тег <tbody>
применяется для создания тела таблицы. Он используется, чтобы создать структуру таблицы, следовательно, в одной таблице его можно использовать неоднократно. Важно понимать, что теги <thead>
и <tfoot>
не должны быть вложены в тег <tbody>
и наоборот.
Тег <tfoot>
применяется для создания подвала таблицы. Его принято писать после тега <thead>
, но отображается он в самом низу таблицы. В одной таблице, можно использовать только один тег <tfoot>
. Далее пример:
<table>
<thead>
<tr>
<th>Шапка таблицы</th>
</tr>
</thead>
<tbody>
<tr>
<td>Тело таблицы</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Футер таблицы</td>
</tr>
</tfoot>
</table>
Думаю, комментировать здесь нечего, поэтому еще раз прочитайте урок, попробуйте сами запустить предложенный код и выполнить практическое задание. Затем переходите к следующему уроку, в котором познакомимся с заголовком HTML-таблицы (тег <caption>
).
Похожие уроки Codebra
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
- Напишите структуру таблицы (thead, tfoot, tbody)
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.
Это займет не больше минуты.