セルの連結４マス

セルの連結４マス

ブラウザで表示した時の見え方

A	B	C
	D

ソースサンプル

<table border="1" cellpadding="3" cellspacing="1" summary="sample1">
<tr><td rowspan="2">A</td><td>B</td><td rowspan="2">C</td></tr>
<tr><td>D</td></tr>
</table>

解説

実際には内容がもっとあるため、こんな風に書くと見にくくなります。しかしここでは、構造をわかりやすくするために行ごとに記述しています。適当に改行してください。

ブラウザで表示した時の見え方

A	B	C
D

ソースサンプル

<table border="1" cellpadding="3" cellspacing="1" summary="sample2">
<tr><td>A</td><td rowspan="2">B</td><td rowspan="2">C</td></tr>
<tr><td>D</td></tr>
</table>

ブラウザで表示した時の見え方

A	B	C
		D

ソースサンプル

<table border="1" cellpadding="3" cellspacing="1" summary="sample3">
<tr><td rowspan="2">A</td><td rowspan="2">B</td><td>C</td></tr>
<tr><td>D</td></tr>
</table>

ブラウザで表示した時の見え方

A	B
	C
	D

ソースサンプル

<table border="1" cellpadding="3" cellspacing="1" summary="sample4">
<tr><td rowspan="3">A</td><td>B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</td></tr>
</table>

ブラウザで表示した時の見え方

A	B
C
D

ソースサンプル

<table border="1" cellpadding="3" cellspacing="1" summary="sample5">
<tr><td>A</td><td rowspan="3">B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</td></tr>
</table>

ブラウザで表示した時の見え方

A
B	C	D

ソースサンプル

<table border="1" cellpadding="3" cellspacing="1" summary="sample6">
<tr><td colspan="3">A</td></tr>
<tr><td>B</td><td>C</td><td>D</td></tr>
</table>

ブラウザで表示した時の見え方

A	B	C
D

ソースサンプル

<table border="1" cellpadding="3" cellspacing="1" summary="sample7">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td colspan="3">D</td></tr>
</table>

[ 黒※説明中のタグ紫※省略可能なタグ赤※変更可能緑※文章など ]

AICHAN WEB(Z) > HTML＆CSSサンプル集(S) > HTML - セルの連結４マス