HTMLのテーブル（セルの結合）

テーブル（セルの結合）

前回までは、碁盤の目のような、田の字型のテーブルしか作ることができませんでした。

田	田
田	田

セルを結合し、変形したテーブルの作り方を見ていきましょう。

セルを
結合	した

変形	テーブルの
	作り方です

◆　結合させる、COLSPAN、ROWSPAN 属性

上の3つのテーブルの、ソースを見比べてみましょう。カギは<TD>要素にある COLSPAN の左右の結合と ROWSPAN の上下の結合という属性です。

セルをつなげるには、COLSPAN＝横長、ROWSPAN＝縦長で結合することができます。

表示結果：
（通常）

1	2
3	4

ソース：

<TABLE BORDER="3">
   <TR>
      <TD>1</TD>
      <TD>2</TD>
   </TR>
   <TR>
      <TD>3</TD>
      <TD>4</TD>
   </TR>
</TABLE>

表示結果：
（COLSPAN）

1
2	3

ソース：

  <TABLE BORDER="3">
     <TR>
        <TD COLSPAN="2">1</TD>
     </TR>
     <TR>
        <TD>2</TD>
        <TD>3</TD>
     </TR>
  </TABLE>

表示結果：
（ROWSPAN）

1	2
	3

ソース：

 <TABLE BORDER="3">
    <TR>
      <TD ROWSPAN="2">1</TD>
      <TD>2</TD>
    </TR>
    <TR>
       <TD>3</TD>
    </TR>
 </TABLE>

このように、「COLSPAN、ROWSPAN」の結合するセルの数だけの数字を入れることによって結合します。

両方のCOLSPAN、ROWSPAN属性を同じタグ内に指定すると、縦横の両方向に結合します。
下のテーブルは、９個のセルがありましたが、４個結合したので６個のセルになっています。

表示結果：

1		2
1		3
4	5	6

ソース：

 <TABLE BORDER="10">
   <TR>
     <TD COLSPAN="2" ROWSPAN="2">1</TD>
     <TD>2</TD>
   </TR>

   <TR>
     <TD>3</TD>
   </TR>

   <TR>
      <TD>4</TD>
      <TD>5</TD>
      <TD>6</TD>
   </TR>
 </TABLE>

◆　テーブル結合のやり方

最初に、下のような3×3マスのごく簡単なテーブルがあると仮定します。

表示結果：

1	2	3
4	5	6
7	8	9

ソース：

 <TABLE BORDER="5">
    <TR>
      <TD>1</TD>
      <TD>2</TD>
      <TD>3</TD>
    </TR>

    <TR>
      <TD>4</TD>
      <TD>5</TD>
      <TD>6</TD>
    </TR>

    <TR>
      <TD>7</TD>
      <TD>8</TD>
      <TD>9</TD>
    </TR>
 </TABLE>

・　属性「COLSPAN」で、横長のセルを作り、はみ出すセルを消す

仮定したソースで単純に「4」のセルを横長にしてみましょう。相当する<TD>要素に、「COLSPAN="2"」を書き足します。

この段階のものをブラウザ表示させてみると、「表示結果-A」ように表示が変になってしまいます。この状態では2段目だけセルが4つ分に増えたのですから、当然表示が乱れてしまうのです。
このとき「COLSPAN="2" 」ですので、２つ分のセルを使うということになります。

はみ出しを削るには、「5」または「6」のセルに相当する<TD>要素を削ってしまえば、表示が正常になります。
なれない間は、変形したテーブルを作るときは、この「はみ出すセルの分を削る」ようにします。

表示結果-A：

1	2	3
4		5	6
7	8	9

ソース：（修正前）

 <TABLE BORDER="1">
    <TR>
       <TD>1</TD>
       <TD>2</TD>
       <TD>3</TD>
    </TR>

    <TR>
       <TD COLSPAN="2">4</TD>
       <TD>5</TD>
       <TD>6</TD>
    </TR>

    <TR>
       <TD>7</TD>
       <TD>8</TD>
       <TD>9</TD>
    </TR>
 </TABLE>

⇒

「6」のセルを削り
修正したもの

1	2	3
4		5
7	8	9

ソース：（修正後）

 <TABLE BORDER="1">
   <TR>
     <TD>1</TD>
     <TD>2</TD>
     <TD>3</TD>
   </TR>

   <TR>
     <TD COLSPAN="2">4</TD>
     <TD>5</TD>
   </TR>

   <TR>
      <TD>7</TD>
      <TD>8</TD>
      <TD>9</TD>
   </TR>
 </TABLE>

・属性「ROWSPAN」で、縦長のセルを作る

仮定したソースで単純に「3」のセルを縦長に、3つ分のセルの長さにしてみましょう。こちらも考え方は同じです、「3」が下に2つ分のセルを伸びるため、はみ出す「6」と「9」のセルを削ります。

修正前

1	2	3
4	5		6
7	8		9

ソース：（修正前）

 <TABLE BORDER="1">
    <TR>
       <TD>1</TD>
       <TD>2</TD>
       <TD ROWSPAN="3">3</TD>
    </TR>

    <TR>
      <TD>4</TD>
      <TD>5</TD>
      <TD>6</TD>
    </TR>

    <TR>
      <TD>7</TD>
      <TD>8</TD>
      <TD>9</TD>
    </TR>
 </TABLE>

⇒

「６と９」のセルを削り
修正したもの

1	2	3
4	5
7	8

ソース：（修正後）

 <TABLE BORDER="1">
    <TR>
      <TD>1</TD>
      <TD>2</TD>
      <TD ROWSPAN="3">3</TD>
    </TR>

    <TR>
       <TD>4</TD>
       <TD>5</TD>
    </TR>

    <TR>
        <TD>7</TD>
        <TD>8</TD>
    </TR>
 </TABLE>

テーブルのタイトルとセル見出し

◆　<TBODY>要素

ソースに<TBODY>というものが、増えて記述されています。単一表であれば、別に記述する必要はないのですが、「表を区画化する場合、TBODY要素は TABLE の中に必ず出現しなければならない（一つ以上必須）」とW3Cが言っているので・・・。簡単に説明するとテーブルの本体を表す重要な要素（お約束）の１つなので記述するべきです。

ソース：

表示結果：

<TABLE border="1">
  <TBODY>
    <TR>
       <TD colspan="3" align="center">
              Link's Information.</TD>
    </TR>
    <TR>
       <TD rowspan="2">相互<BR>リンク</TD>
       <TD>HTML</TD>
       <TD>最新ＨＴＭＬ情報</TD>
    </TR>
    <TR>
       <TD>CGI</TD>
       <TD>簡単CGI設置</TD>
    </TR>
    <TR>
       <TD rowspan="2">お勧め<BR>リンク</TD>
       <TD>レストラン</TD>
       <TD>最近のお勧めレストラン</TD>
    </TR>
    <TR>
       <TD>カフェ</TD>
       <TD>最近のお勧めレストラン</TD>
    </TR>
  </TBODY>
</TABLE>

Link's Information.
相互リンク	HTML	最新ＨＴＭＬ情報
相互リンク	CGI	簡単CGI設置
お勧めリンク	レストラン	最近のお勧めレストラン
お勧めリンク	カフェ	最近のお勧めレストラン

◆　セル内の見出し<TH>要素

テーブルの中（セル）で見出しの定義をする要素が<TH>要素で、<TD>を<TH>に変更します。
見出しを、作ることで見やすくわかりやすい表になります。
例えば、上のソースで「相互<BR>リンク」と「お勧め<BR>リンク」という文字列の<TD>を<TH>の見出しに変更します。

<TH>や<TD> には、ABBR属性を使ってヘッダラベルの省略形を付けておくことが WAI で薦められています。非視覚者用のブラウザにも対応するための物だと考えてください。

ソース：

表示結果：

<TABLE border="1">
  <TBODY>
     <TR>
       <TH colspan="3" abbr="リンク集">
            Link's Information.</TH>
     </TR>
     <TR>
       <TH rowspan="2" abbr="相互リンク集">
            相互<BR>リンク</TH>
       <TD>HTML</TD>
       <TD>最新ＨＴＭＬ情報</TD>
     </TR>
     <TR>
       <TD>CGI</TD>
       <TD>簡単CGI設置方法</TD>
     </TR>
     <TR>
        <TH rowspan="2" abbr="お勧めリンク集">
            お勧め<BR>リンク</TH>
        <TD>★★レストラン</TD>
        <TD>最近のお勧めレストラン情報集</TD>
      </TR>
      <TR>
         <TD>◆◆カフェ</TD>
         <TD>最近のお勧めカフェ情報集</TD>
      </TR>
   </TBODY>
</TABLE>

Link's Information.
相互リンク	HTML	最新ＨＴＭＬ情報
相互リンク	CGI	簡単CGI設置方法
お勧めリンク	★★レストラン	最近のお勧めレストラン情報集
お勧めリンク	◆◆カフェ	最近のお勧めカフェ情報集

このように、<TH>では、太字で中央揃えになります。定義することで、視覚的に問題のある方にも内容がわかりやすいページになります。

◆　テーブルにタイトルを付ける<CAPTION>要素

テーブルの上（外)にタイトル的な説明をつける要素です。テーブルのセルが増えると小分けにしたほうが見やすく・解り易くなるのは確かです。
そこで、一つ一つのテーブルにタイトルをつけることで明細なテーブルに変化します。
では、上のソースを種類別に分けてタイトルを入れて見ましょう。

注意：　この<CAPTION>要素には、一つだけ条件があります。
<CAPTION>要素は、タイトルを付ける<TABLE>タグの直下で、他のどのタグよりも先に記述することになります。解らなければ「<TABLE><CAPTION>タイトル</CAPTION>」のようにセットにして下さい。

ソース：

表示結果：

<DIV STYLE=" TEXT-ALIGN : CENTER ">
 <TABLE border="1">
 <CAPTION>相互リンク集</CAPTION>
    <TBODY>
       <TR>
         <TH>HTML</TH>
         <TD>最新ＨＴＭＬ情報</TD>
       </TR>
       <TR>
         <TH>CGI</TH>
         <TD>簡単CGI設置方法</TD>
       </TR>
    </TBODY>
 </TABLE>

<BR>これは、<HR>でも良いですよ。

 <TABLE border="1">
 <CAPTION>お勧めリンク集</CAPTION>
    <TBODY>
       <TR>
         <TH>★★レストラン</TH>
         <TD>最近のお勧めレストラン情報集</TD>
       </TR>
       <TR>
         <TH>◆◆カフェ</TH>
         <TD>最近のお勧めカフェ情報集</TD>
       </TR>
   </TBODY>
 </TABLE>
</DIV>

相互リンク集
HTML	最新ＨＴＭＬ情報
CGI	簡単CGI設置方法

お勧めリンク集
★★レストラン	最近のお勧めレストラン情報集
◆◆カフェ	最近のお勧めカフェ情報集

どうですか、一目瞭然でしょう！また、<CAPTION>要素内には<IMG>（画像）も使えます。
<table><caption><img src="ファイル" alt="テキスト"></caption>

ソース：

<table>
<caption style="background-image:url(' ファイル名 ')" alt="テキスト">
キャプション背景画像</caption>


セル	セル
セル	セル

キャプション背景画像
セル	セル
セル	セル

<CAPTION>にスタイルシートの属性を使うと、テーブルの上の「左寄せ｜右寄せ」やテーブルの下の「左寄せ｜右寄せ」のタイトルが設定できます。（対応ブラウザは、少ないようです。）

例えば：
「<CAPTION style="tixt-align：位置値">」 left｜rightで、テーブルの上部で左寄せ｜右寄せのタイトル
「<CAPTION style="caption-side：bottom">」で、テーブルの下で中央にタイトル
「<CAPTION style="caption-side：bottom；tixt-align：位置値 left｜right">」で、テーブルの下で左寄せ｜右寄せのタイトル

属性は、「ALIGN="BOTTOM"」のほかに、スタイルシートの属性が指定できます。

　【←BACK ┃NEXT→】

テーブル（セルの結合）

◆ 結合させる、COLSPAN、ROWSPAN 属性

◆ テーブル結合のやり方

・ 属性「COLSPAN」で、横長のセルを作り、はみ出すセルを消す

・属性「ROWSPAN」で、縦長のセルを作る

テーブルのタイトルとセル見出し

◆ <TBODY>要素

◆ セル内の見出し<TH>要素

◆ テーブルにタイトルを付ける<CAPTION>要素

タグ解説

TBODY

TH

CAPTION

◆　結合させる、COLSPAN、ROWSPAN 属性

◆　テーブル結合のやり方

・　属性「COLSPAN」で、横長のセルを作り、はみ出すセルを消す

◆　<TBODY>要素

◆　セル内の見出し<TH>要素

◆　テーブルにタイトルを付ける<CAPTION>要素