[16-3] table のセルを連結しよう(colspan属性・rowspan属性)
最終更新日:2017年10月31日 (初回投稿日:2011年06月23日)
今回は、テーブルのセル( <th> <td> )を連結する方法です。
セルを横方向に連結するには colspan属性、縦方向なら rowspan属性を使います
<th> や <td> を連結させて、表をわかりやすく整理できます。
新作アイテム | 価格 | |
---|---|---|
Tシャツ | 半袖 | ¥3,500 |
長袖 | ¥5,500 | |
パンツ | 5分丈 | ¥15,000 |
7分丈 | ¥20,000 | |
10分丈 | ¥22,000 |
連結させる前はこの状態。これはちょっと整理したいですね。
新作アイテム | 仕様 | 価格 |
---|---|---|
Tシャツ | 半袖 | ¥3,500 |
Tシャツ | 長袖 | ¥5,500 |
パンツ | 5分丈 | ¥15,000 |
パンツ | 7分丈 | ¥20,000 |
パンツ | 10分丈 | ¥22,000 |
使用する属性 | colspan属性 rowspan属性 |
---|
● 2017年10月、サンプルは本文内に記載し、それに伴い本文も書き直しました。
「colspan属性」で 横方向に連結しよう
まずは、セルを横方向に連結してみましょう。この部分です。
この表は、縦列が3つですが、最初の <th>要素 2つを連結させています。
サンプルでは見出しセル <th> を連結させますが、<td>でも使い方は同じです。
col は column の略で縦列のこと。
colspan属性は、縦列(col)を1つのセルとしてまとめるため、結果的に横方向の連結になります。
縦横のイメージが逆でややこしいですが。colspanとrowspanを間違えないようにね。
サンプルのHTMLを見てみましょう。
<table class="sample1">
<tr>
<th colspan="2">新作アイテム</th>
<th>価格</th>
</tr>
<tr>
<td rowspan="2">Tシャツ</td>
<td>半袖</td>
<td>¥3,500</td>
</tr>
<tr>
<td>長袖</td>
<td>¥5,500</td>
</tr>
<tr>
<td rowspan="3">パンツ</td>
<td>5分丈</td>
<td>¥15,000</td>
</tr>
<tr>
<td>7分丈</td>
<td>¥20,000</td>
</tr>
<tr>
<td>10分丈</td>
<td>¥22,000</td>
</tr>
</table>
<th colspan="2">と指定する事で
<th>要素の縦列 2つ分を、1つの <th> としてまとめる 指定になります。
数字はまとめるセルの数です。3つをまとめたければ、colspan="3"と書きます。
「rowspan属性」で 縦方向に連結しよう
次は、セルを縦方向に連結してみましょう。この部分です。。
<td>要素を 2ヶ所連結させてますよ。
最初は2つのセルを1コに、その下は3つのセルを1コにまとめています。
サンプルのHTMLソースを見てみましょう。
<table class="sample1">
<tr>
<th colspan="2">新作アイテム</th>
<th>価格</th>
</tr>
<tr>
<td rowspan="2">Tシャツ</td>
<td>半袖</td>
<td>¥3,500</td>
</tr>
<tr>
<td>長袖</td>
<td>¥5,500</td>
</tr>
<tr>
<td rowspan="3">パンツ</td>
<td>5分丈</td>
<td>¥15,000</td>
</tr>
<tr>
<td>7分丈</td>
<td>¥20,000</td>
</tr>
<tr>
<td>10分丈</td>
<td>¥22,000</td>
</tr>
</table>
<td rowspan="2">や<td rowspan="3">と指定する事で、複数の <td>要素を、1つにまとめていますね。
rowspanは 行を縦方向に連結するため、あとに続く複数の <tr> の中身にも影響が出て、ソースがちょっと複雑になりますね。
最初に rowspan="2" とした後、次の<tr>〜</tr>の中には、<td>要素が 2つしかなくなってる事がわかりますね?
本来 3つあるんですが、先ほど2つ分を1つにまとめられたので、次の <tr>内は1コ減ってるんです。
次回予告
いかがでしたか?
次回は、カラ(テキスト無し)のセル( <th> <td>)の罫線(border)を非表示にする方法です。
これにはCSSの「empty-cells」を使います。
カレンダーなどで、日にちの数字がないのに枠だけがあって変なとき、このプロパティですっきりさせる事ができます。
- 関連記事
-
- [17-2] セクショニングの article要素、aside要素、section要素
- [17-1] HTML5 の新要素でページ全体を組もう
- (ちょっとメモ)テーブルをレスポンシブ対応させるCSS
- [16-7] テーブルセルで使う scope属性と headers属性について
- [16-6] table縦列グループ化( colgroup, col )
- [16-5] table横列グループ化(thead, tbody, tfoot)
- [16-4] tableのセルの枠線を非表示にしよう(empty-cellsプロパティ)
- [16-3] table のセルを連結しよう(colspan属性・rowspan属性)
- [16-2] table にタイトルをつけよう( caption要素 )
- [16-1] table(表)を作ろう(まずは基本の table, tr, th, td)
- [15-7] リストでナビゲーション( dl要素・dt要素・dd要素)
- [15-6] リストでナビゲーション( li 要素を display で横に並べる)
- [15-5] リストでナビゲーション( li 要素を float で横に並べる)
- [15-4] リストマーカーを画像や任意のテキストに変更する方法
- [15-3] 説明リストを作ろう( dl要素・dt要素・dd要素)
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク