テーブル(表)のスロット(セル)の結合「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に戻る