Ostatnio edytowany:

tbody

Autor: Virtual Patriot

Przeznaczenie elementu tbody

Element tbody reprezentuje jedną z części BODY tabeli HTML. W części BODY tabeli HTML znajdują się zazwyczaj wiersze posiadające komórki zawierające w swojej zawartości główną treść danej tabeli HTML.

Dodatkowe techniczne informacje o elemencie tbody

kategoria ogólna

brak

kontekst zewnętrzny
jako element dziecko elementu table (po ewentualnym elemencie caption oraz ewentualnych elementach colgroup oraz ewentualnym elemencie thead oraz po lub przed ewentualnym elementem tfoot oraz po lub przed ewentualnymi elementami tbody, jednak tylko jeżeli dany element table nie zawiera w swoim kontekście wewnętrznym elementu dziecka typu tr)

Przykładowy Kod HTML

<table>
  <caption>Ilość przedmiotów w magazynie</caption>

  <colgroup span="2" class="styl-1"></colgroup>

  <thead>
    <tr>
      <th>przedmiot</th>
      <th>ilość</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th>szafa</th>
      <td>10</td>
    </tr>

    <tr>
      <th>stół</th>
      <td>5</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>suma</th>
      <td>15</td>
    </tr>
  </tfoot>
</table>

Kontekstem zewnętrznym przykładowego elementu "tbody" jest element "table", dla którego wspomniany element "tbody" jest elementem dzieckiem. Ponadto wspomniany element "tbody" znajduje się po elemencie "thead" oraz przed elementem "tfoot", natomiast w kontekście wewnętrznym wspomnianego elementu "table" nie znajduje się żaden element "tr", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "table", jest prawidłowym kontekstem zewnętrznym dla elementu "tbody".

kontekst wewnętrzny
elementy tr, jak również ewentualnie zawartość skryptowa

Przykładowy Kod HTML

<table>
  <caption>Ilość przedmiotów w magazynie</caption>

  <thead>
    <tr>
      <th>przedmiot</th>
      <th>ilość</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th>szafa</th>
      <td>10</td>
    </tr>

    <tr>
      <th>stół</th>
      <td>5</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>suma</th>
      <td>15</td>
    </tr>
  </tfoot>
</table>

Kontekstem wewnętrznym przykładowego elementu "tbody" są wyłącznie elementy "tr", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "tr" oraz element "tr", jest prawidłowym kontekstem wewnętrznym dla elementu "tbody".

Przykładowy Kod HTML

<table>
  <caption>Ilość przedmiotów w magazynie</caption>

  <thead>
    <tr>
      <th>przedmiot</th>
      <th>ilość</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th>szafa</th>
      <td>10</td>
    </tr>

    <tr>
      <th>stół</th>
      <td>5</td>
    </tr>

    <template id="szablon-1">
      <ins>
        <iframe src="dynamiczna-statystyka-01.html"></iframe>
      </ins>
    </template>
    <script src="skrypt-01.js"></script>
  </tbody>

  <tfoot>
    <tr>
      <th>suma</th>
      <td>15</td>
    </tr>
  </tfoot>
</table>

Kontekstem wewnętrznym przykładowego elementu "tbody" są wyłącznie elementy "tr" oraz elementy HTML, które należą do kategorii zawartość skryptowa, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "tr", element "tr", element "template" oraz element "script", jest prawidłowym kontekstem wewnętrznym dla elementu "tbody".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

składnia HTML

<tbody> ... </tbody>

pominięcie tagu na początku

tag może zostać pominięty, lecz tylko jeżeli pierwszą rzeczą, którą reprezentuje dany element tbody jest element tr oraz przed wspomnianym elementem tbody nie występuje żaden element thead, element tbody lub element tfoot, którego tag na końcu został pominięty, ponadto tag nie może zostać pominięty jeżeli dany element tbody z założenia ma nie zawierać w swoim kontekście wewnętrznym niczego

pominięcie tagu na końcu

tag może zostać pominięty, lecz tylko jeżeli bezpośrednio po danym elemencie tbody występuje element tbody lub element tfoot lub jeżeli bezpośrednio po danym elemencie tbody nie występuje żadna inna zawartość, która z założenia miałaby należeć do zawartości elementu rodzica danego elementu tbody

CSS display

table-row-group

Dodatkowe domyślne reguły CSS elementu tbody

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

Interpretacja elementu tbody

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak