テーブルを横に並べる
***
注意!!
このページは楽天アフィリエイトをされていらっしゃる方のために公開しています。
楽天アフィリエイトの規約にのっとり
バナーサイズの変更等を行っていない事・楽天アフィリエイト直バナー以外のASPを使用していない事が
守られているサイト様でしたらご自由にお使いいただいてかまいません。
***
Q: HTMLタグを四角の升目を並列に並べる時どの様なタグを使うのですか? 良いノート風がお借り出来たのですが、サイズ変更は出来たのですが、横に並列に出来ません。 |
列を横並び(並列?)にするために一番簡単なのは、
1行に並べたいだけの列を作ることです。(この下のテーブルの図)
もう少し見栄えを良くするなら
そのテーブルのセルにそれぞれ一つづつ、升のテーブルを入れ込むのがいいと思います。
(2つ目の緑の枠の下にあるテーブルの図)
複雑なタグはいくらでも作れますが、楽天広場のフリーページは文字制限(1ページ全角20000文字)があるので
なるべく単純なタグのものを使う方が効率的なので単純なテーブルだけで説明します。
これは
テーブルサイズが600pxで
各列幅(セル)が600pxの25%(width="25%"またはwidth="150")づつに出来てます。
(
border="1"は テーブル枠の線の太さですね。)
<tr>は行の指定 <td>は列の指定になります。
この場合一つの<tr>と</tr>の中に4つの<td></td>があるので、1行に4列のセルを作ると言う意味です。
タグ <table width="600" border="1"> <tr> <td width="25%"></td> <td width="25%"></td> <td width="25%"></td> <td width="25%"></td> </tr> </table> |
<td
width="25%"></td>を一つ増やすと横に並べるセルが一つ増えます
(テーブルの幅は600で同じにしてあるので一つのセル幅はその分小さくなりますからwidth=”20%”(またはwidth="120")にします)
<td
width="25%"></td>を一つ減らせば横に並ぶセルが一つ減ります。
(テーブル幅が同じでセルが3つになったのでそれぞれのセル幅は width=33%(またはwidth="200")にしました)
<tr></tr>が行の指定ですから、<tr></tr>を繰り返せば行が増えます。
タグ <table width="600" border="1"> <tr> <td width="33%"></td> <td width="33%"></td> <td width="33%"></td> </tr> <tr> <td width="33%"></td> <td width="33%"></td> <td width="33%"></td> </tr> </table> |
上のテーブルの中にそれぞれ高さ100PX 幅100PX (height=”100” width=”100”)で
枠の線の種類が点線(dotted)、色がグレー系(#333333)、
線の太さが 1px( style="border: 1px dotted #333333;")の升のテーブルを入れると・・・こうなります。
タグ <table width="600" border="1"> <tr align="center" valign="middle"> <td width="25%">
<table width="100" height="100" border="0" style="border: 1px dotted #333333;"> <tr> <td> </td></tr> </table>
</td><td width="25%">
<table width="100" height="100" border="0" style="border: 1px dotted #333333;"> <tr> <td> </td></tr> </table>
</td><td width="25%">
<table width="100" height="100" border="0" style="border: 1px dotted #333333;"> <tr> <td> </td></tr> </table>
</td><td width="25%">
<table width="100" height="100" border="0" style="border: 1px dotted #333333;"> <tr> <td> </td></tr> </table> </td></tr> </table> |
<table
width="100" height="100" border="0"
style="border: 1px dotted #333333;"> <tr>
<td> </td></tr> </table>
・・・が中の升テーブル
のタグです。
文字やバナーを入れるのはいつも <td>と </td>の間です。
外側のテーブルの線を消して中の四角い升テーブルだけを表示させるには、border="1"をborder="0"に変えます。
そうすれば次のように外側の1行4列テーブルの枠線が見えなくなるので、あたかも4個の升目が横に並んでいる(並列)ように見えます。
では、それを踏まえて横に4列の升テーブルを並べたものを2段作ってみます。
グレーの帯の部分には商品の説明を入れるようにしました。
| | | | @1の説明文 | @2の説明文 | @3の説明文 | @4の説明文 |
| | | | @5の説明文 | @6の説明文 | @7の説明文 | @8の説明文 |
|
タグ <table width="600" border="0" cellpadding="4" cellspacing="2" style="border: 2px solid #333399;"> <tr> <td> <table width="100%" border="0" cellspacing="2" cellpadding="4"><tr><td align="center" valign="middle" bgcolor="#CCCCCC"> タイトル </td></tr></table> <br><br> <table width="600" border="0"> <tr align="center" valign="middle"> <td width="25%"> <table width="100" height="100" border="0" style="border: 1px dotted #333333;"> <tr> <td align="center" valign="middle"> @1画像</td></tr> </table> </td> <td width="25%"> <table width="100" height="100" border="0" style="border: 1px dotted #333333;"> <tr> <td align="center" valign="middle"> @2画像</td></tr> </table> </td> <td width="25%"> <table width="100" height="100" border="0" style="border: 1px dotted #333333;"> <tr> <td align="center" valign="middle"> @3画像</td></tr> </table> </td> <td width="25%"> <table width="100" height="100" border="0" style="border: 1px dotted #333333;"> <tr> <td align="center" valign="middle"> @4画像</td></tr> </table> </td></tr> <tr align="center" valign="middle" bgcolor="#CCCCCC"> <td><font color="#CC0000"> @1の説明文 </font></td> <td><font color="#CC0000"> @2の説明文 </font></td> <td><font color="#CC0000"> @3の説明文 </font></td> <td><font color="#CC0000"> @4の説明文 </font></td> </tr> </table> <br><br> <table width="600" border="0"> <tr align="center" valign="middle"> <td width="25%"> <table width="100" height="100" border="0" style="border: 1px dotted #333333;"> <tr> <td align="center" valign="middle"> @5画像</td></tr> </table> </td> <td width="25%"> <table width="100" height="100" border="0" style="border: 1px dotted #333333;"> <tr> <td align="center" valign="middle"> @6画像</td></tr> </table> </td> <td width="25%"> <table width="100" height="100" border="0" style="border: 1px dotted #333333;"> <tr> <td align="center" valign="middle"> @7画像</td></tr> </table> </td> <td width="25%"> <table width="100" height="100" border="0" style="border: 1px dotted #333333;"> <tr> <td align="center" valign="middle"> @8画像</td></tr> </table> </td></tr> <tr align="center" valign="middle" bgcolor="#CCCCCC"> <td><font color="#CC0000"> @5の説明文 </font></td> <td><font color="#CC0000"> @6の説明文 </font></td> <td><font color="#CC0000"> @7の説明文 </font></td> <td><font color="#CC0000"> @8の説明文 </font></td> </tr> </table> <br><br> </td></tr> </table> | | ★ 黒文字は一番外側のブルーのテーブル | ★ 青文字はタイトルの入るテーブル bgcolor="#CCCCCC"は背景色の指定
| ★ ブルーグレーの文字は升テーブルを並列に並べるための枠線0の行 | ★ 濃いピンクは点線の升テーブル
| ★ グリーンは升テーブルの下の説明文の行。
bgcolor="#CCCCCC"は背景色の指定
| ★ オレンジは(<td>)説明文を入れるセル。 font color="#CC0000"は文字色の指定 | * <BR>は改行 | |