htmlテーブル(表)作成方法「table要素」

htmlテーブル(表)作成方法「table要素」をHTML5仕様で解説します。

「table要素」で、テーブル(表)を表現します。格子状に並ぶ1つを「スロット」と呼びます。2つ以上の「スロット」を結合する事ができますので、最終的に視覚上1マスになったもが「セル(cell)」です。

従来(基本)のテーブル(表)の例を記載します。

従来(基本)のテーブル(表)「table要素」の記述例

HTMLソース

<table>
<tr>
<th>支店名</th>
<th>従業員数</th>
<th>A商品</th>
<th>B商品</th>
<th>C商品</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>

CSSソース

table,th,td {
border:solid 1px black;
}
td.list {
border:solid 1px black;
text-align: right;
}

ブラウザ表示

支店名従業員数A商品B商品C商品
函館10人30個20個10個
仙台20人60個40個20個
大阪30人90個60個30個
合計60人180個120個60個

テーブル(表)「table要素」の構造

「table(テーブル)」を直訳すると、「食卓・卓上」の他に「表・目録・計算表」とあり、HTMLではテーブル(表)の作成に「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)はブロックレベルで、インライン要素・ブロックレベル要素を含む事ができます。

HTML5 に戻る

ホームページ作成方法 TOPに戻る