HTML `<caption>`-Tag

Das <caption>-Tag wird verwendet, um einen Titel oder eine Beschreibung für eine Tabelle zu definieren. Es ist kein Spaltenkopf (verwenden Sie dafür <th>). Das Tag selbst muss sich unmittelbar nach dem öffnenden Tag im <table>-Element befinden und muss das erste Kindelement seines übergeordneten <table>-Elements sein. Pro Tabelle ist nur eine Beschriftung erlaubt.

Wenn das <table>-Element, das <caption> enthält, das einzige Nachfahrenelement des <figure>-Elements ist, müssen Sie stattdessen das <figcaption>-Element verwenden.

Standardmäßig ist eine Tabellenbeschriftung zentriert über der Tabelle ausgerichtet. Sie können die text-align und caption-side-Eigenschaften verwenden, um sie auszurichten und zu positionieren.

Syntax

Das <caption>-Tag wird in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden (<caption>) und dem schließenden (</caption>) Tag geschrieben.

Beispiel für das HTML `<caption>`-Tag:

HTML <caption>-Tag

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table { width: 400px; border-collapse: collapse; }
      th, td { border: 1px solid #000; padding: 4px; }
    </style>
  </head>
  <body>
    <table>
      <caption>Evaluation paper</caption>
      <thead>
        <tr>
          <th>Student</th>
          <th>1st exam</th>
          <th>2nd exam</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Johnson</td>
          <td>75</td>
          <td>65</td>
        </tr>
        <tr>
          <td>Mary Nicolson</td>
          <td>55</td>
          <td>80</td>
        </tr>
        <tr>
          <td>Max Thomson</td>
          <td>60</td>
          <td>47</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Try it Yourself »

Ergebnis

Student	1st exam	2nd exam
John Johnson	75	65
Mary Nicolson	55	80
Max Thomson	60	47

Beispiel für das HTML `<caption>`-Tag mit der CSS caption-side-Eigenschaft:

Beispiel für das HTML <caption>-Tag mit der CSS caption-side-Eigenschaft

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      caption {
        background: #1c87c9;
        color: #fff;
        caption-side: bottom;
      }
      table,
      th,
      td {
        border: 1px solid #1c87c9;
        padding: 3px;
      }
      td {
        background-color: #cccccc;
        color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Caption-side property example</h2>
    <p>Here the caption-side is set to "bottom":</p>
    <table>
      <caption>Some title here</caption>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Try it Yourself »

Attribute

Attribut	Wert	Beschreibung
align	`left`, `right`, `center`, `top`, `bottom`	Richtet die Beschriftung horizontal oder vertikal aus. In HTML5 nicht mehr verwendet. Verwenden Sie stattdessen CSS `caption-side`.

Das <caption>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.

Für eine bessere Barrierefreiheit stellen Sie sicher, dass die Beschriftung programmatisch mit der Tabelle verknüpft ist, damit Screen Reader sie korrekt vorlesen können. Das <caption>-Element wird automatisch mit seinem übergeordneten <table>-Element verknüpft.

So stylen Sie ein HTML <caption>-Tag

json

{
    "tag_name": "caption"
}

Praxis

Welche der folgenden Aussagen über das HTML <caption>-Tag ist laut dem Artikel auf w3docs.com korrekt?

Das <caption>-Tag wird verwendet, um einen Titel oder eine Erklärung für die Daten in einer HTML-Tabelle bereitzustellen.Das <caption>-Tag muss unmittelbar nach dem <table>-Tag eingefügt werden.Das <caption>-Tag kann überall innerhalb des <table>-Tags platziert werden.Das <caption>-Tag kann nur Text enthalten.Sie können CSS verwenden, um das <caption>-Tag zu stylen.

HTML <caption>-Tag ​

Syntax ​

Beispiel für das HTML &lt;caption&gt;-Tag: ​

Ergebnis ​

Beispiel für das HTML &lt;caption&gt;-Tag mit der CSS caption-side-Eigenschaft: ​

Attribute ​