テーブルを横に並べるには

HOME > Web豆知識 > テーブルを横に並べるには

■ テーブルを横に配置

テーブルを横に並べるには?と言う質問がたまにありますが、ここではテーブルを使用した方法を解説します。まず、横に並べるのであれば並べたい数のテーブルを配置します。【図1】

【図1】
A B

【図1】のソースはこのようになります。

<table border="1" width="200" height="100">
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>

次は、A.Bそれぞれにテーブルを配置してみましょう。【図2】

【図2】
テーブル1
テーブル2

【図2】ソースはこのようになります。

<table border="1" cellpadding="5" cellspacing="0" width="200"height="100">
 <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>

最後にテーブルの枠線(border="n")を0に指定すれば出来上がりです。【図3】

【図3】
テーブル2
テーブル1

HOME