Style captionSideEigenschaft
Style-Objekt
Definition und Verwendung
Die captionSide-Eigenschaft legt die Position der Tabellenbeschriftung fest oder gibt sie zurück.
Syntax
Legen Sie die captionSide-Eigenschaft fest:
Object.style.captionSide="top|bottom|inherit"
Gibt die captionSide-Eigenschaft zurück:
Object.style.captionSide
| Wert | Beschreibung |
|---|---|
| top | Standard. Positioniert die Tabellenbeschriftung über der Tabelle. |
| bottom | Positioniert die Tabellenbeschriftung unter der Tabelle. |
| inherit | Der Wert der captionSide-Eigenschaft wird vom übergeordneten Element geerbt. |
Browser-Unterstützung
![]()
![]()
![]()
![]()
![]()
Alle wichtigen Browser unterstützen die captionSide-Eigenschaft.
Hinweis:IE7 und frühere Versionen unterstützen die captionSide-Eigenschaft nicht. IE8 unterstützt die captionSide-Eigenschaft nur, wenn ein DOCTYPE deklariert ist. IE9 unterstützt die captionSide-Eigenschaft.
Beispiel
Beispiel
Verschieben Sie die Tabellenbeschriftung an den unteren Rand der Tabelle:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel-Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById("myCap").style.captionSide="bottom";
}
</script>
</head>
<body>
<table border="1">
<caption id="myCap">Meine Ersparnisse</caption>
<tr>
<th>Monat</th>
<th>Ersparnisse</th>
</tr>
<tr>
<td>Januar</td>
<td>$100</td>
</tr>
<tr>
<td>Februar</td>
<td>$150</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">Tabellenbeschriftung verschieben</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel-Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById("myCap").style.captionSide="bottom";
}
</script>
</head>
<body>
<table border="1">
<caption id="myCap">Meine Ersparnisse</caption>
<tr>
<th>Monat</th>
<th>Ersparnisse</th>
</tr>
<tr>
<td>Januar</td>
<td>$100</td>
</tr>
<tr>
<td>Februar</td>
<td>$150</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">Tabellenbeschriftung verschieben</button>
</body>
</html>
Selbst ausprobieren »
Style-Objekt Andere Erweiterungen