ホームページ > 記事 > ウェブフロントエンド > キャプション側属性の使用方法
キャプション側属性の使用方法
- 青灯夜游オリジナル
- 2019-02-16 11:40:163427ブラウズ
caption-side 属性は、表のタイトルの位置を設定するために使用されます。表のタイトルを表の上に配置するか下に配置するかを設定できます。
#CSS キャプション側プロパティ
関数: キャプション側プロパティ表のタイトルの位置を設定します。
構文:
caption-side: top|bottom;パラメータ: top: デフォルト値。テーブルのタイトルをテーブルの上に配置します。 bottom: 表のタイトルを表の下に配置します。
注: すべての主流ブラウザはキャプション側属性をサポートしますが、IE8 は !DOCTYPE が指定されている場合にのみキャプション側属性をサポートします。
#CSS キャプション側属性の使用例<!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>レンダリング:
以上がキャプション側属性の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。