Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
ЯМаркет
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

HTML Теги

Тег <!--Комментарий--> Тег <!DOCTYPE> Тег <a> Тег <abbr> Тег <acronym> Тег <address> Тег <applet> Тег <area> Тег <article> Тег <aside> Тег <audio> Тег <b> Тег <base> Тег <basefont> Тег <bdi> Тег <bdo> Тег <big> Тег <blockquote> Тег <body> Тег <br> Тег <button> Тег <canvas> Тег <caption> Тег <center> Тег <cite> Тег <code> Тег <col> Тег <colgroup> Тег <data> Тег <datalist> Тег <dd> Тег <del> Тег <details> Тег <dfn> Тег <dialog> Тег <dir> Тег <div> Тег <dl> Тег <dt> Тег <em> Тег <embed> Тег <fieldset> Тег <figcaption> Тег <figure> Тег <font> Тег <footer> Тег <form> Тег <frame> Тег <frameset> Тег <h1> - <h6> Тег <head> Тег <header> Тег <hr> Тег <html> Тег <i> Тег <iframe> Тег <img> Тег <input> Тег <ins> Тег <kbd> Тег <label> Тег <legend> Тег <li> Тег <link> Тег <main> Тег <map> Тег <mark> Тег <meta> Тег <meter> Тег <nav> Тег <noframes> Тег <noscript> Тег <object> Тег <ol> Тег <optgroup> Тег <option> Тег <output> Тег <p> Тег <param> Тег <picture> Тег <pre> Тег <progress> Тег <q> Тег <rp> Тег <rt> Тег <ruby> Тег <s> Тег <samp> Тег <script> Тег <section> Тег <select> Тег <small> Тег <source> Тег <span> Тег <strike> Тег <strong> Тег <style> Тег <sub> Тег <summary> Тег <sup> Тег <svg> Тег <table> Тег <tbody> Тег <td> Тег <template> Тег <textarea> Тег <tfoot> Тег <th> Тег <thead> Тег <time> Тег <title> Тег <tr> Тег <track> Тег <tt> Тег <u> Тег <ul> Тег <var> Тег <video> Тег <wbr>


HTML Тег <tbody>



Пример

HTML таблица с элементами <thead>, <tbody>, и <tfoot>:

<table>
  <thead>
    <tr>
      <th>Месяц</th>
     <th>Экономия</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Январь</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Сумма</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>
Попробуйте сами »


Определение и использование <tbody>

Тег <tbody> используется для группировки содержимого тела в HTML таблице.

Тег <tbody> используется в сочетании с элементами <thead> и <tfoot> для указания каждой части таблицы (тело, верхний и нижний колонтитулы).

Браузеры могут использовать эти элементы для включения прокрутки тела таблицы независимо от верхнего и нижнего колонтитулов. Кроме того, при печати большой таблицы, охватывающей несколько страниц, эти элементы могут позволить печатать верхний и нижний колонтитулы таблицы в верхней и нижней частях каждой страницы.

Примечание: Тег <tbody> должен иметь внутри один или несколько тегов <tr>.

Тег <tbody> должен использоваться в следующем контексте:Как дочерний элемент элемента <table>, после элементов <caption>, <colgroup>, и <thead>.

Совет: Элементы <thead>, <tbody>, и <tfoot> по умолчанию не влияют на макет таблицы. Однако вы можете использовать CSS для стилизации этих элементов (см. пример ниже)!


Поддержка браузеров <tbody>

Элемент
<tbody> Да Да Да Да Да

Глобальные атрибуты <tbody>

Тег <tbody> также поддерживает Глобальные атрибуты в HTML.


События атрибутов <tbody>

Тег <tbody> также поддерживает События атрибутов в HTML.


Еще примеры <tbody>

Пример

Стиль <thead>, <tbody>, и <tfoot> с CSS:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}

table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>Месяц</th>
      <th>Экономия</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Январь</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Сумма</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>
Попробуйте сами »
Пример

Как выровнять содержимое внутри <tbody> (с помощью CSS):

<table style="width:100%">
  <thead>
    <tr>
      <th>Месяц</th>
      <th>Экономия</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>Январь</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
Попробуйте сами »
Пример

Как выровнять содержимое по вертикали внутри <tbody> (с помощью CSS):

<table style="width:50%;">
  <tr>
    <th>Месяц</th>
    <th>Экономия</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Январь</td>
      <td>$100</td>
    </tr>
    <tr style="height:100px">
      <td>Февраль</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
Попробуйте сами »

Настройки CSS по умолчанию <tbody>

Большинство браузеров будут отображать элемент <tbody> со следующими значениями по умолчанию:

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}