<table>で任意の行だけをセルを増やす方法

By | 2016/05/01

セルを繋げたりできる便利なコード

以前、記事で<table>で任意の行だけをセルを増やす方法を紹介させていただきました。あれは特定のセルにflaotをかけて、セルを調整していくものでした。自分で紹介しておきながらですが、あれはとっても手間が多くて、実用的では無かったと反省しています。
実はHTMLにはセルを縦に繋げたり、横に繋げたりすることができる方法があったのです。今回はその方法を紹介させていただきます。

colspan=””、rowspan=”” を追加すると、セルを結合できる

属性 説明
colspan=”” 結合するセルの数 水平方向の結合を指定 (初期値は 1
rowspan=”” 結合するセルの数 垂直方向の結合を指定 (初期値は 1

以下、いくつか使用例を書いていきます。

パターン1
★colspan(水平方向の結合)を指定した例

<table border="3">
  <tr>
    <th colspan="3">パターン1</th>
  </tr>
  <tr>
    <td colspan="3">水平方向の結合</td>
  </tr>
  <tr>
    <td>データセル1</td>
    <td>データセル2</td>
    <td>データセル3</td>
  </tr>
</table>
パターン1
水平方向の結合
データセル1 データセル2 データセル3

パターン2
★rowspan(垂直方向の結合)を指定した例

<table border="3">
  <tr>
    <th colspan="3">パターン2</th>
  </tr>
  <tr>
    <td rowspan="3">垂直方向の結合</td>
    <td>データセル1</td>
  </tr>
  <tr>
    <td>データセル2</td>
  </tr>
  <tr>
    <td>データセル3</td>
  </tr>
</table>
パターン2
垂直方向の結合 データセル1
データセル2
データセル3

このような感じでセルを好きなように繋げたりすることで、思い通りのデザインを再現することができると思います。
もちろんcolspan=””、rowspan=”” を上手く組み合わせたりすることでより複雑な表を作ることができます。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です