７日で作る、無料で自分オリジナルのタグ打ちホームページ

表をつくる

今日はこんなかんじの自己紹介のページを作ります↓

こんなページへGO!!

自己紹介のところが、表みたいになってるの、わかりますか？
今日1日かけて、この「表作り」をマスターしていただきます。
この自己紹介の表を見ながら作っていきますので、ウィンドウは画面端っこのほうに表示させっぱなしにしておいてください。

表を作る

今日作るのは「profile.html」という新しいHTMLですので、
まっさらな状態でテキストエディタを起動してください。
ブラウザも一応、起動しておきましょうか。

テキストエディタが起動したら、とりあえず基本骨格とタイトル文字を書いておいてください。
背景色は「lightgreen」で、文字色は「green」です。
なるべく下のを見ないで、自力で書いてみましょう(^-^)

<HTML>
  <HEAD>
    <TITLE>自己紹介のページ</TITLE>
  </HEAD>

  <BODY bgcolor="lightgreen" text="green">
    <CENTER>
    <H1><FONT color="red">自己紹介のページ</FONT></H1>




    </CENTER>
  </BODY>
</HTML>

</CENTER>（閉じタグ）の位置に注意してください。
今回は、タイトル文字だけでなく、下に作る表もセンタリングしますので、ページ全体をセンタリングすることになります。

書けたら、「profile.html」という名前で、homepageフォルダの中に保存してください。
一応ブラウザでも確認しておきましょう。

いいですか、では、表の作成にうつりますよ。

表を作るとき、まず書くのは<TABLE>です。
「ここからが表です」という宣言です。
あとで閉じ忘れがあるといけないので、先に閉じタグ</TABLE>も書いておきましょう。

<HTML>
  <HEAD>
    <TITLE>自己紹介のページ</TITLE>
  </HEAD>

  <BODY bgcolor="lightgreen" text="green">
    <CENTER>
    <H1><FONT color="red">自己紹介のページ</FONT></H1>
    <TABLE border="1">



    </TABLE>
    </CENTER>
  </BODY>
</HTML>

「border="1"」は、ワク線の太さが１である、という属性です。

ここからが勝負です。
みなさん、「Microsoft Excel」使ったことありますか？表処理ソフトの代表的なものですね。
使ったことない人には、ちょっとわかりにくいと思いますが、表は、
行と列という重要な要素を持っています。
図で説明すると、こんなかんじ↓

１列
↓

２列
↓

３列
↓

１行→

aaa	bbb	ccc
ddd	eee	fff

２行→

行は横方向、列は縦方向、ということです。
表は、

1行目の1列目・2列目・・・X列目
2行目の1列目・2列目・・・X列目
・
・
・
X行目

・・・というふうに作っていきます。

まず１行目。行は<TR>で作ります。
下にならって、テキストエディタに書き込んでください（表以外の部分は省略してあります）。

<TABLE border="1">
  <TR>
  

  </TR>
</TABLE>

1行目は、1列目が「名前」、2列目が「ますん」になってます。
列は<TD>で作ります。

<TABLE border="1">
  <TR>
      <TD>名前</TD>
      <TD>ますん</TD>
  </TR>
</TABLE>

「わ、わ、いきなりややこしくなったぞ!?」と、焦らずに・・・。
慣れるまでの辛抱ですよ(^-^;)
さ、1行目はこれで完了ですね。ブラウザで確認してみましょう。
うまくいってたら、続いて、2行目を作ります。

<TABLE border="1">
  <TR>
      <TD>名前</TD>
      <TD>ますん</TD>
  </TR>
  <TR>


  </TR>
</TABLE>

2行目は、「年齢」「20代前半。」です。

<TABLE border="1">
  <TR>
      <TD>名前</TD>
      <TD>ますん</TD>
  </TR>
  <TR>
      <TD>年齢</TD>
      <TD>20代前半。</TD>
  </TR>
</TABLE>

ブラウザで確認してみましょう。どうですか？

だんだんわかってきましたね？(^-^)
つづけて、血液型、趣味、メッセージも書き加えてみてください！

最後に、「トップページに戻る」リンクをはれば、
profile.htmlが完成で～す！

次のページでは、練習として、いろんな表を作ってみましょう！

*表をつくる*

表をつくる