キャプション側属性の使用方法-CSSチュートリアル-php.cn

キャプション側属性の使用方法

青灯夜游

リリース： 2019-02-16 11:40:16

オリジナル

3488 人が閲覧しました

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 サイトの他の関連記事を参照してください。