お取り寄せいいもの見つけたよ！

テーブル（表）　の重ね合わせをうまく使いましょう

テーブルのセル内にテーブルを配置することができます。
縦方向や横方向にセルの連結をすると複雑になり編集し難くなります。


１　１行毎にテーブルを組み合わせる

　　複数行１列のテーブルを使いセル内にテーブルを配置します。
　　セル内は複数列のテーブルを配置します。
　　１行毎に作るため編集が簡単になります。
　　セル幅は　配置するテーブル幅で調整します。




２　１列毎にテーブルを組み合わせる

　　１行複数列のテーブルを使いセル内にテーブルを配置します。
　　セル内は複数行のテーブルを配置します。
　　１列毎に作るため編集が簡単になります。
　　列高さは　配置するテーブル高さで調整します。

１　１行毎にテーブルを組み合わせる例

テーブルを重ね合わせて配置した例　１




テーブル構成　（　テーブル毎に背景色をつけています　）
テーブルを４個使います
外側のテーブル　３行１列のテーブル　
１行目のセル
　１行５列のテーブル　セル内縦方向のデータ表示位置を指定（上　および　下）
２行目のセル
　１行３列のテーブル　
３行目のセル
　１行５列のテーブル　セル内縦方向のデータ表示位置を指定（上　中央　および　下）




ＨＴＭＬタグ
外側のテーブルは　 赤色
紫色 　はセル内　 横方向 　および　 縦方向 　のデータ（画像）表示位置
緑色 　は使う画像アドレスに変更してください

<table border="0" width="560" height="540" cellspacing="0" cellpadding="0" align="center">
<tr><td height="210" align="center">
<table border="0" width="550" height="210" cellspacing="0" cellpadding="0">
<tr><td width="110" align="center" valign="top" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/222.jpg">
</td>
<td width="110" align="center" valign="bottom" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/202.jpg">
</td>
<td width="110" align="center" valign="top" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/210.jpg">
</td>
<td width="110" align="center" valign="bottom" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/211.jpg">
</td>
<td width="110" align="center" valign="top" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/212.jpg">
</td></tr></table>
</td></tr><tr><td height="110" align="center">
<table border="0" width="550" cellspacing="0" cellpadding="0">
<tr><td width="110" align="center" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/212.jpg">
</td>
<td width="330" align="center" bgcolor="#e6e6fa">表示するテキスト
</td>
<td width="110" align="center" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/210.jpg">
</td></tr></table>
</td></tr><tr><td height="210" align="center">
<table border="0" width="550" height="210" cellspacing="0" cellpadding="0">
<tr><td width="110" align="center" valign="bottom" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/213.jpg">
</td>
<td width="110" align="center" valign="middle" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/214.jpg">
</td>
<td width="110" align="center" valign="top" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/215.jpg">
</td>
<td width="110" align="center" valign="middle" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/216.jpg">
</td>
<td width="110" align="center" valign="bottom" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/217.jpg">
</td></tr></table>
</td></tr></table>



テーブルを重ね合わせて配置した例　２




テーブル構成　（　テーブル毎に背景色をつけています　）
テーブルを４個使います
外側のテーブル　３行１列のテーブル　
１行目のセル
　１行３列のテーブル　セル内縦方向のデータ表示位置を指定（上　および　下）
２行目のセル
　１行３列のテーブル　
３行目のセル
　１行３列のテーブル　セル内縦方向のデータ表示位置を指定（上　および　下）




ＨＴＭＬタグ
外側のテーブルは　 赤色
紫色 　はセル内　 横方向 　および　 縦方向 　のデータ（画像）表示位置
緑色 　は使う画像アドレスに変更してください


<table border="0" width="560" height="540" cellspacing="0" cellpadding="0" align="center">
<tr><td height="210" align="center">
<table border="0" width="330" height="210" cellspacing="0" cellpadding="0">
<tr><td width="110" align="center" valign="bottom" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/222.jpg">
</td>
<td width="110" align="center" valign="top" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/202.jpg">
</td>
<td width="110" align="center" valign="bottom" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/211.jpg">
</td></tr></table>
</td></tr><tr><td height="110" align="center">
<table border="0" width="550" cellspacing="0" cellpadding="0">
<tr>
<td width="110" align="center" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/212.jpg">
</td>
<td width="330" align="center" bgcolor="#e6e6fa">表示するテキスト
</td>
<td width="110" align="center" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/210.jpg">
</td></tr></table>
</td></tr><tr><td height="210" align="center">
<table border="0" width="330" height="210" cellspacing="0" cellpadding="0">
<tr>
<td width="110" align="center" valign="top" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/213.jpg">
</td>
<td width="110" align="center" valign="bottom" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/215.jpg">
</td>
<td width="110" align="center" valign="top" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/217.jpg">
</td></tr></table>
</td></tr></table>



テーブルを重ね合わせて配置した例　３





テーブル構成　（　テーブル毎に背景色をつけています　）
テーブルを６個使います
外側のテーブル　５行１列のテーブル
１行目のセル
　１行２列のテーブル　セル内横方向のデータ表示位置を指定（左　および　右）
２行目のセル
　１行２列のテーブル　セル内横方向のデータ表示位置を指定（左　および　右）
３行目のセル　　１行３列のテーブル
４行目のセル
　１行２列のテーブル　セル内横方向のデータ表示位置を指定（左　および　右）
５行目のセル
　１行２列のテーブル　セル内横方向のデータ表示位置を指定（左　および　右）




ＨＴＭＬタグ
外側のテーブルは　 赤色
紫色 　はセル内　 横方向 　のデータ（画像）表示位置
緑色 　は使う画像アドレスに変更してください

<table border="0" bordercolor="blue" width="560" height="560" cellspacing="0" cellpadding="0" align="center">
<tr><td height="110" align="center">
<table border="0" width="220" cellspacing="0" cellpadding="0">
<tr>
<td width="110" align="left" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/222.jpg">
</td>
<td width="110" align="right" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/202.jpg">
</td></tr></table>
</td></tr><tr><td height="110" align="center">
<table border="0" width="360" cellspacing="0" cellpadding="0">
<tr>
<td width="180" align="left" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/210.jpg">
</td>
<td width="180" align="right" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/211.jpg">
</td></tr></table>
</td></tr><tr><td height="110" align="center">
<table border="0" width="500" cellspacing="0" cellpadding="0">
<tr>
<td width="100" align="center" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/212.jpg">
</td>
<td width="300" align="center" bgcolor="#e6e6fa">表示するテキスト
</td>
<td width="100" align="center" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/213.jpg">
</td></tr></table>
</td></tr><tr><td height="110" align="center">
<table border="0" width="360" cellspacing="0" cellpadding="0">
<tr>
<td width="180" align="left" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/214.jpg">
</td>
<td width="180" align="right" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/215.jpg">
</td></tr></table>
</td></tr><tr><td height="110" align="center">
<table border="0" width="220" cellspacing="0" cellpadding="0">
<tr>
<td width="110" align="left" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/216.jpg">
</td>
<td width="110" align="right" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/217.jpg">
</td></tr></table>
</td></tr></table>


PAGE TOP▲

２　１列毎にテーブルを組み合わせる例

テーブルを重ね合わせて配置した例








テーブル構成　（　テーブル毎に背景色をつけています　）
テーブルを４個使います
外側のテーブル　１行３列のテーブル
１列目のセル　　１行２列のテーブル
２列目のセル　　２行３列のテーブル
３列目のセル　　１行２列のテーブル




ＨＴＭＬタグ
外側のテーブルは　 赤色
紫色 　はセル内　 横方向 　のデータ表示位置
緑色 　は使う画像アドレスに変更してください

<table border="0" bordercolor="blue" width="560" height="420" cellspacing="0" cellpadding="0" align="center">
<tr><td width="140" align="center" valign="middle">
<table border="0" width="140" height="280" cellspacing="0" cellpadding="0" align="center">
<tr><td width="140" height="140" align="center" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/222.jpg">
</td></tr>
<tr><td height="140" align="center" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/202.jpg">
</td></tr></table>
</td><td width="280" align="center" valign="middle">
<table border="0" width="280" height="420" cellspacing="0" cellpadding="0" align="center">
<tr><td width="140" height="140" align="center" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/210.jpg">
</td>
<td width="140" align="center" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/211.jpg">
</td></tr>
<tr><td height="140" align="center" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/212.jpg">
</td><td align="center" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/213.jpg">
</td></tr>
<tr><td height="140" align="center" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/214.jpg">
</td>
<td align="center" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/215.jpg">
</td></tr></table>
</td><td width="140" align="center" valign="middle">
<table border="0" width="140" height="280" cellspacing="0" cellpadding="0" align="center">
<tr><td width="140" height="140" align="center" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/216.jpg">
</td></tr>
<tr><td height="140" align="center" > <IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/217.jpg">
</td></tr></table>
</td></tr></table>


PAGE TOP▲