tableタグを書いていて、trタグを複数行を一括りにしたい

tableタグ

trタグ1行をひとつの列として見ていたスクリプトがあった。htmlのtableタグとしても、1行を1つのデータとしてみられるので、合理的だと思っていた。

trタグは1行で括られるとは限らない

しかし、以下の様な構造の時には、少し困ったことになる。

<table>
  <tr>
    <td rowspan="2">A</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

trタグが複数あるのに、それで1行になっている。これをセルの伸張というらしい。しかし、セルの伸張では、jQuery等で扱いづらい。

テーブルのグループ化

複数行をひとまとめに出来れば、扱いは簡単だ。しかし、tableの途中でdivタグで囲うことはできないしと思っていたら、テーブルをグループ化することができるようだった。

<table>
  <tbody>
    <tr>
      <td rowspan="2">A</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  <tbody>
</table>

なるほどね。全然知らなかった。

参考

• http://www.kanzaki.com/docs/html/htminfo16.html#S26
• http://www.htmq.com/html/tbody.shtml

2013/04/20 15:29