HTMLテンプレートの活用術４

HTMLテンプレートの活用術１ | 活用術２ | 活用術３ | 活用術４ | 活用術５ | 活用術６ |

活用術１のページから【３】のタグだけを抜いてきす。
【２】のタグはスペースを作るためのからのＢＯＸです。

【３】

<table width="80%" border="0" cellspacing="6" cellpadding="0" align="center">
<tr valign="top">
<td width="50%">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="80">

★★★ ここにアフィリエイト用の画像のソースを入れる ★★★

</td>
<td width="8">
<table width="8" border="0" cellspacing="0" cellpadding="0"><tr><td></td></tr></table>
</td>
<td width="100%"><font size="-1">

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>

</font></td>
</tr>
</table>

</td>
<td width="50%">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="80">

★★★ ここにアフィリエイト用の画像のソースを入れる ★★★

</td>
<td width="8">
<table width="8" border="0" cellspacing="0" cellpadding="0"><tr><td></td></tr></table>
</td>
<td width="100%"><font size="-1">

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>

</font></td>
</tr>
</table>

</td>
</tr>
</table>

【３】のタグを書き出すと↓のような表示になります。

★★★ ここにアフィリエイト用の画像のソースを入れる ★★★

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
★★★ ここに紹介文を入れる ★★★

★★★ ここにアフィリエイト用の画像のソースを入れる ★★★

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
★★★ ここに紹介文を入れる ★★★

これだと構造が判らないので前と同じく「border="0"」の箇所を「border="1"」にしてみましょう。

★★★ ここにアフィリエイト用の画像のソースを入れる ★★★

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
★★★ ここに紹介文を入れる ★★★

★★★ ここにアフィリエイト用の画像のソースを入れる ★★★

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
★★★ ここに紹介文を入れる ★★★

これもまたテーブルの中にテーブルの指定のようです。

解説を交えつつテーブルごとに色分けをしてみます。

<table width="80%" border="0" cellspacing="6" cellpadding="0" align="center">
<tr valign="top">
<td width="50%">


<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="80">

★★★ ここにアフィリエイト用の画像のソースを入れる ★★★

</td>
<td width="8">


<table width="8" border="0" cellspacing="0" cellpadding="0"><tr><td></td></tr></table>

</td>
<td width="100%"><font size="-1">

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>

</font></td>
</tr>
</table>


</td>
<td width="50%">


<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="80">

★★★ ここにアフィリエイト用の画像のソースを入れる ★★★

</td>
<td width="8">

<table width="8" border="0" cellspacing="0" cellpadding="0"><tr><td></td></tr></table>
</td>
<td width="100%"><font size="-1">

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>

</font></td>
</tr>
</table>


</td>
</tr>
</table>

どうやら大きく分けて３つのテーブルで構成されているようです。
２つ目と３つ目のテーブルは同じ指定であるのがおわかりいただけますでしょうか？
活用術３では外側のケイの指定をやったので活用術５では２つ目のテーブルの部分を使ってテーブルを変えてみましょう。