[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>でも使い方は同じです。

colcolumn の略で縦列のこと。
colspan属性は、縦列(col)を1つのセルとしてまとめるため、結果的に横方向の連結になります。
縦横のイメージが逆でややこしいですが。colspanrowspanを間違えないようにね。

サンプルの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」を使います。
カレンダーなどで、日にちの数字がないのに枠だけがあって変なとき、このプロパティですっきりさせる事ができます。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.