HTML <caption> tagi

Määrittely ja käyttö

<caption> Merkki määrittelee taulukon otsikon.

Caption-merkki täytyy olla table-merkin jälkeen. Voit määritellä vain yhden otsikon jokaiselle taulukolle.

Vinkki:Oletusarvon mukaan taulukon otsikko sijoitetaan taulukon yläpuolelle keskelle. Mutta CSS-ominaisuudet text-align ja caption-side voidaan käyttää otsikon tasaukseen ja sijoittamiseen.

Katso myös:

HTML DOM -viittausoppikirja:Caption-objekti

Esimerkki

Esimerkki 1

Otsikoitu taulukko:

<table>
  <caption>Kuukausittaiset säästöt</caption>
  <tr>
    <th>Kuukausi</th>
    <th>Varat</th>
  </tr>
  <tr>
    <td>Yksi kuukausi</td>
    <td>￥3000</td>
  </tr>
</table>

Kokeile itse

Esimerkki 2

Paikannustaulukon otsikko (CSS:n avulla):

<table>
  <caption style="text-align:right">Omat säästöni</caption>
  <tr>
    <th>Kuukausi</th>
    <th>Varat</th>
  </tr>
  <tr>
    <td>Yksi kuukausi</td>
    <td>￥3000</td>
  </tr>
</table>
<br>
<table>
  <caption style="caption-side:bottom">Minun varat</caption>
  <tr>
    <th>Kuukausi</th>
    <th>Varat</th>
  </tr>
  <tr>
    <td>Yksi kuukausi</td>
    <td>￥3000</td>
  </tr>
</table>

Kokeile itse

Globaalit ominaisuudet

<caption> Tunniste tukee myös HTML:n globaalit ominaisuudet。

tapahtumavara-ominaisuuksia

<caption> Tunniste tukee myös HTML:n tapahtumavara-ominaisuudet。

Oletusarvoiset CSS-asetukset

Useimmat selaimet käyttävät seuraavia oletusarvoja näyttämiseen <caption> Elementti：

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

Kokeile itse

Selaintuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki