<table> 表(テーブル)を作成する
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ |
親にできる要素 | フロー・コンテンツを受け入れる要素 |
子にできる要素 | 任意で1個の<caption> 、0個以上の<colgroup> 、任意で1個の<thead> 、0個以上の<tbody> 、1個以上の<tr> 、任意で1個の<tfoot> |
対応ブラウザ | caniuseで確認 |
<table>タグの説明
<table>
は、セルで構成された表(テーブル)を作成する祭に使用します。テーブルは、行と列の組み合わせによって構成された「セル」を扱うワークシートのことです。エクセルなどの表計算ソフト(Spreadsheet)でお馴染みの、マトリックス状のインターフェイスを持っています。
<table>
は様々な場面で用いられますが、独自の階層構造を持っているため、マークアップの腕を鍛えるには最適の材料と言えます。また、「その情報にテーブルを使うことは適切か否か」を考えることも、正しい文章構造を理解する上で重要な観点となります。
テーブルの作成は、以下の流れで行います。
<table>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- CSSの
display
は、既定値でtable
が適用されます。 - 視覚的な効果としてセルにボーダー(枠線)が付きます。結果としてセルの集合体であるテーブルは、格子状の表を映します。
- 同一のページ内に複数使うことができます。この要素自体を入れ子にすることはできませんが、
<td>
の中に配置することは許可されているので、入れ子状のテーブルを組むことも可能です。
<table>に指定できる主な属性
- width(非推奨)
- テーブル全体の幅を指定します。スタイルシートを使って下さい。
- height(非推奨)
- テーブル全体の高さを指定します。スタイルシートを使って下さい。
- align(非推奨)
- テーブルの表示位置を指定します。スタイルシートを使って下さい。
- border(非推奨)
- ボーダー(枠線)の太さを指定します。0を指定すると枠線が非表示になります。
- bordercolor(非推奨)
- ボーダー(枠線)の色を指定します。スタイルシートを使って下さい。
- bgcolor(非推奨)
- 背景色を指定します。スタイルシートを使って下さい。
- background(非推奨)
- 背景画像を指定します。スタイルシートを使って下さい。
- cellspacing(非推奨)
- セルとセルの間隔を指定します。スタイルシートを使って下さい。
- cellpadding(非推奨)
- セルの中の間隔を指定します。スタイルシートを使って下さい。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<table>の使い方とサンプル
<table>
の最も基本的な構造は以下のようになります。最初のうちはシンプルな表を作成して慣れていきましょう。
HTML
<table>
<tr>
<th>項目1</th>
<th>項目2</th>
</tr>
<tr>
<td>セルA1</td>
<td>セルB1</td>
</tr>
<tr>
<td>セルA2</td>
<td>セルB2</td>
</tr>
</table>
表示確認
テーブルに<caption>
を設置した例です。表の幅やキャプションの配置は、内容が整ってからCSSで調整します。
HTML
<table>
<caption>表のキャプション</caption>
<tr>
<th>項目1</th>
<th>項目2</th>
</tr>
<tr>
<td>セルA1</td>
<td>セルB1</td>
</tr>
<tr>
<td>セルA2</td>
<td>セルB2</td>
</tr>
</table>
表示確認
<thead>
、<tbody>
、<tfoot>
を使って構造を明確にすることもできます。
HTML
<table class="table_sample">
<caption>表のキャプション</caption>
<thead>
<tr>
<th>項目1</th>
<th>項目2</th>
</tr>
</thead>
<tbody>
<tr>
<td>セルA1</td>
<td>セルB1</td>
</tr>
<tr>
<td>セルA2</td>
<td>セルB2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">フッターセル</td>
</tr>
</tfoot>
</table>
表が完成したら、CSS(スタイルシート)を使って見栄えを調整しましょう。
CSS
.table_sample {
width: 100%;
margin-top: 1rem;
border-collapse: collapse;
border-top: 1px solid #ccc;
font-size: .875rem;
text-align: left;
word-wrap: break-word;
}
.table_sample th,
.table_sample td {
padding: 0.5em;
border-bottom: 1px solid #ccc;
}
.table_sample th {
background-color: #eeeeee;
font-weight: bold;
vertical-align: middle;
}
.table_sample td:first-child {
width: 25%;
background-color: #f5f5f5;
}
表示確認
セル同士の結合に関しては、<th>
や<td>
のcolspan
属性とrowspan
属性を、列のグループ化に関しては、<colgroup>
と<col>
を参照して下さい。
<table>に関連するHTMLタグ
表(テーブル)を作成する要素 | |
---|---|
<table> | 表(テーブル)を作成する |
<caption> | 表(テーブル)にキャプションを付ける |
<col> | 表(テーブル)の縦列の属性をまとめて指定する |
<colgroup> | 表(テーブル)の縦列をグループ化する |
<tr> | 表(テーブル)の横一行を定義する |
<th> | 表(テーブル)の見出しとなるセルを作成する |
<td> | 表(テーブル)のセルを作成する |
<thead> | 表(テーブル)のヘッダー行を定義する |
<tbody> | 表(テーブル)の本体部分を定義する |
<tfoot> | 表(テーブル)のフッター行を定義する |