Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Напишите структуру таблицы (thead, tfoot, tbody)
В предыдущем уроке мы познакомились с атрибутом 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 по тегу HTML.
