【HTML】

---

13. 表(table)を使って表現したい
td colspan、td rowspanを使ってみよう。

●普通の枠組み

このページで説明に使う基本のtableです。

<table border=1>
<tr><td>A1</td><td>A2</td><td>A3</td></tr>
<tr><td>B1</td><td>B2</td><td>B3</td></tr>
<tr><td>C1</td><td>C2</td><td>C3</td></tr>
</table>

A1	A2	A3
B1	B2	B3
C1	C2	C3

●colspan

td colspan=xは、x個分の<td></td>を取り入れて右に広がります。

<table border=1>
<tr><td>A1</td><td>A2</td><td>A3</td></tr>
<tr><td colspan=2>B1</td><td>B3</td></tr>
<tr><td colspan=3>C1</td></tr>
</table>

A1	A2	A3
B1		B3
C1

●rowspan

td rowspan=xは、x個分の<td></td>を取り入れて下に広がります。

<table border=1>
<tr><td>A1</td><td>A2</td><td rowspan=3>A3</td></tr>
<tr><td>B1</td><td rowspan=2>B2</td></tr>
<tr><td>C1</td></tr>
</table>

A1	A2	A3
B1	B2
C1

●colspan、rowspan

colspan、rowspanは同じtd内で使用できます。

例１）
<table border=1>
<tr><td>A1</td><td>A2</td><td>A3</td></tr>
<tr><td>B1</td><td colspan=2 rowspan=2>B2</td></tr>
<tr><td>C1</td></tr>
</table>

A1	A2	A3
B1	B2
C1

例２
<table border=1>
<tr><td colspan=2 rowspan=2>A1</td><td>A3</td></tr>
<tr><td>B3</td></tr>
<tr><td>C1</td><td>C2</td><td>C3</td></tr>
</table>

A1		A3
		B3
C1	C2	C3

●サンプル

参考になるようなtableを作ってみました。

<table border=1>
<tr><td>A1</td><td colspan=2>A2</td><td rowspan=3>A4</td></tr>
<tr><td rowspan=2>B1</td><td>B2</td><td>B3</td></tr>
<tr><td>C2</td><td>C3</td></tr>
<tr><td colspan=3>D1</td><td>D4</td></tr>
</table>

A1	A2		A4
B1	B2	B3
	C2	C3
D1			D4

◆複雑なtableを作ろう

colspanとrowspanを使いこなして複雑なtableを考えてみよう。

●解説

1 rA	1-cA
	2 r8	2-c8								2 rA
		3 r6	3-c6						3 r9
			4 r4	4-c4				4 r7
				5 r2	5-c2		5 r5
					6_	6 r3
				7-c2
			8-c3
		9-c5
	10-c7
11-c9

最初の数字は行数で、同行は同じ色です。
cはcolspan、rはrowspan
数は大きさを表します。（このページでは10をAで説明します）

例）3-r6 は「3行目のrowspan=6」