CSS のキャプション側属性の関連する属性値を設定することで、テーブル () タイトル (キャプション タグ) の位置を指定できます。つまり、キャプション側属性を使用して、どこにあるかを指定できます。タイトルはテーブルの側面にあります。
の後に挿入され、常にテーブルの最初の子である必要があります。次に、caption-side 属性を使用して表内の位置を変更できます。 caption-side 属性を使用して、表のタイトルを表の上または下に配置し、タイトルが表の上または下に配置されるように指定できます。
注:
1. CSS 2.1 より前では、タイトルを左側と右側に配置するために「left」と「right」の 2 つの値が提供されていました。それぞれ右のテーブル。ただし、これら 2 つの値は最終的な 2.1 仕様で削除され、現在は非標準となっており、ブラウザーとの互換性があまり高くありません。
2. タイトル ボックス内のタイトル コンテンツを「水平方向に整列」したい場合は、text-align 属性を使用する必要があります。また、text-align 属性を通じて他の整列方法を設定することもできます。
caption-side 属性がテーブル table のタイトル位置を設定する方法を見てみましょう。
キャプション側属性の基本構文:
caption-side: top | bottom | inherit
デフォルト属性: top
適用対象: 'table-要素内のキャプション '
アニメーション: いいえ
キャプション側の属性値の説明:
top: タイトルは表の上に配置できます。
bottom: タイトルはテーブルの下に配置できます。
inherit: 親のタイトル位置からタイトル位置を継承します。
キャプション側属性の例:
1. タイトルは表の上にあります
html コード:
<table class="default">
<caption><em>表的标题，位置：顶部（默认）</em></caption>
<thead>
<tr>
<th>标题内容 1</th>
<th>标题内容 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>页脚内容 1</td>
<td>页脚内容 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>主体内容 1</td>
<td>主体内容 2</td>
</tr>
</tbody>
</table> CSS コード:
caption {
caption-side: top;
padding: .5em;
color: #de64a4;
}レンダリング:
2 タイトルは表の下にあります
HTML コード:
<table>
<caption><em>表的标题，位置：底部</em></caption>
<thead>
<tr>
<th>标题内容 1</th>
<th>标题内容 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>页脚内容 1</td>
<td>页脚内容 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>主体内容 1</td>
<td>主体内容 2</td>
</tr>
</tbody>
</table> CSS コード:
caption {
caption-side: bottom;
padding: .5em;
color: #de64a4;
} レンダリング:
##ブラウザのサポート:
#キャプション側属性は、Chrome、Firefox、Safari、Opera、Internet Explorer 8、Android、iOS などのすべての主要なブラウザでサポートされています
注:
1. IE8 は、!DOCTYPE が指定されている場合にのみキャプション側属性をサポートします。
2. Firefox は、left と right という 2 つの非標準値をサポートします。 要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。
