ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >HTMLタグ一覧 > テーブル

テーブルを横に並べる

大きいテーブルの中に小さい2個のテーブルを入れることで テーブルを横に並べることができます。通常テーブルを 横に並べようとすると自動改行され二つ目のテーブルは下の行にきて 縦方向に並んでしまいます。

大きいテーブルのcellspacingやcellpaddingの値を大きくすることにより両 テーブルの間隔を広げれます。
下のソースで赤文字になっている部分が大きいテーブルのソースです。 黒文字の部分が小さい方のテーブルのソースです。

【ブラウザ表示】

大きいテーブルの中に小さいテーブルが2個並んでいます。

テーブル1
テーブル2

次に大きい方のテーブルの外枠を border="0"にして消します。

テーブル1
テーブル2

ソース

<TABLE BORDER="0">
<TR>
<TD>

<table border="1">
<tr>
<td>テーブル1</td>
</tr>
</table>
</TD>
<TD>

<table border="1">
<tr>
<td>テーブル2</td>
</tr>
</table>
</TD>
</TR>
</TABLE>

上のソースではテーブルのソースが複雑に見えるので数学の要領でテーブル1のソースをA、 テーブル2のソースをBに置き換えてやると分かり易くなります。

ソース(置き換えると分かり易い)

<TABLE BORDER="0">
<TR>
<TD>

A
</TD>
<TD>

B
</TD>
</TR>
</TABLE>

このように置き換え作業をしてやるとテーブルを横に何個も並べる際に 本来複雑なソースが理解しやすくなります。

■テーブルを横に並べる(その2)

もう1つテーブルを横に並べる方法を紹介しときます。 <table align="left">でテーブルの文字の回り込みを利用して テーブルを横に並べることができます。横に並べたいテーブル全てに align="left"を加えてやると何個でも横にテーブルを並べれます。 但しこの場合並んだテーブルとテーブルの間隔は無くなりピッタリくっつきます。

テーブルを並べるのを終えたい場合はalign属性を指定した テーブルタグの直後に
<br clear="all">を 記述します。

【ブラウザ表示】

1番目
2番目


ソース

<table border="1" align="left">
<tr>
<td>1番目</td>
</tr>
</table>

<table border="1">
<tr>
<td>2番目</td>
</tr>
</table>

■ その他の項目

テーブルを作る
横幅、高さを指定する
画像や背景色を指定する
表示位置を指定する
テーブルに表題をつける
間隔、余白を指定する
セルを結合する
枠線の色やスタイルを指定する
行と列をグループ化する
枠線の表示方法を指定する
細い枠線のテーブル
テーブルで空白を作る

HTMLタグ一覧のページに戻る

HTMLタグ
テキスト
イメージ
マーキー
テーブル
リンク
リスト
水平線
フォーム
メタタグ
フレーム
音楽タグ
埋め込みタグ

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.