テーブルだけで画像を使わずに丸角を作ってみた。
[参考記事]スタイルシートで丸角
簡単に言うとテーブルを下のビットマップのように考えて丸角を作ろうという企画
|
||||||||||||||||||||||||||||||||
colspanを駆使してグリグリ丸角を作ってみたら…
[ソース]
 |
|
|
||||||
|
|
|
||||||
|
|
|
||||||
|
|
|
||||||
|
テストテーブル | |
||||||
|
|
|
||||||
|
|
|
||||||
|
|
|
||||||
|
|
|
||||||
|
||
 |
|
|
|
||
| 150ピクセル | ||
おぅ幅150ピクセルのはずがちょっとずれてる。
角だけを拡大して書き出すと…
[ソース]
| |
わかりにくいのでスペーサーに色を付けるとこんな感じ。 |
||||||||||||||||||||||||||||||||||||||||||||||||||
テーブルはもともと表を作るものなので、デザインとして使うときには問題が起こることがあるんです。
＞できない理由の説明
(1)テーブルを入れ子にする方法
[ソース]
| |
わかりやすくボーダーをつけた場合 |
(2)基準となる行を作る方法
[ソース]
| |
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
この方法で丸角を作るとちゃんとできます。
|
(1)テーブルを入れ子にする方法 [ソース]
| |
(2)基準となる行を作る方法 [ソース]
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
テーブルはボックス要素なので外枠にある区切りの行を減らすことができます。
それでもスタイルシートによる手法よりはるかに行数は多い。
[ソース]
|
||||||||||||||||||||||
|
||||||||||||||||||||||
|
||||||||||||||||||||||
rowspanも駆使
実は最初から分かってたんですけど、rowspanも駆使すると少ない行数で可能になります。
|
(1)拡大＆色付け [ソース]
| |
(2)拡大＆色付け [ソース]
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
△上に戻る
<table width="150" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr height="1">
<td width="5" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="5" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
<tr height="1">
<td width="3" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
<td width="144" colspan="3"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="3" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
</tr>
<tr height="1">
<td width="2" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="146" colspan="5"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="3" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
<tr height="2">
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="148" colspan="7"><img src="img/spacer.gif" width="148" height="1"></td>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
<tr>
<td colspan="4"><img src="img/spacer.gif" width="5"></td>
<td>テストテーブル</td>
<td colspan="4"><img src="img/spacer.gif" width="5"></td>
</tr>
<tr height="2">
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="148" colspan="7"><img src="img/spacer.gif" width="148" height="1"></td>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
<tr height="1">
<td width="2" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="146" colspan="5"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="3" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
<tr height="1">
<td width="3" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
<td width="144" colspan="3"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="3" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
</tr>
<tr height="1">
<td width="5" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="5" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
</table>
<tr height="1">
<td width="5" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="5" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
<tr height="1">
<td width="3" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
<td width="144" colspan="3"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="3" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
</tr>
<tr height="1">
<td width="2" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="146" colspan="5"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="3" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
<tr height="2">
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="148" colspan="7"><img src="img/spacer.gif" width="148" height="1"></td>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
<tr>
<td colspan="4"><img src="img/spacer.gif" width="5"></td>
<td>テストテーブル</td>
<td colspan="4"><img src="img/spacer.gif" width="5"></td>
</tr>
<tr height="2">
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="148" colspan="7"><img src="img/spacer.gif" width="148" height="1"></td>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
<tr height="1">
<td width="2" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="146" colspan="5"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="3" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
<tr height="1">
<td width="3" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
<td width="144" colspan="3"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="3" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
</tr>
<tr height="1">
<td width="5" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="5" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
</table>
△上に戻る
角だけを拡大
<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr height="10">
<td width="50" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="50" height="10"></td>
<td width="50"><img src="img/spacer.gif" width="50" height="10"></td>
</tr>
<tr height="10">
<td width="30" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="30" height="10"></td>
<td width="70" colspan="2"><img src="img/spacer.gif" width="70" height="10"></td>
</tr>
<tr height="10">
<td width="20" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="20" height="10"></td>
<td width="80" colspan="3"><img src="img/spacer.gif" width="80" height="10"></td>
</tr>
<tr height="20">
<td width="10" bgcolor="#ffffff"><img src="img/spacer.gif" width="10" height="20"></td>
<td width="90" colspan="4"><img src="img/spacer.gif" width="90" height="10"></td>
</tr>
<tr>
<td colspan="4" width="50"><img src="img/spacer.gif" width="50"></td>
<td width="50">テスト</td>
</tr>
</table>
<tr height="10">
<td width="50" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="50" height="10"></td>
<td width="50"><img src="img/spacer.gif" width="50" height="10"></td>
</tr>
<tr height="10">
<td width="30" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="30" height="10"></td>
<td width="70" colspan="2"><img src="img/spacer.gif" width="70" height="10"></td>
</tr>
<tr height="10">
<td width="20" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="20" height="10"></td>
<td width="80" colspan="3"><img src="img/spacer.gif" width="80" height="10"></td>
</tr>
<tr height="20">
<td width="10" bgcolor="#ffffff"><img src="img/spacer.gif" width="10" height="20"></td>
<td width="90" colspan="4"><img src="img/spacer.gif" width="90" height="10"></td>
</tr>
<tr>
<td colspan="4" width="50"><img src="img/spacer.gif" width="50"></td>
<td width="50">テスト</td>
</tr>
</table>
△上に戻る
テーブルを入れ子にする方法
<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr height="10">
<td>
<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr height="10">
<td width="50" bgcolor="#ffffff"><img src="img/spacer.gif" width="50" height="10"></td>
<td width="50"><img src="img/spacer.gif" width="50" height="10"></td>
</tr>
</table>
</td>
</tr>
<tr height="10">
<td>
<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr height="10">
<td width="30" bgcolor="#ffffff"><img src="img/spacer.gif" width="30" height="10"></td>
<td width="70"><img src="img/spacer.gif" width="70" height="10"></td>
</tr>
</table>
</td>
</tr>
<tr height="10">
<td>
<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr height="10">
<td width="20" bgcolor="#ffffff"><img src="img/spacer.gif" width="20" height="10"></td>
<td width="80"><img src="img/spacer.gif" width="80" height="10"></td>
</tr>
</table>
</td>
</tr>
<tr height="20">
<td>
<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr height="20">
<td width="10" bgcolor="#ffffff"><img src="img/spacer.gif" width="10" height="20"></td>
<td width="90"><img src="img/spacer.gif" width="90" height="20"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="50"><img src="img/spacer.gif" width="50" height="1"></td>
<td width="50">テスト</td>
</tr>
</table>
</td>
</tr>
</table>
<tr height="10">
<td>
<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr height="10">
<td width="50" bgcolor="#ffffff"><img src="img/spacer.gif" width="50" height="10"></td>
<td width="50"><img src="img/spacer.gif" width="50" height="10"></td>
</tr>
</table>
</td>
</tr>
<tr height="10">
<td>
<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr height="10">
<td width="30" bgcolor="#ffffff"><img src="img/spacer.gif" width="30" height="10"></td>
<td width="70"><img src="img/spacer.gif" width="70" height="10"></td>
</tr>
</table>
</td>
</tr>
<tr height="10">
<td>
<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr height="10">
<td width="20" bgcolor="#ffffff"><img src="img/spacer.gif" width="20" height="10"></td>
<td width="80"><img src="img/spacer.gif" width="80" height="10"></td>
</tr>
</table>
</td>
</tr>
<tr height="20">
<td>
<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr height="20">
<td width="10" bgcolor="#ffffff"><img src="img/spacer.gif" width="10" height="20"></td>
<td width="90"><img src="img/spacer.gif" width="90" height="20"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="50"><img src="img/spacer.gif" width="50" height="1"></td>
<td width="50">テスト</td>
</tr>
</table>
</td>
</tr>
</table>
△上に戻る
基準となる行を作る方法
<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr height="10">
<td width="50" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="50" height="10"></td>
<td width="50"><img src="img/spacer.gif" width="50" height="10"></td>
</tr>
<tr height="10">
<td width="30" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="30" height="10"></td>
<td width="70" colspan="2"><img src="img/spacer.gif" width="70" height="10"></td>
</tr>
<tr height="10">
<td width="20" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="20" height="10"></td>
<td width="80" colspan="3"><img src="img/spacer.gif" width="80" height="10"></td>
</tr>
<tr height="20">
<td width="10" bgcolor="#ffffff"><img src="img/spacer.gif" width="10" height="20"></td>
<td width="90" colspan="4"><img src="img/spacer.gif" width="90" height="10"></td>
</tr>
<tr height="1">
<td width="10"><img src="img/spacer.gif" width="10" height="1"></td>
<td width="10"><img src="img/spacer.gif" width="10" height="1"></td>
<td width="10"><img src="img/spacer.gif" width="10" height="1"></td>
<td width="20"><img src="img/spacer.gif" width="20" height="1"></td>
</tr>
<tr>
<td colspan="4" width="50"><img src="img/spacer.gif" width="50"></td>
<td width="50">テスト</td>
</tr>
</table>
<tr height="10">
<td width="50" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="50" height="10"></td>
<td width="50"><img src="img/spacer.gif" width="50" height="10"></td>
</tr>
<tr height="10">
<td width="30" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="30" height="10"></td>
<td width="70" colspan="2"><img src="img/spacer.gif" width="70" height="10"></td>
</tr>
<tr height="10">
<td width="20" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="20" height="10"></td>
<td width="80" colspan="3"><img src="img/spacer.gif" width="80" height="10"></td>
</tr>
<tr height="20">
<td width="10" bgcolor="#ffffff"><img src="img/spacer.gif" width="10" height="20"></td>
<td width="90" colspan="4"><img src="img/spacer.gif" width="90" height="10"></td>
</tr>
<tr height="1">
<td width="10"><img src="img/spacer.gif" width="10" height="1"></td>
<td width="10"><img src="img/spacer.gif" width="10" height="1"></td>
<td width="10"><img src="img/spacer.gif" width="10" height="1"></td>
<td width="20"><img src="img/spacer.gif" width="20" height="1"></td>
</tr>
<tr>
<td colspan="4" width="50"><img src="img/spacer.gif" width="50"></td>
<td width="50">テスト</td>
</tr>
</table>
△上に戻る
テーブルを入れ子にする方法
<table width="150" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr height="1">
<td>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="5" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="5" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr height="1">
<td>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
<td width="144"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr height="1">
<td>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="146" colspan="5"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr height="2">
<td>
<table width="150" height="2" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="148" colspan="7"><img src="img/spacer.gif" width="148" height="1"></td>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="150" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td><img src="img/spacer.gif" width="5"></td>
<td>テストテーブル</td>
<td><img src="img/spacer.gif" width="5"></td>
</tr>
</table>
</td>
</tr>
<tr height="2">
<td>
<table width="150" height="2" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="148"><img src="img/spacer.gif" width="148" height="1"></td>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
</table>
</td>
</tr>
<tr height="1">
<td>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="146"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr height="1">
<td>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
<td width="144"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr height="1">
<td>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="5" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="5" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
</table>
</td>
</tr>
</table>
<tr height="1">
<td>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="5" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="5" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr height="1">
<td>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
<td width="144"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr height="1">
<td>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="146" colspan="5"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr height="2">
<td>
<table width="150" height="2" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="148" colspan="7"><img src="img/spacer.gif" width="148" height="1"></td>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="150" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td><img src="img/spacer.gif" width="5"></td>
<td>テストテーブル</td>
<td><img src="img/spacer.gif" width="5"></td>
</tr>
</table>
</td>
</tr>
<tr height="2">
<td>
<table width="150" height="2" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="148"><img src="img/spacer.gif" width="148" height="1"></td>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
</table>
</td>
</tr>
<tr height="1">
<td>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="146"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr height="1">
<td>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
<td width="144"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr height="1">
<td>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="5" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="5" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
</table>
</td>
</tr>
</table>
△上に戻る
基準となる行を作る方法
<table width="150" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr height="1">
<td width="5" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="5" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
<tr height="1">
<td width="3" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
<td width="144" colspan="3"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="3" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
</tr>
<tr height="1">
<td width="2" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="146" colspan="5"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="3" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
<tr height="2">
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="148" colspan="7"><img src="img/spacer.gif" width="148" height="1"></td>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
<tr>
<td colspan="4"><img src="img/spacer.gif" width="5"></td>
<td>テストテーブル</td>
<td colspan="4"><img src="img/spacer.gif" width="5"></td>
</tr>
<tr height="1">
<td width="1"><img src="img/spacer.gif" width="1" height="1"></td>
<td width="1"><img src="img/spacer.gif" width="1" height="1"></td>
<td width="1"><img src="img/spacer.gif" width="1" height="1"></td>
<td width="2"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="2"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="1"><img src="img/spacer.gif" width="1" height="1"></td>
<td width="1"><img src="img/spacer.gif" width="1" height="1"></td>
<td width="1"><img src="img/spacer.gif" width="1" height="1"></td>
</tr>
<tr height="2">
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="148" colspan="7"><img src="img/spacer.gif" width="148" height="1"></td>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
<tr height="1">
<td width="2" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="146" colspan="5"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="3" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
<tr height="1">
<td width="3" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
<td width="144" colspan="3"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="3" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
</tr>
<tr height="1">
<td width="5" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="5" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
</table>
<tr height="1">
<td width="5" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="5" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
<tr height="1">
<td width="3" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
<td width="144" colspan="3"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="3" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
</tr>
<tr height="1">
<td width="2" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="146" colspan="5"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="3" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
<tr height="2">
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="148" colspan="7"><img src="img/spacer.gif" width="148" height="1"></td>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
<tr>
<td colspan="4"><img src="img/spacer.gif" width="5"></td>
<td>テストテーブル</td>
<td colspan="4"><img src="img/spacer.gif" width="5"></td>
</tr>
<tr height="1">
<td width="1"><img src="img/spacer.gif" width="1" height="1"></td>
<td width="1"><img src="img/spacer.gif" width="1" height="1"></td>
<td width="1"><img src="img/spacer.gif" width="1" height="1"></td>
<td width="2"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="2"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="1"><img src="img/spacer.gif" width="1" height="1"></td>
<td width="1"><img src="img/spacer.gif" width="1" height="1"></td>
<td width="1"><img src="img/spacer.gif" width="1" height="1"></td>
</tr>
<tr height="2">
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="148" colspan="7"><img src="img/spacer.gif" width="148" height="1"></td>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
<tr height="1">
<td width="2" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="146" colspan="5"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="3" colspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
<tr height="1">
<td width="3" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
<td width="144" colspan="3"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="3" colspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
</tr>
<tr height="1">
<td width="5" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="5" colspan="4" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
</table>
△上に戻る
区切りの行を減らす
<table width="150" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr height="5">
<td>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="5" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="5" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
</table>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
<td width="144"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
</tr>
</table>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="146" colspan="5"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
</table>
<table width="150" height="2" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="148" colspan="7"><img src="img/spacer.gif" width="148" height="1"></td>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="150" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td><img src="img/spacer.gif" width="5"></td>
<td>テストテーブル</td>
<td><img src="img/spacer.gif" width="5"></td>
</tr>
</table>
</td>
</tr>
<tr height="5">
<td>
<table width="150" height="2" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="148"><img src="img/spacer.gif" width="148" height="1"></td>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
</table>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="146"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
</table>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
<td width="144"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
</tr>
</table>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="5" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="5" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
</table>
</td>
</tr>
</table>
<tr height="5">
<td>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="5" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="5" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
</table>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
<td width="144"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
</tr>
</table>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="146" colspan="5"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
</table>
<table width="150" height="2" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="148" colspan="7"><img src="img/spacer.gif" width="148" height="1"></td>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="150" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td><img src="img/spacer.gif" width="5"></td>
<td>テストテーブル</td>
<td><img src="img/spacer.gif" width="5"></td>
</tr>
</table>
</td>
</tr>
<tr height="5">
<td>
<table width="150" height="2" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="148"><img src="img/spacer.gif" width="148" height="1"></td>
<td width="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
</table>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="146"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
</table>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
<td width="144"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="3" height="1"></td>
</tr>
</table>
<table width="150" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="5" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="5" bgcolor="#ffffff"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
</table>
</td>
</tr>
</table>
△上に戻る
rowspanも駆使
<table width="150" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="1" height="5" rowspan="4" bgcolor="#ffffff"><img src="img/spacer.gif.gif" width="1" height="5"></td>
<td width="1" height="3" rowspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="3"></td>
<td width="1" height="2" rowspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="2" height="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="2" height="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="1" height="2" rowspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="1" height="3" rowspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="3"></td>
<td width="1" height="5" rowspan="4" bgcolor="#ffffff"><img src="img/spacer.gif.gif" width="1" height="5"></td>
</tr>
<tr>
<td width="144" height="1" colspan="3"><img src="img/spacer.gif" width="144" height="1"></td>
</tr>
<tr>
<td width="146" height="1" colspan="5"><img src="img/spacer.gif" width="146" height="1"></td>
</tr>
<tr>
<td width="148" height="2" colspan="7"><img src="img/spacer.gif" width="148" height="2"></td>
</tr>
<tr>
<td colspan="4"><img src="img/spacer.gif" width="5" height="1"></td>
<td>テストテーブル</td>
<td colspan="4"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
<tr>
<td width="1" height="5" rowspan="4" bgcolor="#ffffff"><img src="img/spacer.gif.gif" width="1" height="5"></td>
<td width="148" height="2" colspan="7"><img src="img/spacer.gif" width="148" height="2"></td>
<td width="1" height="5" rowspan="4" bgcolor="#ffffff"><img src="img/spacer.gif.gif" width="1" height="5"></td>
</tr>
<tr>
<td width="1" height="3" rowspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="3"></td>
<td width="146" height="1" colspan="5"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="1" height="3" rowspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="3"></td>
</tr>
<tr>
<td width="1" height="2" rowspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="144" height="1" colspan="3"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="1" height="2" rowspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
<tr>
<td width="2" height="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="140" height="1"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="2" height="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
</table>
<tr>
<td width="1" height="5" rowspan="4" bgcolor="#ffffff"><img src="img/spacer.gif.gif" width="1" height="5"></td>
<td width="1" height="3" rowspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="3"></td>
<td width="1" height="2" rowspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="2" height="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="140"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="2" height="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="1" height="2" rowspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="1" height="3" rowspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="3"></td>
<td width="1" height="5" rowspan="4" bgcolor="#ffffff"><img src="img/spacer.gif.gif" width="1" height="5"></td>
</tr>
<tr>
<td width="144" height="1" colspan="3"><img src="img/spacer.gif" width="144" height="1"></td>
</tr>
<tr>
<td width="146" height="1" colspan="5"><img src="img/spacer.gif" width="146" height="1"></td>
</tr>
<tr>
<td width="148" height="2" colspan="7"><img src="img/spacer.gif" width="148" height="2"></td>
</tr>
<tr>
<td colspan="4"><img src="img/spacer.gif" width="5" height="1"></td>
<td>テストテーブル</td>
<td colspan="4"><img src="img/spacer.gif" width="5" height="1"></td>
</tr>
<tr>
<td width="1" height="5" rowspan="4" bgcolor="#ffffff"><img src="img/spacer.gif.gif" width="1" height="5"></td>
<td width="148" height="2" colspan="7"><img src="img/spacer.gif" width="148" height="2"></td>
<td width="1" height="5" rowspan="4" bgcolor="#ffffff"><img src="img/spacer.gif.gif" width="1" height="5"></td>
</tr>
<tr>
<td width="1" height="3" rowspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="3"></td>
<td width="146" height="1" colspan="5"><img src="img/spacer.gif" width="146" height="1"></td>
<td width="1" height="3" rowspan="3" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="3"></td>
</tr>
<tr>
<td width="1" height="2" rowspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
<td width="144" height="1" colspan="3"><img src="img/spacer.gif" width="144" height="1"></td>
<td width="1" height="2" rowspan="2" bgcolor="#ffffff"><img src="img/spacer.gif" width="1" height="2"></td>
</tr>
<tr>
<td width="2" height="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
<td width="140" height="1"><img src="img/spacer.gif" width="140" height="1"></td>
<td width="2" height="1" bgcolor="#ffffff"><img src="img/spacer.gif" width="2" height="1"></td>
</tr>
</table>
△上に戻る
rowspanも駆使(拡大＆色付け)
<table width="150" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="10" height="50" rowspan="4" bgcolor="#ffffff"><img src="img/px_red.gif" width="10" height="50"></td>
<td width="10" height="30" rowspan="3" bgcolor="#ffffff"><img src="img/px_blue.gif" width="10" height="30"></td>
<td width="10" height="20" rowspan="2" bgcolor="#ffffff"><img src="img/px_green.gif" width="10" height="20"></td>
<td width="20" height="10" bgcolor="#ffffff"><img src="img/px_yerrow2.gif" width="20" height="10"></td>
<td width="50"><img src="img/px_black.gif" width="50" height="10"></td>
<td width="20" height="10" bgcolor="#ffffff"><img src="img/px_yerrow2.gif" width="20" height="10"></td>
<td width="10" height="20" rowspan="2" bgcolor="#ffffff"><img src="img/px_green.gif" width="10" height="20"></td>
<td width="10" height="30" rowspan="3" bgcolor="#ffffff"><img src="img/px_blue.gif" width="10" height="30"></td>
<td width="10" height="50" rowspan="4" bgcolor="#ffffff"><img src="img/px_red.gif" width="10" height="50"></td>
</tr>
<tr>
<td width="90" height="10" colspan="3"><img src="img/px_gray.gif" width="90" height="10"></td>
</tr>
<tr>
<td width="110" height="10" colspan="5"><img src="img/px_black.gif" width="110" height="10"></td>
</tr>
<tr>
<td width="130" height="20" colspan="7"><img src="img/px_gray.gif" width="130" height="20"></td>
</tr>
<tr>
<td colspan="4" bgcolor="#000000"><img src="img/px_black.gif" width="50" height="1"></td>
<td>テストテーブル</td>
<td colspan="4" bgcolor="#000000"><img src="img/px_black.gif" width="50" height="1"></td>
</tr>
<tr>
<td width="10" height="50" rowspan="4" bgcolor="#ffffff"><img src="img/px_red.gif" width="10" height="50"></td>
<td width="130" height="20" colspan="7"><img src="img/px_gray.gif" width="130" height="20"></td>
<td width="10" height="50" rowspan="4" bgcolor="#ffffff"><img src="img/px_red.gif" width="10" height="50"></td>
</tr>
<tr>
<td width="10" height="30" rowspan="3" bgcolor="#ffffff"><img src="img/px_blue.gif" width="10" height="30"></td>
<td width="110" height="10" colspan="5"><img src="img/px_black.gif" width="110" height="10"></td>
<td width="10" height="30" rowspan="3" bgcolor="#ffffff"><img src="img/px_blue.gif" width="10" height="30"></td>
</tr>
<tr>
<td width="10" height="20" rowspan="2" bgcolor="#ffffff"><img src="img/px_green.gif" width="10" height="20"></td>
<td width="90" height="10" colspan="3"><img src="img/px_gray.gif" width="90" height="10"></td>
<td width="10" height="20" rowspan="2" bgcolor="#ffffff"><img src="img/px_green.gif" width="10" height="20"></td>
</tr>
<tr>
<td width="20" height="10" bgcolor="#ffffff"><img src="img/px_yerrow2.gif" width="20" height="10"></td>
<td width="50" height="10"><img src="img/px_black.gif" width="50" height="10"></td>
<td width="20" height="10" bgcolor="#ffffff"><img src="img/px_yerrow2.gif" width="20" height="10"></td>
</tr>
</table>
<tr>
<td width="10" height="50" rowspan="4" bgcolor="#ffffff"><img src="img/px_red.gif" width="10" height="50"></td>
<td width="10" height="30" rowspan="3" bgcolor="#ffffff"><img src="img/px_blue.gif" width="10" height="30"></td>
<td width="10" height="20" rowspan="2" bgcolor="#ffffff"><img src="img/px_green.gif" width="10" height="20"></td>
<td width="20" height="10" bgcolor="#ffffff"><img src="img/px_yerrow2.gif" width="20" height="10"></td>
<td width="50"><img src="img/px_black.gif" width="50" height="10"></td>
<td width="20" height="10" bgcolor="#ffffff"><img src="img/px_yerrow2.gif" width="20" height="10"></td>
<td width="10" height="20" rowspan="2" bgcolor="#ffffff"><img src="img/px_green.gif" width="10" height="20"></td>
<td width="10" height="30" rowspan="3" bgcolor="#ffffff"><img src="img/px_blue.gif" width="10" height="30"></td>
<td width="10" height="50" rowspan="4" bgcolor="#ffffff"><img src="img/px_red.gif" width="10" height="50"></td>
</tr>
<tr>
<td width="90" height="10" colspan="3"><img src="img/px_gray.gif" width="90" height="10"></td>
</tr>
<tr>
<td width="110" height="10" colspan="5"><img src="img/px_black.gif" width="110" height="10"></td>
</tr>
<tr>
<td width="130" height="20" colspan="7"><img src="img/px_gray.gif" width="130" height="20"></td>
</tr>
<tr>
<td colspan="4" bgcolor="#000000"><img src="img/px_black.gif" width="50" height="1"></td>
<td>テストテーブル</td>
<td colspan="4" bgcolor="#000000"><img src="img/px_black.gif" width="50" height="1"></td>
</tr>
<tr>
<td width="10" height="50" rowspan="4" bgcolor="#ffffff"><img src="img/px_red.gif" width="10" height="50"></td>
<td width="130" height="20" colspan="7"><img src="img/px_gray.gif" width="130" height="20"></td>
<td width="10" height="50" rowspan="4" bgcolor="#ffffff"><img src="img/px_red.gif" width="10" height="50"></td>
</tr>
<tr>
<td width="10" height="30" rowspan="3" bgcolor="#ffffff"><img src="img/px_blue.gif" width="10" height="30"></td>
<td width="110" height="10" colspan="5"><img src="img/px_black.gif" width="110" height="10"></td>
<td width="10" height="30" rowspan="3" bgcolor="#ffffff"><img src="img/px_blue.gif" width="10" height="30"></td>
</tr>
<tr>
<td width="10" height="20" rowspan="2" bgcolor="#ffffff"><img src="img/px_green.gif" width="10" height="20"></td>
<td width="90" height="10" colspan="3"><img src="img/px_gray.gif" width="90" height="10"></td>
<td width="10" height="20" rowspan="2" bgcolor="#ffffff"><img src="img/px_green.gif" width="10" height="20"></td>
</tr>
<tr>
<td width="20" height="10" bgcolor="#ffffff"><img src="img/px_yerrow2.gif" width="20" height="10"></td>
<td width="50" height="10"><img src="img/px_black.gif" width="50" height="10"></td>
<td width="20" height="10" bgcolor="#ffffff"><img src="img/px_yerrow2.gif" width="20" height="10"></td>
</tr>
</table>
