テーブル(表)のスロット(セル)の結合「span属性」

縦方向(記述した場所から下に向けて)のスロットにまたがる場合は、「th要素」「td要素」に「rowspan属性」を指定して、結合させるスロットの数を「値」として指定」します。

横方向(記述した場所から右に向けて)のスロットにまたがる場合は、「th要素」「td要素」に「colspan属性」を指定して、結合させるスロットの数を「値」として指定」します。

「rowspan属性」「colspan属性」の記述例

HTMLソース

<table>
<tr>
<th rowspan="2">支店名</th><th rowspan="2">従業員数</th><th colspan="3">販売数</th>
</tr>
<tr>
<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個

「span」「row」「col」とは

span(スパン)を直訳すると、「端から端の長さ・距離・期間」を意味し、htmlでは値(スロット数)を指定する事で、その値の分だけスロットを結合できます。

row(ラォウ)は、「横の行」を意味し、「rowspan属性」の値の分だけ縦方向にスロットを結合させる事で、横行をまとめる効果があります。

colはcolumn(カラム)の略で、「新聞・雑誌などの縦の欄」の意味があり、「colspan属性」の値の分だけ横方向にスロットを結合させる事で、縦行をまとめる事ができます。

次のページへ テーブル(表)のタイトル・説明文「caption要素」

前のページへ テーブル(表)の作り方「table要素」

HTML5 に戻る

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