51. Cтруктурирование HTML-таблиц

В предыдущем уроке мы познакомились с атрибутом 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

1. Напишите структуру таблицы (thead, tfoot, tbody)

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.