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

HTMLのcaptionタグとは？表にキャプション（表題）を付ける方法を解説

HTMLのcaptionタグとは

HTMLの<caption>タグは、表（テーブル）にキャプション（表題）を付けるための要素です。キャプションを設定することで、その表が何を示しているのかを読み手にひと目で伝えることができます。

captionタグを利用する際の主なルールは以下のとおりです。

  • 1つの表に指定できるcaptionは1つだけ
  • <table>タグの直後（最初の子要素として）に記述する
  • デフォルトでは表の上部中央にセンタリングされて表示される

それでは、HTMLでcaptionタグを実装する具体例を見ていきましょう。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 2px solid blue;
   }
</style>
</head>
<body>
<table>
   <!-- 表のキャプション -->
   <caption>Expenses</caption>
  <tr>
     <th>Domains</th>
     <th>Cost</th>
  </tr>
  <tr>
     <td>Product Development</td>
     <td>500000</td>
  </tr>
  <tr>
     <td>Marketing</td>
     <td>500000</td>
  </tr>
  <tr>
     <td>Services</td>
     <td>100000</td>
  </tr>
  <tr>
     <td>Support</td>
     <td>100000</td>
  </tr>
  <tr>
     <td>Maintenance</td>
     <td>100000</td>
  </tr>
  <tr>
     <td colspan="2">Total Budget = INR 1300000</td>
  </tr>
</table>
</body>
</html>

実行結果

HTMLのcaptionタグとは？表にキャプション（表題）を付ける方法を解説

コードの解説

上記の例では、「費用項目」と「金額」の2列からなる経費の表を作成しています。最終行の合計額は、colspan="2"でセルを横断結合して表示しています。

表のキャプションは、次のように<caption>タグを使って設定しています。

<caption>Expenses</caption>

captionタグを使う際のポイント

  • 表示位置はCSSで変更可能：デフォルトでは表の上に中央揃えで表示されますが、CSSのcaption-sideプロパティ（top / bottom）で表の下側へ移動でき、text-alignで左右の揃えも調整できます。
  • アクセシビリティの向上：スクリーンリーダーはキャプションを読み上げるため、表の内容がすべてのユーザーに伝わりやすくなります。
  • SEOにも有効：検索エンジンが表の内容を正確に把握しやすくなります。

まとめ

captionタグを使えば、表にわかりやすいタイトルを簡単に追加できます。「1つの表には1つのcaption」が基本ルールなので、<table>タグの直後に必ず記述するようにしましょう。

  1. HTMLのth要素におけるcolspan属性の使い方をわかりやすく解説

    <th>要素のcolspan属性は、見出しセル（ヘッダーセル）が横方向にまたぐ列の数を指定するために使用されます。テーブルで複数の列にまたがる見出しを作成したい場合に便利な属性です。 colspan属性の基本構文 colspan属性の書き方は以下のとおりです。 <th colspan="num"> ここで「num」には、見出しセルがまたぐ列の数（正の整数）を指定します。たとえば「2」を指定すれば、その見出しセルは2列分の幅を持つことになります。 実装例 それでは、<th>要素のcolspan属性を実装した具体的な例を見てみましょう。以下の

  2. HTMLのcolgroupタグとは？テーブルの列をまとめてスタイルする方法

    <colgroup>タグとは<colgroup>タグは、HTMLテーブル内の1つ以上の列（カラム）をひとつのグループとしてまとめるための要素です。このタグを使うことで、グループに含まれるすべての列に対して、まとめてスタイルを適用できます。セルや行ごとに個別にスタイルを記述する必要がないため、コードがすっきりし、テーブル全体のデザイン管理も効率的になります。主な属性span − 列グループが対象とする列の数を指定します。たとえば「span=3」と設定すると、先頭から3列分が同じグループとして扱われます。使用例それでは、<colgroup>タグを使った実際の実装