A.T-MOON

contents

パンくずリスト

メッセージエリア



    テーブルの基本

メッセージエリア


マーク テーブルの基本 <table><tr><td>〜</td></tr></table>

<table>〜</table>に挟まれた部分がテーブル(表)であることを示します。
<tr>〜</tr>に挟まれた部分が行で横一列分のデーターを記述します。
<td>〜</td>に挟まれた部分がセルになります。

※例)
セル1 セル2 セル3
セル4 セル5 セル6
上の囲まれている部分がテーブルです
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table border="1">
  <tr>
   <td>セル1</td>
   <td>セル2</td>
   <td>セル3</td>
  </tr>
  <tr>
   <td>セル4</td>
   <td>セル5</td>
   <td>セル6</td>
  </tr>
 </table>

 上の囲まれている部分がテーブルです
 </body>
</html>
<table>タグborder属性を指定しないと枠がでませんので指定しています。

ページTOP


マーク セルの数の指定 <tr><td>〜</td></tr><tr><td>〜</td></tr>…

テーブルの基本の所で説明しましたが、 <table>〜</table>に挟まれた部分がテーブル(表)で
挟まれた部分には、横に伸びて行く<tr>〜</tr>の部分と
<tr>〜</tr>に挟まれた、縦に伸びて行く<td>〜</td>部分があります。
<tr>〜</tr><td>〜</td>の数を増やす事によって、セルの数が増えていきます。

※例)
セル1 セル2
セル3 セル4
セルを縦に2個、横に2個並べたテーブルです
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table border="1" >
  <tr>
   <td>
セル1</td>
   <td>
セル2</td>
  </tr>
  <tr>
   <td>
セル3</td>
   <td>
セル4</td>
  </tr>

 </table>
 セルを縦に2個、横に2個並べたテーブルです
 </body>
</html>
※例)
セル1
セル2
セル3
セルを縦に3個並べたテーブルです
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table border="1" >
  <tr>
   <td>
セル1</td>
  </tr>
  <tr>
   <td>
セル2</td>
  </tr>
  <tr>
   <td>
セル3</td>
  </tr>

 </table>
 セルを縦3個並べたテーブルです
 </body>
</html>
※例)
セル1 セル2 セル3 セル4
セルを横に4個並べたテーブルです
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table border="1" >
  <tr>
   <td>
セル1</td>
   <td>
セル2</td>
   <td>
セル3</td>
   <td>
セル4</td>
  </tr>

 </table>
 セルを縦に2個、横に2個並べたテーブルです
 </body>
</html>

このように<tr>〜</tr>の数や
その間に記述される<td>〜</td>の数を増やすことにより
テーブルは横に伸びたり縦に伸びたりするということです。

ページTOP



マーク テーブルの位置指定 <table align="A">〜</table>

テキストに対するテーブルの表示位置を指定できます。
<table>タグalign属性で、テーブルの表示位置を指定します。
Aには属性の値を入れましょう。

A テーブルの表示位置
left(デフォルト) 左に寄せて表示
center 中央に表示
right 右に寄せて表示

※例)
セル1 セル2 セル3
セル4 セル5 セル6
テーブルが中央に表示され
テキストはテーブルの下に表示されます
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 <table border="1" align="center">
  <tr>
   <td>セル1</td>
   <td>セル2</td>
   <td>セル3</td>
  </tr>
  <tr>
   <td>セル4</td>
   <td>セル5</td>
   <td>セル6</td>
  </tr>
 </table>
 テーブルが中央に表示され<br>
 テキストはテーブルの下に表示されます
 </body>
</html>

leftに指定した場合はテキストは右側に表示されrightに指定した場合はテキストは左側に表示されます。
centerに指定した場合はテキストはテーブルの下に表示されます。
これらの回り込みの解除は<br clear="B">を挿入します。
Bには"all""left""right"のいずれかが入ります。
詳しくは 【回り込みの解除】 で解説します。

ページTOP

HTML TOPへ戻る テーブルのサイズ指定