JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSのcaption-sideプロパティでテーブルキャプションの位置を制御する方法

CSSの caption-side プロパティを使うと、テーブル（表）のキャプションを表示する位置を自由に制御できます。デフォルトではキャプションはテーブルの上部に配置されますが、このプロパティを指定することで、下部に移動させることも可能です。

caption-sideプロパティの主な値

  • top：キャプションをテーブルの上部に配置します（初期値）
  • bottom：キャプションをテーブルの下部に配置します

実装例

以下のコードを実行して、caption-side プロパティの動作を確認してみましょう。1つ目のテーブルではキャプションが上部に、2つ目のテーブルでは下部に表示されます。

<html>
   <head>
      <style>
         caption.top {
            caption-side: top;
         }
         caption.bottom {
            caption-side: bottom;
         }
      </style>
   </head>
   <body>
      <table style = "width:500px; border:3px solid gray;">
         <caption class = "top">
            国の一覧（上部キャプション）
         </caption>
         <tr><td>インド</td></tr>
         <tr><td>イギリス</td></tr>
         <tr><td>アメリカ</td></tr>
         <tr><td>オーストラリア</td></tr>
      </table>
      <br />
      <table style = "width:500px; border:3px solid blue;">
         <caption class = "bottom">
            国の一覧（下部キャプション）
         </caption>
         <tr><td>インド</td></tr>
         <tr><td>イギリス</td></tr>
         <tr><td>アメリカ</td></tr>
         <tr><td>オーストラリア</td></tr>
      </table>
      <br />
   </body>
</html>

このように、クラスごとに異なる caption-side の値を設定することで、同じページ内でもキャプションの位置を使い分けることができます。表の見出しを目立たせたい場合は上部に、補足説明として表示したい場合は下部に配置するなど、デザインに合わせて柔軟に活用しましょう。

  1. CSSのcaption-sideプロパティでテーブルキャプションの位置を自在に制御する方法

    CSSのcaption-sideプロパティは、テーブルのキャプション（表題）ボックスを垂直方向のどの位置に配置するかを指定するためのプロパティです。指定できる値は「top」と「bottom」で、デフォルトではキャプションはテーブルの上部に表示されます。基本の構文CSSのcaption-sideプロパティの基本的な書き方は以下のとおりです。セレクタ {     caption-side: /*値*/ }使用例1：キャプションを下部に配置する次の例では、caption-sideプロパティを使ってキャプションをテーブルの下側に配置しています。<!DOCT

  2. HTMLでキャプション（表題）付きのテーブルを作成する方法

    HTMLでキャプション（表題）付きのテーブルを作成するには、<caption>タグを使用します。キャプションはテーブルの内部に配置され、<table>タグの直後に記述するのが決まりです。 <caption>タグで指定したテキストは、デフォルトではテーブルの上部中央に表示されます。表示位置を変更したい場合は、CSSの「caption-side」プロパティ（top・bottom・left・rightなど）を使って調整することも可能です。 コード例 以下のコードを実行すると、キャプション付きのテーブルがどのように表示されるかを確認できます。 <!DOCTY