テーブルにタイトルを付ける方法
テーブルにタイトルを付ける方法を紹介します。本記事では、HTMLの caption タグを使って、表の上にテーブルタイトルを表示するサンプルを作成します。テーブルだけを配置すると、何の一覧表なのか分かりにくい場合がありますが、タイトルを付けることで表の内容をひと目で伝えやすくなります。
このサンプルコードでは、HTMLで caption を記述し、CSSでタイトルの文字サイズ、太さ、余白、位置を調整します。JavaScriptは使用せず、HTMLとCSSだけで実装できるため、商品一覧、料金表、会員一覧、売上一覧など、さまざまなテーブルに導入しやすい構成です。
テーブルタイトルを付けることで、ページ内に複数の表がある場合でも、それぞれの表が何を示しているのか分かりやすくなります。シンプルな構成なので、初心者でも扱いやすく、既存のテーブルデザインにも追加しやすい実用的なサンプルです。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
| 項目名 | 内容 | 備考 |
|---|---|---|
| 項目A | サンプル内容A | 備考A |
| 項目B | サンプル内容B | 備考B |
| 項目C | サンプル内容C | 備考C |
| 項目D | サンプル内容D | 備考D |
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードを指定 -->
<meta charset="UTF-8">
<!-- 画面幅に合わせて表示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>テーブルにタイトルを付ける方法</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- テーブル全体を囲むエリア -->
<div class="table-caption-title_wrap">
<!-- タイトル付きテーブル -->
<table class="table-caption-title_table">
<!--
テーブルタイトル
この部分を書き換えると表示タイトルを変更できる
-->
<caption>商品一覧</caption>
<thead>
<tr>
<th>項目名</th>
<th>内容</th>
<th>備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>項目A</td>
<td>サンプル内容A</td>
<td>備考A</td>
</tr>
<tr>
<td>項目B</td>
<td>サンプル内容B</td>
<td>備考B</td>
</tr>
<tr>
<td>項目C</td>
<td>サンプル内容C</td>
<td>備考C</td>
</tr>
<tr>
<td>項目D</td>
<td>サンプル内容D</td>
<td>備考D</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>ファイル構成と設置方法
このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLにテーブル構造とタイトルを記述し、CSSでテーブルタイトル、罫線、見出し行のデザインを設定します。JavaScriptは使用しません。
sample/
├── index.html
└── style.css
index.html と style.css を同じフォルダへ配置し、ブラウザで index.html を開いてください。テーブルタイトルを変更したい場合は、HTML内の <caption> の文字を変更します。
コメント