目次に戻る

5時間目: HTMLレイアウトでの要だよ(2/3)

WEBページの基本の4つのタグとタイトルだけを入れた状態が下図38だよ。一緒になったかな?

図38:テーブルタグ入力前

[ tableタグ(テーブルタグ) ]
  <table>
    <tr>
      <td> </td>
    </tr>
  </table>

まず一番外側の<table>が「テーブル(表)がここから始まるよ」って意味で、</table>が「テーブル(表)状にするのはここまでにしてね」って意味。<tr></tr>で挟んだ部分は1行目、2行目、3行目・・・の行のくくりって感じになってて、<td></td>で挟んだ部分が列をあらわしてるの。文字が入る場所はこの<td></td>の間になるよ。上記のタグをちょっと入力してみよう!

図39:メモ帳でテーブル1行1列記述

開始タグと閉じタグのセットが分かりやすいように段落をずらして書いてみたよ。これをブラウザを通して見ると・・・

図40:ブラウザ上でテーブル1行1列反映

そうだ!普通に書くとテーブルの線は見えないんだった!えっと、線を出す時はテーブルの始まりを表す<table>タグの中に「border(線)」を「1」の太さで書いてねって書かなくちゃいけないの。

ちなみにこの「1」を大きな数字にすると、線が太くなるんだよ。 画像をクリックすると大きくなるよ

図41:メモ帳でテーブル1行1列記述改め

ブラウザを更新して見ると・・・

図42:ブラウザ上でテーブル1行1列反映改め

上図が1行1列のテーブルで線画1pxの太さの様子です。で、これを1行5列に増やすよ。

図43:メモ帳でテーブル1行5列記述

<td></td>の部分がずらっと増えただけなのが分かるかな?これをブラウザで見ると・・・

図44:ブラウザ上でテーブル1行5列反映

こんな風に1行5列になるの。これをさらに3行に増やして下図45みたいにするときは・・・

図45:ブラウザ上でテーブル3行5列反映

メモ帳だとこんな感じになってるんだよ(。^∇^。)ノ 画像をクリックすると大きくなるよ

図46:メモ帳でテーブル3行5列記述

<tr></tr>で挟んだ部分が「行」になってる様子が見えてきたね(・∀・)エヘ♪

これでテーブルの練習が終わったから、<body></body>の間を空白に戻して、プロフィールページを作ってみよう。

右下の「1 2 3」って数字が並んでいるところの「3」をクリックしてね♪

目次に戻る

 

 

 

 

表示のバナーには、管理人が意図しない広告も含まれています。トラブル回避のため、18歳未満のネットショッピングは、保護者に承諾を得た上で行うことを推奨いたします。