Heim > Artikel > Web-Frontend > So verwenden Sie das caption-side-Attribut
So verwenden Sie das caption-side-Attribut
- 青灯夜游Original
- 2019-02-16 11:40:163514Durchsuche
Mit dem caption-side-Attribut wird die Position des Tabellentitels festgelegt. Sie können festlegen, ob sich der Tabellentitel über oder unter der Tabelle befindet.
CSS-Eigenschaft für die Beschriftungsseite
Funktion: Eigenschaft für die Beschriftungsseite Legen Sie die Position des Tabellentitels fest.
Syntax:
caption-side: top|bottom;
Parameter:
top: Standardwert, positionieren Sie den Tabellentitel über der Tabelle.
unten: Positionieren Sie den Tabellentitel unterhalb der Tabelle.
Hinweis: Alle Mainstream-Browser unterstützen das caption-side-Attribut, aber IE8 unterstützt das caption-side-Attribut nur, wenn !DOCTYPE angegeben ist.
Verwendungsbeispiel des CSS-Attributs für die Beschriftungsseite
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
td{
padding:10px 20px;
}
#example1 {
caption-side: bottom;
}
#example2 {
caption-side: top;
}
</style>
</head>
<body>
<h2>caption-side: bottom:</h2>
<table id="example1" border="1">
<caption>标题</caption>
<tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr>
<tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr><tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr><tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr><tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr>
</table>
<h2>caption-side: top (默认值):</h2>
<table id="example2" border="1">
<caption>标题2</caption>
<tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr>
<tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr><tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr><tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr><tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr>
</table>
</body>
</html>Rendering:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das caption-side-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!