テーブルを横に並べる

***

注意!!

このページは楽天アフィリエイトをされていらっしゃる方のために公開しています。

楽天アフィリエイトの規約にのっとり
バナーサイズの変更等を行っていない事・楽天アフィリエイト直バナー以外のASPを使用していない事が
守られているサイト様でしたらご自由にお使いいただいてかまいません。

***

Q:　HTMLタグを四角の升目を並列に並べる時どの様なタグを使うのですか？
　　　良いノート風がお借り出来たのですが、サイズ変更は出来たのですが、横に並列に出来ません。

列を横並び（並列？）にするために一番簡単なのは、 1行に並べたいだけの列を作ることです。（この下のテーブルの図）

もう少し見栄えを良くするなら そのテーブルのセルにそれぞれ一つづつ、升のテーブルを入れ込むのがいいと思います。
（2つ目の緑の枠の下にあるテーブルの図）

複雑なタグはいくらでも作れますが、楽天広場のフリーページは文字制限（1ページ全角20000文字）があるので
なるべく単純なタグのものを使う方が効率的なので単純なテーブルだけで説明します。

これは テーブルサイズが６００ｐｘ で 各列幅(セル) が６００ｐｘの25%（width="25%"またはwidth="150 " ）づつ に出来てます。
( border="1" は　テーブル枠の線の太さですね。）

　1行に４つの列を並列に並べたテーブル

<tr>は行の指定　<td>は列の指定になります。
この場合一つの<tr>と</tr>の中に４つの<td></td>があるので、1行に4列のセルを作ると言う意味です。

タグ

<td width="25%" ></td>を一つ増やすと横に並べるセルが一つ増えます
（テーブルの幅は600で同じにしてあるので一つのセル幅はその分小さくなりますからwidth=”20%”(またはwidth="120")にします）

　1行に5つの列を並列に並べたテーブル

<td width="25%" ></td>を一つ減らせば横に並ぶセルが一つ減ります。
（テーブル幅が同じでセルが3つになったのでそれぞれのセル幅は　width=33%（またはwidth="200"）にしました）

　1行に3つの列を並列に並べたテーブル

<tr></tr>が行の指定ですから、<tr></tr>を繰り返せば行が増えます。

1行に3つの列を並列に並べた	*	*
2行目	*	*

タグ

上のテーブルの中にそれぞれ高さ １００PX 幅１００PX 　（height=”100” width=”100”）で
枠の線の種類が点線（dotted）、色がグレー系（#333333）、
線の太さが　１ｐｘ （ style="border: 1px dotted #333333;" ）の升のテーブルを入れると・・・こうなります。

　一つのセルの中に新たにテーブルを入れた場合

タグ

<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画像

　@1の説明文

@2の説明文

@3の説明文　

@4の説明文　

　@5画像

@6画像　

@7画像

　@8画像

@5の説明文　

@6の説明文　

@7の説明文　

＠８の説明文　

タグ

★　黒文字は一番外側のブルーのテーブル
★　青文字はタイトルの入るテーブル bgcolor="#CCCCCC"は背景色の指定
★　ブルーグレーの文字は升テーブルを並列に並べるための枠線０の行
★　濃いピンクは点線の升テーブル
★　グリーンは升テーブルの下の説明文の行。 bgcolor="#CCCCCC"は背景色の指定
★　オレンジは（<td>）説明文を入れるセル。 font color="#CC0000"は文字色の指定
*　<BR>は改行