今回は前回に引き続きテーブルについてです。
今回はテーブルの結合ができるrowspanとcolspanについて解説していきたいと思います。
それではいってみましょう！
Menu
rowspan(行の結合)
テーブルの行を結合します。
rowspan構文
rowspan=”行数指定”
※初期値は１
rowspanサンプル
【前に結合】
1 2 3 4 5 6 7 8 9 10 11 12 | <table border="2"> <tr> <td rowspan="3">縦(行)の結合</td> <td>データ1</td> </tr> <tr> <td>データ2</td> </tr> <tr> <td>データ3</td> </tr> </table> |
【後にを結合】
1 2 3 4 5 6 7 8 9 10 11 12 | <table border="2"> <tr> <td>データ1</td> <td rowspan="3">縦(行)の結合</td> </tr> <tr> <td>データ2</td> </tr> <tr> <td>データ3</td> </tr> </table> |
rowspan応用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <table border="2"> <tr> <td rowspan="4">牛丼</td> <td>サイズ</td> <td align="center">価格</td> </tr> <tr> <td>並盛</td> <td>352円(税込 387円)</td> </tr> <tr> <td>大盛</td> <td>522円(税込 574円)</td> </tr> <tr> <td>特盛</td> <td>642円(税込 706円)</td> </tr> </table> |
colspan(列の結合)
テーブルの列を結合します。
colspan構文
colspan=”列数指定”
※初期値は１
colspanサンプル
1 2 3 4 5 6 7 8 9 10 | <table border="1"> <tr> <td colspan="3">横(列)の結合</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> </tr> </table> |
colspan応用
1 2 3 4 5 6 7 8 9 10 11 12 | <table border="1"> <tr> <td colspan="5" style="text-align: center;">メニュー</td> </tr> <tr> <td>牛丼</td> <td>豚丼</td> <td>カツ丼</td> <td>親子丼</td> <td>鉄火丼</td> </tr> </table> |
まとめ
テーブルの結合は簡単ですね！
以上です。
