10月
5

テーブルの横のセル(列要素)を結合する。<td colspan=”">

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

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

<td>

colspan

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

<table>
<tr><td colspan="2">A</td><td>1</td></tr>
<tr><td>B</td><td>E</td><td>2</td></tr>
<tr><td colspan="2">C</td><td>3</td></tr>
</table>

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

縦のセル(行要素)を結合したい場合はrowspanという属性を使います

Leave a comment

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


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

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

人気の記事