テーブルにタイトルを付ける方法
テーブルにタイトルを付ける方法を紹介します。このサンプルでは、HTMLのcaption要素を使用して、テーブルの上部に「商品一覧」というタイトルを表示します。表の内容を示すタイトルを付けることで、何についてまとめたテーブルなのかを利用者へ分かりやすく伝えられます。
商品一覧や料金表、比較表、管理画面のデータ一覧、会員サイトの情報一覧など、テーブルの内容をタイトルで明確にしたい場面に利用できます。見出しとは別にtable要素へcaptionを設定するため、テーブルとそのタイトルをひとまとまりの内容として記述できます。JavaScriptは使用せず、HTMLとCSSだけで実装できます。
タイトルの文章やテーブルの見出し、各セルの内容は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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではtable要素の中にcaption要素を配置し、テーブルの上部に「商品一覧」というタイトルを表示します。CSSではテーブル全体の横幅や余白、captionの文字サイズ・文字色・配置、セルの余白や枠線、見出し行の背景色などを設定します。JavaScriptを使用しないため、HTMLとCSSだけでテーブルにタイトルを付けられます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはタイトル付きテーブルを構成するファイルです。table要素内のcaption要素に「商品一覧」と記述し、テーブルのタイトルとして表示しています。caption内の文字を書き換えると、用途に合わせてタイトルを変更できます。また、「項目名」「内容」「備考」の見出しや、各行のデータも編集できます。
style.cssはテーブルとタイトルのデザインを設定するファイルです。テーブル全体の最大横幅や余白、captionの文字サイズ・文字色・太さ・配置、セルの余白や枠線、見出しセルの背景色などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存します。index.htmlからstyle.cssを読み込んだ状態でsample/index.htmlをブラウザで開くと、テーブルの上部に「商品一覧」というタイトルが表示されます。タイトルを変更する場合は、index.htmlの<caption>商品一覧</caption>に記述している「商品一覧」の部分を書き換えてください。
カスタマイズできる内容
index.htmlではcaptionに表示するテーブルタイトル、見出しセルの「項目名」「内容」「備考」、各データセルの内容を変更できます。style.cssではページの背景色、テーブル全体の横幅や余白、タイトルの文字色・文字サイズ・太さ・配置、セルの余白や枠線、見出しセルの背景色などを変更できます。captionのtext-align:left;を変更すると、タイトルの配置も調整できます。
数値調整
style.css
max-width:800px;
テーブル全体を囲むエリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
テーブル全体を囲むエリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。autoによって左右中央へ配置されます。
padding:24px;
テーブル全体を囲むエリアの内側余白です。値を大きくするとテーブルと外側の間隔が広がり、小さくすると狭くなります。
margin-bottom:12px;
テーブルタイトルとテーブル本体の間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。
font-size:20px;
テーブルタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。
padding:12px;
見出しセルとデータセルの内側余白です。値を大きくすると文字と枠線の間隔が広がり、小さくすると詰まった表示になります。
border:1px solid #d1d5db;
見出しセルとデータセルの枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
レスポンシブ対応
このサンプルは画面幅に合わせてテーブルを表示できる構成です。style.cssのテーブルにwidth:100%;を設定しているため、テーブルは親要素の横幅に合わせて表示されます。テーブル全体を囲む要素にはmax-width:800px;とoverflow-x:auto;を設定しているため、内容によって横幅が表示領域を超えた場合は横方向へスクロールして確認できます。
コメント