10月
11

テーブルの縦のセル(行要素)を結合する。<td rowspan=”">

テーブルのセルは必ずしも縦と横のセルの数が揃っているわけではありません。
中には2行を結合してまとめた部分も存在するでしょう。
セルの行要素同士を結合する属性を学びましょう。

テーブルの2つのセル(行要素)を結合する

<td>

rowspan

テーブルの2つのセル(列要素)を結合する
テーブルは必ずしも縦横のセルの数が揃っているとは限りません。
グループをまとめたいときなどセルを結合したくなる場合もあります。
見だしセルの<th>や<td>の属性として使用します。
AC1
D2
B3
rowspan=”★”の属性を使って縦のセル★個分を結合することが出来ます。
セルを結合しても、縦と横の幅は統一されなければなりません。
必ず、結合したものとしていないものを併せて全ての列のセルの数が揃わなければなりません。
先ほどの表の各セルにセルの数を入れて見てみると。
211
21
11
全ての行を縦向きに合計すると3で同じになっています。
1列目=2+1=3
2列目=1+2=3
3列目=1+1+1=3
このように全ての列のセルの横の数は揃っていなければなりません。
rowspanを使うときは列全体のセルの数を頭に入れながら使うのがコツです。

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

縦向きのセルの数の合計が常に揃えることに注意しましょう。

横のセル(列要素)を結合したい場合はcolspanという属性を使います

1 Comment to “テーブルの縦のセル(行要素)を結合する。<td rowspan=”">”

Leave a comment

↓サーバーを借りるなら↓
サーバーについてはこちら


↓ドメインをとるなら↓
ドメインについてはこちら

↓ネットショップを始めるなら↓

人気の記事