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

HTMLのcaptionタグでテーブルにキャプション（表題）を付ける方法

HTMLでテーブルにキャプション（表題）を追加するには、<caption>タグを使用します。<caption>タグは<table>タグの直後に記述することで、テーブルの上部に自動的に表題として表示されます。

captionタグの基本ルール

  • <caption>タグは、<table>タグの開始タグの直後（最初の子要素）に記述します。
  • 1つのテーブルに設定できるキャプションは1つだけです。
  • デフォルトではテーブルの中央上に表示され、CSSのcaption-sideプロパティで位置を変更できます。

コード例

以下は、「Indian Cricketers（インドのクリケット選手）」というキャプションをテーブルに追加した例です。

<!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>

まとめ

<caption>タグを使えば、簡単な記述だけでテーブルに表題を付けられます。テーブルの内容が何を示しているのかを明確に伝えられるため、アクセシビリティの向上にも役立ちます。ぜひ活用してみてください。

  1. HTMLテーブル（表）の作り方｜table・tr・th・tdタグの基本をわかりやすく解説

    Webページ上で表を作成するには、HTMLの<table>タグを使用します。テーブルは、行を表す<tr>タグ、見出しセルを表す<th>タグ、そしてデータセルを表す<td>タグを組み合わせて構成されます。 HTMLテーブルの基本構造 テーブルは以下の要素で構成されています。 <table>：テーブル全体を定義するコンテナ要素 <tr>（Table Row）：テーブルの1行を定義します <th>（Table Header）：見出しとなるセルを定義します。多くのブラウザでは太字かつ中央揃えで表示されます <t

  2. HTML DOM の captionSide プロパティとは？表キャプション位置の設定方法を解説

    HTML DOM の captionSide プロパティは、表（テーブル）のキャプション（caption 要素）の表示位置を取得・設定するために使用されます。指定できるのは垂直方向の位置のみで、「上（top）」または「下（bottom）」のいずれかとなります。 captionSide プロパティの構文 captionSide プロパティを設定する際の基本構文は以下のとおりです。 object.style.captionSide = top|bottom|initial|inherit 設定できる値 値説明 topキャプションを表の上に配置します。デフォルト値です。 bottomキャプシ