caption

Element caption reprezentuje nagłówek pełniący rolę objaśnienia treści reprezentowanej przez zawartość elementu table, do którego należy dany element caption.

• Progres XI - Nagłówek tabeli HTML

kategoria ogólna

brak

kontekst zewnętrzny

jako pierwszy element dziecko elementu table

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 zewnętrznym przykładowego elementu "caption" jest element "table", dla którego wspomniany element "caption" jest pierwszym elementem dzieckiem, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "table", jest prawidłowym kontekstem zewnętrznym dla elementu "caption".

kontekst wewnętrzny

zawartość opływająca, lecz nie element table jako element potomek

Przykładowy Kod HTML

<table>
  <caption>
    <p>Ilość przedmiotów w magazynie</p>
    <img src="przedmioty-01.png" alt="różne przedmioty">
  </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 "caption" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca. Ponadto elementem potomkiem wspomnianego elementu "caption" nie jest element "table", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "p" oraz element "img", jest prawidłowym kontekstem wewnętrznym dla elementu "caption".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<caption> ... </caption>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

table-caption

caption {
  display:table-caption;
  text-align:center;
}

tak

tak

tak

tak

tak

tak