無料ホームページ作成講座 >> HTML講座 >> テーブルを作ってみよう

表 を作ってみよう

テーブル

テーブル(表)を作成していきましょう
表は、この先よく使う事になると思います。きれいなレイアウトが可能です。
しっかり身に付け役立ててください。

基本構造 ( 一列のTABLE )

○○

<table border="1">
 <tr>
  <td> ○○ </td>
 </tr>
</table>


上記が基本の形です。この<table>〜</table>までセットで表になります。
<table>〜</table> が 表、   <tr>〜</tr> が 行、   <td>〜</td> が 列  です。
※必ず<td></td>は<tr>〜</tr>の中、 <tr></tr>は<table>〜</table>の中にあること。

○○には、文字や画像をいれます。

※見やすいようにborder="1" で枠を書き加えています。
 この枠を消すには border="0" もしくは border="1" ごと消してください。

基本ができたら、応用です!!
下記にサンプルとコードを用意しましたので色々試してみてください。
そして、あなた独自の表を作ってみてください。

二行のTABLE

○○
○○

<table border="1">
 <tr>
  <td> ○○ </td>
 </tr>
 <tr>
  <td> ○○ </td>
 </tr>
</table>


二列のTABLE

○○○○

<table border="1">
 <tr>
  <td> ○○ </td>
  <td> ○○ </td>
 </tr>
</table>


色を付けたTABLE ( 一列 )

※色を指定するは 色見本 を参照ください。

○○

<table bgcoler="red">
 <tr>
  <td> ○○ </td>
 </tr>
</table>


あなただけのオリジナルの表はできましたか? これで何となくカタチになってきてませんか?

おまけ

子TABLE

※色を指定するは 色見本 を参照ください。

TABLEの中にTABLE

<table bgcoler="green">
 <tr>
  <td>
     <table bgcoler="red">
      <tr>
       <td> TABLEの中にTABLE </td>
      </tr>
     </table>
  </td>
 </tr>
</table>


表の中に表を入れることも可能なんです!!

⇒ 次は画像を使ってみるで画像を表示させてみましょう。