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

HTMLで表にキャプションを追加する方法をわかりやすく解説

HTMLで表（テーブル）にキャプション（表題）を付けるには、<caption>タグを使用します。キャプションは表の内容をひと目で理解できるようにするための短い説明文で、<table>タグの直後に記述するのが基本です。

captionタグの基本ルール

<caption>タグを使う際は、以下のポイントに注意しましょう。

  • <caption>は必ず<table>タグの直後に配置します。
  • 1つの表に付けられるキャプションは1つだけです。
  • キャプションはデフォルトで表の上部中央に表示されます。

コード例

以下のコードを実行すると、HTMLの表にキャプションを含めることができます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
         }
      </style>
   </head>
   <body>
      <h2>Cricketers</h2>
      <table style = "width:100%">
         <caption>Indian Cricketers</caption>
         <th>Name</th>
         <tr>
            <td>Sachin Tendulkar</td>
         </tr>
         <tr>
            <td>Virat Kohli</td>
         </tr>
      </table>
   </body>
</html>

コードの解説

この例では、<table>タグの直後に<caption>Indian Cricketers</caption>を記述することで、表の上部に「Indian Cricketers（インドのクリケット選手）」という表題が表示されます。また、<style>タグ内のCSSでtable, th, tdに境界線を指定しているため、表全体が罫線付きで見やすく表示されます。

キャプションの位置を変更するには

CSSのcaption-sideプロパティを使うと、キャプションの表示位置を変更できます。

caption {
   caption-side: bottom; /* 表の下部に表示 */
}

top（上部・デフォルト）、bottom（下部）などを指定できるので、デザインに合わせて使い分けるとよいでしょう。

まとめ

表にキャプションを付けることで、ユーザーが表の内容を素早く把握できるようになり、アクセシビリティの向上にもつながります。<caption>タグを活用して、より分かりやすい表を作成しましょう。

  1. HTML DOM キャプションオブジェクトとは？基本と使い方を解説

    HTML DOM の Caption オブジェクトは、HTML の <caption> 要素に関連付けられたオブジェクトです。<caption> 要素は、テーブル（表）にキャプション（タイトル）を設定するために使用され、必ずテーブルの最初の子要素として配置する必要があります。Caption オブジェクトを利用することで、JavaScript から caption 要素へアクセスしたり、動的に生成したりすることが可能になります。プロパティ注意：以下のプロパティは HTML5 ではサポートされていません。HTML DOM Caption オブジェクトのプロパティは次のとおり

  2. HTML DOM テーブルの createCaption() メソッドの使い方を解説

    HTML DOM のテーブルオブジェクトが持つ createCaption() メソッドは、空の <caption> 要素を新しく生成し、HTML 文書内のテーブルに追加するためのメソッドです。テーブルにタイトル(キャプション)を動的に付与したい場合に便利です。 構文 createCaption() メソッドの基本的な構文は以下のとおりです。 object.createCaption() 引数は不要で、呼び出すだけで対象のテーブルにキャプション要素が追加されます。すでにキャプションが存在する場合は、既存のキャプションが返されます。 createCaption() メソッドの使用例