Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

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

@codebra_official
Подписывайся на наш 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>. Далее пример:

Пример (html)
<table>
    <thead>
        <tr>
	        <th>Шапка таблицы</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Тело таблицы</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Футер таблицы</td>
        </tr>
    </tfoot>
</table> 

Думаю, комментировать здесь нечего, поэтому еще раз прочитайте урок, попробуйте сами запустить предложенный код и выполнить практическое задание. Затем переходите к следующему уроку, в котором познакомимся с заголовком HTML-таблицы (тег <caption>).

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
Рамки для таблиц, строк и ячеек в HTMLТаблицы в HTML
Что такое CSS?Знакомство с CSS
Тег TR в HTML таблицахТаблицы в HTML
Тег TD в HTML таблицахТаблицы в HTML
Заголовок (тег CAPTION) HTML-таблицТаблицы в HTML
Отступы между ячейками в HTML-таблицахТаблицы в HTML
Работаем с цветами в HTML-таблицеТаблицы в HTML
Цветные строки в HTML-таблицеТаблицы в HTML
Общая информация и форматирование таблицВерстка таблиц
Раздел «Таблицы в HTML»
45. УРОК: 1. Что такое таблица в HTML
46. УРОК: 2. Тег TR в HTML таблицах
47. УРОК: 3. Тег TD в HTML таблицах
48. ПРАКТИКА: 4. Практика по атрибутам colspan и rowspan
49. ПРАКТИКА: 5. Вторая практика по атрибутам colspan и rowspan
50. УРОК: 6. Рамки для таблиц, строк и ячеек в HTML
УРОК 51. 7. Cтруктурирование HTML-таблиц
Вы здесь
52. УРОК: 8. Заголовок (тег CAPTION) HTML-таблиц
53. УРОК: 9. Отступы между ячейками в HTML-таблицах
54. УРОК: 10. Работаем с цветами в HTML-таблице
55. УРОК: 11. Цветные строки в HTML-таблице
56. ПРАКТИКА: 12. Практика поиска ошибок в HTML-таблицах
57. ТЕСТ: 13. Тест по разделу «Таблицы в HTML»
Другие разделы
Раздел 1. Знакомство с HTML
Раздел 2. Разметка текста в HTML
Раздел 3. Ссылки в HTML
Раздел 4. Изображения в HTML
Раздел 6. Формы в HTML
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Знакомство с Flexbox
Раздел 23. Практика с htmlbook.ru
Раздел 24. Элементы сайта
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию и компьютерной безопасности. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Пентесту Active Directory, Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно