記事の内容
テーブル要素
table要素は、テーブルの行と列でグリッド形式する要素になります。
必須タグ
- table要素
- tr要素
- th要素
- td要素
必須ではないタグ
- caption要素
- thead要素
- tbody要素
- tfoot要素
| 要素名 | 説明 |
|---|---|
| table | 表組みを表す |
| caption | 表組みを表すのタイトルを表す |
| thead | 表組みのヘッダー部分の行グループを表す |
| tbody | 表組みの本体部分の行グループを表す |
| tfoot | 表組みのフッター部分の行グループを表す |
| tr | 表組みの表を表す |
| th | 表組みの見出しセルを表す |
| td | 表組みセルを表す |
table要素
記法
<table>
<caption>表のタイトル</caption>
<thead>
<tr>
<th>見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th>セルの内容</th>
</tr>
</tbody>
<tfoot>
<tr>
<th>フッター内容</th>
</tr>
</tfoot>
</table>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>テーブル関係のタグ</title>
</head>
<body>
<table cellspacing="0">
<caption>
テーブルタグの関係性
</caption>
<thead>
<tr>
<th>タイトル1</th>
<th>タイトル2</th>
<th>タイトル3</th>
</tr>
</thead>
<tbody>
<tr>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>結果1</td>
<td>結果2</td>
<td>結果3</td>
</tr>
</tfoot>
</table>
</body>
</html>table,
table th,
table td {
border: 1px solid #000;
}出力結果
| タイトル1 | タイトル2 | タイトル3 |
|---|---|---|
| 項目1 | 項目2 | 項目3 |
| 結果1 | 結果2 | 結果3 |
属性値(id/class以外)
tableタグにはさまざまな属性があり、外観や動作をカスタマイズするのに役立ちます。
記法
<table 属性=”属性値”></table>
border
テーブルのセルの境界線を描画するかどうかを指定します。値として “1” を指定すると、境界線が表示されます。
cellspacing
セル間のスペースを指定します。
cellpadding
セル内の内容とセルの境界線との間のスペースを指定します。
width
テーブルの幅を指定します。値としてピクセル数やパーセンテージを指定できます。
summary
テーブルの要約や説明を提供するテキストを指定します。