So verwenden Sie das caption-side-Attribut-CSS-Tutorial-php.cn

So verwenden Sie das caption-side-Attribut

青灯夜游

Freigeben： 2019-02-16 11:40:16

Original

3531 Leute haben es durchsucht

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.

So verwenden Sie das caption-side-Attribut

CSS-Eigenschaft für die Beschriftungsseite

Funktion: Eigenschaft für die Beschriftungsseite Legen Sie die Position des Tabellentitels fest.

Syntax:

caption-side: top|bottom;

Nach dem Login kopieren

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>

Nach dem Login kopieren

Rendering:

So verwenden Sie das caption-side-Attribut

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!