Heim > Artikel > Web-Frontend > So verwenden Sie das caption-side-Attribut
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!