CSSで表タイトル（キャプションタグ）の位置を設定する方法

CSS のキャプション側属性の関連する属性値を設定することで、テーブル () タイトル (キャプション タグ) の位置を指定できます。つまり、キャプション側属性を使用して、どこにあるかを指定できます。タイトルはテーブルの側面にあります。

テーブル table では、表の短いタイトル (タイトルや短い説明など) を提供するためにキャプション タグが使用されます。キャプション タグは開始タグ

の後に挿入され、常にテーブルの最初の子である必要があります。次に、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 つの非標準値をサポートします。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がCSSで表タイトル（キャプションタグ）の位置を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。