トップページにサイトの目次などを作りたい場合、どうにかして「段組（だんくみ）」ができないか？と考えることがあります。これを可能にするのが、テーブル（table)タグです。

テーブル（table)タグは、本当は表を作るＨＴＭＬタグなのですが、枠の無い表に文章やリストを書けば結果的に「段組」を可能にできます。


記事中でテーブル（table)タグを使う際は、「投稿フォームの設定」 で「改行しても反映しない」という設定にしないと正しく表が表示されません。

トップページのHTMLの中でテーブル（table)タグを使う場合は、HML内ではもともと改行しても反映しない設定になっているので、問題ありません。

テーブル（table)タグ内では改行が反映されませんから、<br/>タグで改行しないといけません。



テーブル（table)タグの基本構造としては、<table>で始まって、</table>で閉じます。
<tr>と</tr>で囲われた部分が列となります。
<td>と</td>で囲われた部分がセルとなります。
段組を行う場合はHTMLを下記のように書けばいいわけです。

−−−−−−−−−−−−−−
<table>

<tr>

<td>
■左側の段組<br/>
</td>

<td>
■右側の段組<br/>
</td>

</tr>

</table>
−−−−−−−−−−−−−−

ですが、これに実際リストを入れるとずれてしまいます。




セル内の文章の開始位置を指定する　valign="top"　を<td>に追加します。
また、かなり段組が寄っている印象がありますので、cellpaddingで10pxくらいセルの周りに余裕を持たせます。
さらに、段組のテーブルタグがカラムを越える横幅になると、サイドバーが落ちたり表示が崩れたりしますので、横幅の大きさをカラムの90％くらいに設定します。
（このように設定しても、あまり大きな画像を入れると表示が崩れることがあります。）

こういう形で修正を加えると、テーブルタグは以下のようになります。


−−−−−−−−−−−−−−
<table witdh="90%" cellpadding=10>
<tr>
<td valign="top">
■左側の段組<br/>

• リスト1<br/>
• リスト2<br/>
• リスト3<br/>
• リスト4<br/>
• リスト5<br/>
• リスト6<br/>
• リスト7<br/>
• リスト8<br/>
• リスト9<br/>
• リスト10<br/>

</td>
<td valign="top">
■右側の段組<br/>

• リスト11<br/>
• リスト12<br/>

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


テーブルタグはかなり奥が深いので、段組を入り口にして、いろいろとテーブルタグの使い方を学ばれてください。

テーブルタグは、インターネットエクスプローラーでもFirefoxでも表示が崩れることが少ないです。
デザインは基本的にはCSSを使うのが望ましいですが、どうしてもCSSでは設定しにくいところはテーブルタグがかなり使えます。