HTMLのテーブルにキャプションを追加する方法
HTMLのテーブルにキャプションを追加する方法について説明します。
テーブルにキャプションを追加することで、テーブルの内容を説明する簡潔なタイトルを提供できます。
以下は、HTMLとCSSのファイルに分けたサンプルコードと、その詳細な説明です。
HTMLファイル (index.html)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>テーブルキャプションの例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <table class="test-table"> <caption class="test-caption">テーブルのキャプション</caption> <thead> <tr> <th class="test-header">ヘッダー1</th> <th class="test-header">ヘッダー2</th> <th class="test-header">ヘッダー3</th> </tr> </thead> <tbody> <tr> <td class="test-data">データ1</td> <td class="test-data">データ2</td> <td class="test-data">データ3</td> </tr> <tr> <td class="test-data">データ4</td> <td class="test-data">データ5</td> <td class="test-data">データ6</td> </tr> </tbody> </table> </body> </html>
CSSファイル (styles.css)
.test-table { width: 100%; border-collapse: collapse; } .test-caption { font-size: 1.2em; margin-bottom: 10px; text-align: center; } .test-header, .test-data { border: 1px solid #ddd; padding: 8px; } .test-header { background-color: #f4f4f4; font-weight: bold; } .test-data { text-align: center; }
説明
1. HTMLファイルの構造
- table要素にclass="test-table"を付けて、CSSスタイルを適用できるようにしています。
- caption要素を使用して、テーブルのタイトルを設定しています。
ここではclass="test-caption"を付けて、キャプションのスタイルを指定します。
- thead要素でテーブルのヘッダー行を定義し、th要素にclass="test-header"を付けて、ヘッダーのスタイルを指定します。
- tbody要素でテーブルのデータ行を定義し、td要素にclass="test-data"を付けて、データのスタイルを指定します。
2. CSSファイルのスタイリング
- .test-tableクラスでテーブル全体の幅を100%に設定し、border-collapse: collapse;でテーブルのセル境界線が重ならないようにしています。
- .test-captionクラスでキャプションのフォントサイズを設定し、中央揃えにしています。
margin-bottomプロパティでキャプションとテーブル本体の間にスペースを作っています。
- .test-headerクラスでヘッダーセルの背景色を設定し、フォントを太くしています。
borderプロパティでセルに枠線を追加し、paddingでセル内のスペースを確保しています。
- .test-dataクラスでデータセルのテキストを中央揃えにし、背景色を設定しています。
この方法で、HTMLテーブルにキャプションを追加し、CSSでスタイルを適用することができます。
テーブルが長くなり、ウィンドウサイズに収まらない場合でも、captionは常にテーブルの上部に表示されます。
デザインやレイアウトはCSSで自由にカスタマイズできるので、必要に応じてスタイルを調整してください。