HTML/CSSにおいて、『tableタグのセルを結合する方法』を紹介します。
- HTML/CSSでtableタグのセルを結合するしたい
目次
記載方法
では記載方法を紹介します。
パターン①：結合しない場合
特に属性を指定していないので、1つのタグに対し1つのセルができています。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
パターン②：横方向の結合『colspan』
結合したいタグに『colspan』属性を指定します。
『colspan=”2″』であれば2つのセル、『colspan=”3″』であれば3つのセルが結合されます。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
- 横方向のセルの結合ができています
パターン③：縦方向の結合『rowspan』
結合したいタグに『rowspan』属性を指定します。
『rowspan=”2″』であれば2つのセル、『rowspan=”3″』であれば3つのセルが結合されます。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
- 縦方向のセルの結合ができています
パターン④：縦横同時の結合『colspan』＋『rowspan』
結合したいタグに『colspan』属性と『rowspan』属性を同時に指定します。
『colspan=”2″』『rowspan=”2″』であれば縦横2×2＝4つのセルが結合されます。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
- 縦横同時のセルの結合ができています
本格的にHTML/CSSを学びたい方は
本格的にHTML/CSSを学びたい方は『TechAcademy(テックアカデミー)』がオススメです。
- 現役エンジニアによるマンツーマンサポート
- はじめての副業に必要なスキルが学べる
- 無料メンター相談が可能
「短期間で集中して学びたい」「本格的に仕事にしたい」と考えている方はまずは無料メンター相談から初めて見てはいかがでしょうか
↓気になる方は下記リンクを参照
まとめ
今回は、HTML/CSSにおいて、『tableタグのセルを結合する方法』を紹介させていただきました。
- 横方向の結合『colspan』
- 縦方向の結合『rowspan』
- 縦横同時の結合『colspan』＋『rowspan』
皆さまの参考になれば幸いです。
コメント