htmlテーブル（表）作成方法「table要素」
htmlテーブル（表）作成方法「table要素」をＨＴＭＬ５仕様で解説します。
「table要素」で、テーブル（表）を表現します。格子状に並ぶ１つを「スロット」と呼びます。２つ以上の「スロット」を結合する事ができますので、最終的に視覚上１マスになったもが「セル（cell）」です。
従来（基本）のテーブル（表）の例を記載します。
従来（基本）のテーブル（表）「table要素」の記述例
ＨＴＭＬソース
<table>
<tr>
<th>支店名</th>
<th>従業員数</th>
<th>Ａ商品</th>
<th>Ｂ商品</th>
<th>Ｃ商品</th>
</tr>
<tr>
<td>函館</td>
<td class="list">10人</td>
<td class="list">30個</td>
<td class="list">20個</td>
<td class="list">10個</td>
</tr>
<tr>
<td>仙台</td>
<td class="list">20人</td>
<td class="list">60個</td>
<td class="list">40個</td>
<td class="list">20個</td>
</tr>
<tr>
<td>大阪</td>
<td class="list">30人</td>
<td class="list">90個</td>
<td class="list">60個</td>
<td class="list">30個</td>
</tr>
<tr>
<td>合計</td>
<td class="list">60人</td>
<td class="list">180個</td>
<td class="list">120個</td>
<td class="list">60個</td>
</tr>
</table>ＣＳＳソース
table,th,td {
border:solid 1px black;
}
td.list {
border:solid 1px black;
text-align: right;
}ブラウザ表示
| 支店名 | 従業員数 | Ａ商品 | Ｂ商品 | Ｃ商品 |
|---|---|---|---|---|
| 函館 | 10人 | 30個 | 20個 | 10個 |
| 仙台 | 20人 | 60個 | 40個 | 20個 |
| 大阪 | 30人 | 90個 | 60個 | 30個 |
| 合計 | 60人 | 180個 | 120個 | 60個 |
テーブル（表）「table要素」の構造
「table（テーブル）」を直訳すると、「食卓・卓上」の他に「表・目録・計算表」とあり、ＨＴＭＬではテーブル（表）の作成に「table要素」でソース全体を囲みます。
テーブル（表）の基本的構造は、横方向の「行（row)」を「tr要素」（tr→table row)で定義し、この中に、「見出しセル」の場合は「th要素」（th→table header sell）、通常の「データセル」の場合は「td要素」（td→table data cell）を、配置したいスロットの数を配置します。
「th要素」（th→table header sell）と「td要素」（td→table data cell）はブロックレベルで、インライン要素・ブロックレベル要素を含む事ができます。
ＨＴＭＬ５ に戻る
ホームページ作成方法 TOPに戻る