tableのセルを連結する方法
私がよく忘れてしまうことをメモとして記載しておこうと思い掲載しています。
今回は、tableのセルの結合でどっちが横に結合でどっちが縦に結合だったかなと検索することが多く初歩的なことなので、私も覚えようという思いに至っていないため、どうせならブログにのせておこうと思いました。
tableのセルの結合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<table> <tr> <th></th><th>A</th><th>B</th> </tr> <tr> <td>a</td><td colspan=2>aAB</td></tr> <tr> <td>b</td><td rowspan=2>bcA</td><td>bB</td> </tr> <tr> <td>c</td><td>cB</td> </tr> </table> |
表示例が下記になります。
| A | B | |
|---|---|---|
| a | aAB | |
| b | bcA | bB |
| c | cB | |
セルの結合コード説明
colspanが横のセルの結合になります。
また、=2の数字の部分が横にいくつセルを結合するかという指示です。
rowspanが縦のセルの結合になります。
また、=2の数字の部分が縦にいくつセルを結合するかという指示です。
備考欄
上記の表示例はtableタグにcssでtext-alignとwidthの指定をしているので表が整っています。
使用する際は、ご自身で表を整えて使うようにしてください。
こういったコードはフワッと覚えている分、必要な時にどちらがどうだったかを忘れてしまいがちなことなので記載しています。しっかりと覚えておくというよりも、web制作では、フワッと覚えていて何度も検索して必要な時に調べる方が多いと思います。
そういった方にもその都度、見ていただいたらと思っています。
・・・自分用に書いているメモですが（笑）