HOME >表(テーブル)を作ろう


表(テーブル)を作ってみよう

前回の続きになります。前回を見てない方は画面のレイアウトをご覧ください。
では今回は画面に表(テーブル)を作ってみましょう

表(テーブル)を作ろう
表(テーブル)を使うと伝えたいものをひとまとめにすることが出来ます。

 <BODY>
   <TABLE>
    <TR>
     <TD> 1A </TD>
     <TD> 2A </TD>
     <TD> 3A </TD>
    </TR>
    <TR>
     <TD> 1B </TD>
     <TD> 2B </TD>
     <TD> 3B </TD>
    </TR>
  </TABLE>
 </BODY>

<BODY>〜</BODY>の間に左の記述をメモ帳に書いてみましょう

書いたら「ファイル→上書き保存」をしてください。
好きな名前.htmlをダブルクリックして見るとHPが表示されます。
出来たのを見てみる (サンプル

説明
<TABLE>〜</TABLE>で挟みました。
表(テーブル)であることをブラウザに認識させるために書きます。
TABLEタグで囲まれた部分が表記部分になります。
<TR>〜</TR>で挟みました
TRタグで囲まれた部分が表(テーブル)の1列になります。
TRタグを複数個に増やすことによって表の形になっていきます。
<TD>〜</TD> で文章を挟みました。
TDタグで囲まれた内容が表(テーブル)の1つのセルになります。

どうですか?表(テーブル)の基本構造はわかりましたか?次は外枠をつくってみましょう

 <BODY>
   <TABLE BORDER="1">
    <TR>
     <TD> 1A </TD>
     <TD> 2A </TD>
     <TD> 3A </TD>
    </TR>
    <TR>
     <TD> 1B </TD>
     <TD> 2B </TD>
     <TD> 3B </TD>
    </TR>
  </TABLE>
 </BODY>

<BODY>〜</BODY>の間に左の記述をメモ帳に書いてみましょう

書いたら「ファイル→上書き保存」をしてください。
好きな名前.htmlをダブルクリックして見るとHPが表示されます。
出来たのを見てみる (サンプル

説明
<TABLE BORDER="指定">〜</TABLE>で外枠を指定します。
<TABLE>〜</TABLE>タグにBORDER="指定"をつけてあげます。
指定には任意の数字を入れてください。
指定する数字が大きければ大きいほど外枠が太くなります。

どうですか?表(テーブル)らしくなりましたね。次はサイズの指定をしてみましょう

 <BODY>
   <TABLE BORDER="1" WIDTH="250" HEIGHT="250">
    <TR>
     <TD> 1A </TD>
     <TD> 2A </TD>
     <TD> 3A </TD>
    </TR>
    <TR>
     <TD> 1B </TD>
     <TD> 2B </TD>
     <TD> 3B </TD>
    </TR>
  </TABLE>
 </BODY>

<BODY>〜</BODY>の間に左の記述をメモ帳に書いてみましょう

書いたら「ファイル→上書き保存」をしてください。
好きな名前.htmlをダブルクリックして見るとHPが表示されます。
出来たのを見てみる (サンプル

説明
<TABLE BORDER="指定" WIDTH="指定" HEIGHT="指定">〜</TABLE>で外枠を指定します。
<TABLE>〜</TABLE>タグにWIDTH="指定"(横幅)HEIGHT="指定"(高さ)をつけてあげます。
指定には任意の数字か%(ブラウザの幅100%に対して)を入れてください。
指定する数字が大きければ大きいほど表(テーブル)が大きくなります。

どうですか?表(テーブル)の作り方はわかりましたか?
では次回は表(テーブル)のスタイルに変化をつけてみましょう。

表(テーブル)のスタイル

上に戻る      HOMEに戻る


HOME >表(テーブル)を作ろう


Member Of バナー広告.com
Member Of バナー広告.com
Member Of バナー広告.com
Member Of バナー広告.com

SEO [PR]  カード比較 冷え対策 株価 動画無料 ライブチャット 小説 SEO