Heim > Web-Frontend > CSS-Tutorial > So verwenden Sie das caption-side-Attribut

So verwenden Sie das caption-side-Attribut

青灯夜游
Freigeben: 2019-02-16 11:40:16
Original
3522 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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage