Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/caption below:

<caption>: Das Tabellenbeschriftungselement - HTML

Baseline Widely available *

Das <caption>-Element von HTML gibt die Beschriftung (oder den Titel) einer Tabelle an und bietet der Tabelle eine barrierefreie Beschreibung.

<table>
  <caption>
    He-Man and Skeletor facts
  </caption>
  <tr>
    <td></td>
    <th scope="col" class="heman">He-Man</th>
    <th scope="col" class="skeletor">Skeletor</th>
  </tr>
  <tr>
    <th scope="row">Role</th>
    <td>Hero</td>
    <td>Villain</td>
  </tr>
  <tr>
    <th scope="row">Weapon</th>
    <td>Power Sword</td>
    <td>Havoc Staff</td>
  </tr>
  <tr>
    <th scope="row">Dark secret</th>
    <td>Expert florist</td>
    <td>Cries at romcoms</td>
  </tr>
</table>

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th {
  background-color: rgb(230 230 230);
}

td {
  text-align: center;
}

tr:nth-child(even) td {
  background-color: rgb(250 250 250);
}

tr:nth-child(odd) td {
  background-color: rgb(240 240 240);
}

.heman {
  font:
    1.4rem molot,
    sans-serif;
  text-shadow:
    1px 1px 1px white,
    2px 2px 1px black;
}

.skeletor {
  font:
    1.7rem rapscallion,
    fantasy;
  letter-spacing: 3px;
  text-shadow:
    1px 1px 0 white,
    0 0 9px black;
}

Dieses Element enthält die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie werden hier nur zur Referenz beim Aktualisieren bestehenden Codes und aus historischem Interesse dokumentiert.

align Veraltet

Gibt an, auf welcher Seite der Tabelle die Beschriftung angezeigt werden soll. Die möglichen enumerierten Werte sind left, top, right oder bottom. Verwenden Sie stattdessen die CSS-Eigenschaften caption-side und text-align, da dieses Attribut veraltet ist.

• Falls vorhanden, muss das <caption>-Element das erste Kind seines übergeordneten <table>-Elements sein.
• Wenn eine <table> innerhalb eines <figure> als einzigem Inhalt der Figur verschachtelt ist, sollte sie stattdessen über eine <figcaption> für die <figure> und nicht als <caption> innerhalb der <table> beschriftet werden.
• Jede angewendete background-color auf eine Tabelle wird nicht auf ihre Beschriftung angewendet. Fügen Sie auch dem <caption>-Element eine background-color hinzu, wenn Sie möchten, dass hinter beiden die gleiche Farbe erscheint.

Siehe <table> für ein vollständiges Tabellenbeispiel, das gängige Standards und Best Practices vorstellt.

Dieses Beispiel zeigt eine einfache Tabelle, die eine Beschriftung enthält, die die dargestellten Daten beschreibt.

Ein solcher "Titel" ist hilfreich für Benutzer, die die Seite schnell durchsehen, und ist besonders vorteilhaft für sehbehinderte Benutzer, da es ihnen ermöglicht, die Relevanz der Tabelle schnell zu bestimmen, ohne dass ein Bildschirmlesegerät den Inhalt vieler Zellen lesen muss, nur um herauszufinden, worum es in der Tabelle geht.

Ein <caption>-Element wird als erstes Kind der <table> verwendet, mit Textinhalt ähnlich einem Titel, um die Tabellendaten zu beschreiben. Drei Zeilen, die erste als Kopfzeile, mit zwei Spalten werden mit den Elementen <tr>, <th> und <td> nach dem <caption> erstellt.

<table>
  <caption>
    User login email addresses
  </caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>user1@example.com</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>user2@example.com</td>
  </tr>
</table>

Einige grundlegende CSS werden verwendet, um das <caption> auszurichten und hervorzuheben.

caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 10px;
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th {
  background-color: rgb(230 230 230);
}

td {
  text-align: center;
}

• Lernen: Grundlagen der HTML-Tabellen
• <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• caption-side: CSS-Eigenschaft zur Positionierung des <caption> relativ zu seinem übergeordneten <table>
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Textinhalts des <caption>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4