テーブル（表）のスロット（セル）の結合「span属性」
縦方向（記述した場所から下に向けて）のスロットにまたがる場合は、「th要素」「td要素」に「rowspan属性」を指定して、結合させるスロットの数を「値」として指定」します。
横方向（記述した場所から右に向けて）のスロットにまたがる場合は、「th要素」「td要素」に「colspan属性」を指定して、結合させるスロットの数を「値」として指定」します。
「rowspan属性」「colspan属性」の記述例
ＨＴＭＬソース
<table>
<tr>
<th rowspan="2">支店名</th><th rowspan="2">従業員数</th><th colspan="3">販売数</th>
</tr>
<tr>
<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個 |
「span」「row」「col」とは
span（スパン）を直訳すると、「端から端の長さ・距離・期間」を意味し、htmlでは値（スロット数）を指定する事で、その値の分だけスロットを結合できます。
row（ラォウ）は、「横の行」を意味し、「rowspan属性」の値の分だけ縦方向にスロットを結合させる事で、横行をまとめる効果があります。
colはcolumn（カラム）の略で、「新聞・雑誌などの縦の欄」の意味があり、「colspan属性」の値の分だけ横方向にスロットを結合させる事で、縦行をまとめる事ができます。
次のページへ テーブル（表）のタイトル・説明文「caption要素」
前のページへ テーブル（表）の作り方「table要素」
ＨＴＭＬ５ に戻る
ホームページ作成方法 TOPに戻る