表を使う その2

表を使うの続編です。見出しセルの使い方、表題のつけ方、セルの結合を扱います。

目次

• 見出しセル
• 表題
• セルの結合(横)
• セルの結合(たて)

見出しセル

まずは下の表を見てください。

<table>
  <tr>
    <td>場所</td><td>天気</td><td>最高気温</td><td>最低気温</td><td>降水確率</td>
  </tr>
  <tr>
    <td>東京</td><td>晴れ</td><td>30℃</td><td>20℃</td><td>10％</td>
  </tr>
  <tr>
    <td>千葉</td><td>曇り</td><td>27℃</td><td>18℃</td><td>50％</td>
  </tr>
</table>

東京と千葉の天気を書いた表です。よく見ると「場所」「天気」「最低気温」「最高気温」「降水確率」はそれぞれの項目の見出しになっています。このようなセルにはtd要素よりもth要素を使うほうがベターです。<td>〜</td>を<th>〜</th>に変えてください。

<table>
  <tr>
    <th>場所</th><th>天気</th><th>最高気温</th><th>最低気温</th><th>降水確率</th>
  </tr>
  <tr>
    <td>東京</td><td>晴れ</td><td>30℃</td><td>20℃</td><td>10％</td>
  </tr>
  <tr>
    <td>千葉</td><td>曇り</td><td>27℃</td><td>18℃</td><td>50％</td>
  </tr>
</table>

表題

先ほどの表は天気予報を表していました。caption要素を使うと表題をつけることができます。<caption>〜</caption>に表題を書き、<table>のすぐ次においてください。

caption要素の中身はインライン要素です。<a href="URL">〜</a>でリンクを張ることもできます。

<table>
  <caption>9月15日の天気</caption>
  <tr>
    <th>場所</th><th>天気</th><th>最高気温</th><th>最低気温</th><th>降水確率</th>
  </tr>
  <tr>
    <td>東京</td><td>晴れ</td><td>30℃</td><td>20℃</td><td>10％</td>
  </tr>
  <tr>
    <td>千葉</td><td>曇り</td><td>27℃</td><td>18℃</td><td>50％</td>
  </tr>
</table>

セルの結合(横)

セルを結合させてみましょう。次の表のB1セルとC1セルを結合することにします。

<table>
  <tr>
    <td>A1</td><td>B1</td><td>C1</td>
  </tr>
  <tr>
    <td>A2</td><td>B2</td><td>C2</td>
  </tr>
</table>

セルを横に結合するときはcolspan属性を使います。B1セルとC1セルを結合するのなら、B1セルのtdタグにcolspan="2"と、何個分セルを結合するのかを指定します。こうするとB1セルが右へ伸びてくるので、C1セルは削除します。

<table>
  <tr>
    <td>A1</td><td colspan="2">B1</td><!-- C1はなし -->
  </tr>
  <tr>
    <td>A2</td><td>B2</td><td>C2</td>
  </tr>
</table>

セルの結合(たて)

こんどはB1セルとB2セルを結合してみましょう。たてに結合するときにはrowspan属性です。さっきと同じように、B1セルのtdタグに対してrowspan="2"と結合するセルの個数を指定し、結合されるB2セルを削除します。

<table>
  <tr>
    <td>A1</td><td rowspan="2">B1</td><td>C1</td>
  </tr>
  <tr>
    <td>A2</td><!-- B2はなし --><td>C2</td>
  </tr>
</table>

まとめ

• 見出しセルは<td>〜</td>のかわりに<th>〜</th>にする
• <caption>〜</caption>に表題を書き、<table>のすぐ後ろに置く
• <td colspan="2">とすると、横に2ます分になる
• <td rowspan="2">とすると、たてに2ます分になる

Information