無料で簡単!ネット内職でお金稼ぎ〜タグの説明〜テーブル(TABLE)です

無料で簡単!ネットでお金稼ぎ〜ネット内職〜 >ホームページを作ろう>タグの説明

タグの説明〜テーブル(TABLE)

基本的なタグ

当サイトでも使用してる基本的なタグの説明をします。

ブラウザでホームページとして表示されるされるのは<BODY>〜</BODY>のタグ内で記載した部分です。
<BODY>では背景の色やホームページの壁紙を決めることができ、bgcolor="色"やbackground="画像"と打ちます。
色は#FFFFFFのように書き入れます。

#FFFFFFは白色で表示され、黒は#000000、赤は#FF0000、緑は#00FF00、青は#0000FFです。これは背景だけでなく、文字の色などの表示もこれで表しますので、覚えておくと便利ですよ。
RGB(レッド、グリーン、ブルー)で左からFFの位置が赤、緑、青になるんだと覚えておけば簡単に覚えられますよ。

"画像"は画像がおいてある場所、拡張子を書き入れればOKです。
<CENTER>〜</CENTER>ここからここまででブラウザに表示される時に中央(センター)ですよってコンピューターに教えてます。

テーブルの説明

前にテーブルを本の紙のように例えましたが、テーブルさえ覚えればホームページのデザインは簡単にできるようになります。
タグ打ちで作ろうと思ったら覚えることはたくさんありますけど、ホームページ・ビルダーなら簡単に作れます。

大きい紙に小さい紙を貼っていく感じで大きいサイズのテーブルの上に小さいテーブルを作ったりしてデザインもできます。
<TABLE>〜</TABLE>で囲い、表を作れます。そのサイズ、枠はどうするかはwidth、height、border、で決めます。

widthは横幅を決めます。単位は何も指定しなければピクセルという単位で表します。(ピクセルはwindowsの画面サイズを決めるのにも使われています)、
heightは高さ、(上下)のサイズを決めます。
borderは枠のサイズを決めますborderを0にすれば枠無しの表ができあがり数字を大きくすれば枠のサイズが大きくなります。

行と列の説明

行は<TD>〜</TD>で作り、列は<TR>〜</TR>で作ります。行は列の中に入れて作ります。
<TABLE>
<TR> <TD> </TD> </TR>
</TABLE>こんな感じで作っていきます。

例)縦100、横200、枠のサイズ1で行2列2のテーブルを作ってみます。
<TABLE width="200" height="100" border="1">
<TR> <TD>○ </TD> <TD>× </TD> </TR>
<TR> <TD>△ </TD> <TD>■ </TD> </TR> 

×

HTMLで書けばこのように表示されます。
テーブルを自分で作れるようになれば美しいデザインもできるようになります。

前回のホームページと今回の手法

何も知らない時代にホームページ・ビルダーで作った最初のホームページを晒します。(形だけは前作の面影がなんとなく残ってますね)
見たい方はこちらから>原型

色々な色でテーブルを作ったのはホームページの色を何色にしようか決める為にしました。
そしてホームページは目に優しい緑を選択しました。

新しいホームページを作成中です(5/18)完成し今のホームページになりました。
前作のホームページが見たい方はこちら>前作

前作のホームページと今のホームページでは色々と違いがありますが、特に違うのはtableのデザインを違う手法で作成してます。
新しい手法とは cellspacingを利用します。

例)縦100、横200、行2列1のテーブルを作ってみます。
枠のサイズは0にしましょうその代わり cellspacing="1"を加えます。このままですと枠の判別ができませんので色をつけてみました。
枠は緑で中は白でテーブルを作成すると下のようになります。

 
 
左図のHTMLです。
<table width="200" height="100" border="0" cellspacing="1" bgcolor="#00ff00">
<tr bgcolor="#ffffff">
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td> </td>
</tr>
</table>

枠というよりスッキリした線でテーブルを作成することができます。
枠内の白を緑にかえれば全部緑で表示されます。

 
 
左図のHTMLです。
<table width="200" height="100" border="0" cellspacing="1" bgcolor="#00ff00">
<tr>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td> </td>
</tr>
</table>

この手法は応用力がとても高いので覚えるとより綺麗なホームページを作れます。

cellspacingを使ったホームページから2010年に外見は一緒でdivをメインに使用して作り直したので2011年3月の時点で4代目となっています。

タグの説明の最初に戻る   ホームページを作ろうへ続く
Total: Today: Yesterday:
サイトマップ