HOME

楽しい消防団

自転車に乗ろう

私がせんむ

パソコンレスキュー隊

せんむのQ＆A

PC改造部屋

宮中囃子連

掲示板

リンク集

パソコン　レスキュー隊

ホームページの初歩の初歩

PCレスキュー隊目次

HPの初歩の初歩目次　

 

表を使ってレイアウトしよう

　HPのレイアウトをするのに便利なのがテーブルタグです。

これは本来表を表示するものなので、「テーブルタグをレイアウトに使うのはおかしい、見栄えはスタイルシートを使うべきだ」と言う意見もありますが、多くのサイトで使われているのも事実ですし、HP作成ソフトでもこれでレイアウトをするようになっているものが多いようです。また、スタイルシートを使うとブラウザによっては表示がおかしくなるもののあるようです。

 

  1.テーブルタグを使ったHTMLファイルを書こう


    メモ帳で下のようにHTMLソースを書きます。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<TITLE>テーブルタグの練習</TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT="black" LINK="blue"VLINK="purple" ALINK="red">
<FONT SIZE="6" COLOR="red">テーブルの練習</FONT>
<TABLE BORDER>
<TR>
<TD><IMG SRC="gazou01.gif"></TD><TD>貼り付けテストの画像</TD>
</TR>
<TR>
<TD><IMG SRC="images/gazou02.gif"></TD><TD>imagesフォルダに入れた画像</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 

<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">

ブラウザに対するHTMLの宣言だそうですが、勉強不足のため、詳しいことはわかりません。深く考えずに書いた方がいいと思います。CONTENT="text/html; charset=Shift_JIS"は漢字コード（キャラクタセット）です。これを設定しておくと、文字化けしません。この例では、シフトJISに設定してあります。

<BODY BGCOLOR="white" TEXT="black" LINK="blue"VLINK="purple" ALINK="red">

は背景の色がwhite、標準の文字の色がblack、リンクしている部分の文字の色がblue、一度クリックしたリンク部分の色がpurple、マウスを乗せたときの文字の色がredと言う意味です。ここは自由に変更できます。

画像を表示しない設定にしている人のために、BGCOLORやTEXTの色を設定しておくのが親切です。この場合、背景に使う画像や文字色と近い色の背景色や文字色を指定するのがコツです。

白っぽい背景画像で文字色は黒っぽいのが多い場合はBGCOLORに白、TEXTの色に黒などを指定します。逆に黒っぽい背景画像を使う場合はBGCOLORに濃い色系、TEXTの色に白や明るい色系を指定してやらないと文字が見えなくなります。

改行しているように見えるかもしれませんが、改行してはいけません。

 

  2.ファイルに名前をつけて保存しよう。


     「tabletest.html」という名前で保存します。
    保存先は「test.html」と同じ「私のHP」フォルダの中を指定します。

    ブラウザの「更新」ボタンを押すと、下のように表示されると思います。
    画像が出ましたか？
    万一、画像が出ないときはファイル名やタグをもう一度確認しましょう。
    一文字でも違うとエラーです。
    ファイル名は全角、半角、大文字、小文字に注意。
    タグは大文字、小文字は関係ありません。

　テーブルの練習　

ぶたさん

貼り付けテストの画像

あらいぐま

imagesフォルダに入れた画像 

　 　

    <TABLE BORDER>〜</TABLE>で囲まれた部分がテーブル（表）になります。
    <TR>〜</TR>が横1行を表示
    <TD>〜</TD>が<TR>〜</TR>の中でマス目（セル）１個分を表示します。

 

  3.HPレイアウトでのテーブルタグの便利な利用法


    下記のように書き加えるとレイアウトに便利に使えます。
    HTMLを書き換えてから上書き保存し、ブラウザの更新ボタンを押して確認してみましょう。
    BORDER、WIDTH、HEIGHT、ALIGN、BGCOLORなどは属性といって同時に使えます。

    <TABLE BORDER="0">　罫線が消えます。レイアウトに便利。

    <TABLE BORDER WIDTH="m" HEIGHT="n">　
    テーブルのサイズを指定。m,nはピクセル、またはウィンドウに対する％を指定。

    <TABLE ALIGN="CENTER">
    テーブル全体を中央揃え。LEFTで左揃え、RIGHTで右揃え。

    <TD ALIGN="CENTER">
    セルの中での横方向の配置を中央揃え。LEFTで左揃え、RIGHTで右揃え。

    <TD VALIGN="MIDDLE">
    セルの中での縦方向の中央に配置。TOPでセル上部、BOTTOMで下に配置。

    <TABLE BGCOLOR="RED">　表全体に色を指定。

    <TD BGCOLOR="RED">　セル単位で色指定可能。

    <TD COLSPAN="n">　表の横方向２列を連結、"n"は連結したいセルの数。

    <TD ROWSPAN="n">　表の縦方向２列を連結、"n"は連結したいセルの数。

    【注意】テーブルタグを使うと、ブラウザはテーブルの中身を読み込むまで表示しません。そのため、あまり大きなテーブルを使うと、表示に時間がかかる場合があります。

 

  4.テーブルタグを使ったHPレイアウトの例


    表を使ってレイアウトする時の一例を書きましたので参考にしてください。
    各数字の部分や属性の部分を変更したらブラウザの更新ボタンを押して確認しましょう。
    どのように見た目が変わるのかがわかると思います。
    実際にはタグは<body>〜</body>の間に書きます。
    また<table>〜</table>のようにタグは必ず対で書くのを忘れないように注意してください。

    ★レイアウト例その１★  

ぶたさん

AAAAAA

あらいぐま

BBBBBB

    1.表全体を中央揃えにしています。
    2.セルの中で画像とテキスト（文章）を中央揃えにしています。
    3.実際にレイアウトするには罫線を消すといいです。
    　tableタグの border="1"を border="0"にすると罫線が消えます。

    テーブルの部分のHTMLソースは下記のようになります。
    実際には<body>〜</body>の間に書きます。 

<table align="center" border="1">
<tr>
<td align="center" width="120" height="100">
<img src="images/pig03.gif" width="80" height="76" alt="ぶたさん">
</td>
<td align="center" width="250" height="100">
AAAAAA
</td>
</tr>
<tr>
<td align="center" width="120" height="100">
<img src="images/raccondog.gif" width="62" height="47" alt="あらいぐま">
</td>
<td align="center" width="250" height="100">
BBBBBB
</td>
</tr>
</table>

 

    ★レイアウト例その２★  

テーブルタグを使ったHPレイアウトの例

ぶたさん

AAAAAA
BBBBBB
CCCCCC

あらいぐま

あいうえお
かきくけこ
さしすせそ

    1.表全体を中央揃えにしています。
    2.セルの中で画像を中央揃え、テキストは左揃え、上揃えにしています。
    3.一番上のセルを横方向に２つ結合して、背景を黄色にしています。
    3.罫線を消すにはtableタグの border="1"を border="0"にします。

    テーブルの部分のHTMLソースは下記のようになります。 
    実際には<body>〜</body>の間に書きます。

<table align="center" border="1">
<tr>
<td align="center" width="400" height="35" colspan="2" bgcolor="yellow">
テーブルタグを使ったHPレイアウトの例
</td>
</tr>
<tr>
<td align="center" width="120" height="100">
<img src="images/pig03.gif" width="80" height="76" alt="ぶたさん">
</td>
<td align="left" valign="top" width="250" height="100">
AAAAAA
<br>
BBBBBB
<br>
CCCCCC
</td>
</tr>
<tr>
<td align="center" width="120" height="100">
<img src="images/raccondog.gif" width="62" height="47" alt="あらいぐま">
</td>
<td align="left" valign="top" width="250" height="100">
あいうえお
<br>
かきくけこ
<br>
さしすせそ
</td>
</tr>
</table>

 

    ★レイアウト例その３★

ぶたさん

AAAAAA

あいうえお

BBBBBB

かきくけこ

あらいぐま

１２３４５

ＡＢＣＤＥ

６７８９０

abcde

    大きなテーブルを作ってその中にさらにテーブル（入れ子といいます）を作り、レイアウトします。上の例では、わかりやすくするために外枠の罫線を表示していますが、実際にはレイアウト用のテーブルはborder="0"で罫線を消すときれいです。
    テーブルの入れ子は、かなり複雑になるので、実際にはHP作成ソフトを使った方がわかりやすいと思います。フリーのソフトもありますので活用してみてはいかがでしょうか？

<table border="0" width="400" height="300">
<tr>
<td width="120" height="100" align="center">
<p align="center">
<img src="images/pig03.gif" width="80" height="76" border="0" alt="ぶたさん">
</td>
<td width="250" height="100" align="center">
<table border>
<tr>
<td width="100">AAAAAA</td>
<td width="130">あいうえお</td>
</tr>
<tr>
<td width="100">BBBBBB</td>
<td width="130">かきくけこ</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="120" height="100" align="center">
<p align="center">
<img src="images/raccondog.gif" width="62" height="47" border="0" alt="あらいぐま">
</td>
<td width="250" height="100" align="center">
<table border>
<tr>
<td width="100">１２３４５</td>
<td width="130">ＡＢＣＤＥ</td>
</tr>
<tr>
<td width="100">６７８９０</td>
<td width="130">abcde</td>
</tr>
</table>
</td>
</tr>
</table>

  テーブルタグのちょっとおもしろい使い方　フレームページを作ろう　　　実際にHPをアップロードしてみよう　　目次

  

おまけのページTOPへ

質問は掲示板へ

HPのトラブルはURLを書いてください

 

 

 


女の子 ｜お絵かき掲示板 ｜ナスカ ｜iPhone修理