2013-11-28

リンクと表

リンク

他のページへのリンクを張るには、例えば、岡山大学のホームページhttp://www.okayama-u.ac.jp/にリンクを張るには
<A HREF="http://www.okayama-u.ac.jp/">岡山大学</A>
と書きます。
自分のサイトに複数のページを作ってリンクを張る場合は、例えばindex2.htmというページを作ってそこに行くには
<A HREF="index2.htm">2枚目のページ</A>
と書きます。

ホームページでは表を使うことが多いです。 このような
ABC
244
2-1-6
23-2
Sheet1
良く見かける表だけでなく、様々な文字や画像を並べるときも使えます。例えば

銀杏並木が美しい
岡山大学へようこそ
春は桜が美しい
環境理工学部全景

のようにレイアウトも、実は表を使って

銀杏並木が美しい
岡山大学へようこそ
春は桜が美しい
環境理工学部全景
のように並べておいて、内側の表の罫線を表示させず、一方外側の表は枠として表示させることで実現しています。
そこで表の作り方を勉強しましょう。メモ帳で

<HTML>
<HEAD>
<TITLE>
表の練習
</TITLE>
</HEAD>
<BODY>
ここに表を書きます。
</BODY>
</HTML>

という内容のファイルを作って、index2.htmというファイル名で保存して下さい。ここに表を書いていきましょう。
最も基本的な表の形は

<TABLE>
<TBODY>
<TR><TD>左上 </TD><TD>右上 </TD></TR>
<TR><TD>左下 </TD><TD>右下 </TD></TR>
</TBODY>
</TABLE>
です。この通りに入力すると

左上 右上
左下 右下
になります。順を追って説明します。

HTMLでは<命令>と</命令>がペアで使われるのでしたよね。
表では<TABLE>と</TABLE>がペアとなって、表の始まり、表の終わり、を表します。
表では<TBODY>と</TBODY>がペアとなって、表の本文の始まり、表の本文の終わり、を表します。
そして表の中では<TR>と</TR>がペアとなって、行の始まり、行の終わり、を表します。
最後に、各行の中では<TD>と</TD>がペアとなって、セルの始まり、セルの終わり、を表します。

練習問題1

:次の表を作ってください。

左上 中上 右上
左中 中中 右中
左下 中下 右下

<TABLE>を<TABLE border="1">に書き換えると、表の境界線が表示されます。

表に関するいくつかの補足

  • 表の見出のために太文字にするには<TD> </TD>の代わりに<TH> </TH>と書きます。
  • 複数のセルを横に繋げて表示するには<TD colspan="2">中身</TD>のように書きます。これで二つのセルが横に繋がります。
  • 縦に繋げて表示するには<TD rowspan="2">中身</TD>のように書きます。
  • セルの中央に文字を表示するには<TD>を<TD align="center">に、右に表示するには<TD>を<TD align="right">に書き直します。
  • セルの上のほうに表示するには<TD valign="top">, 中央なら<TD valign="middle">, 下のほうなら<TD valign="bottom">です。
  • 文字に色を付けたいときは<FONT COLOR="red">赤い文字</FONT>と書いてください。 大きさを変えるなら<FONT SIZE=大きさ>です。例えば<FONT COLOR="green" size="7">大きな緑の文字</FONT>のように、両方同時に指定することも出来ます。
    詳しくは<FONT> を見てください。
  • 色の名前は、色の名前を見てください。
  • bgcolor="色の名前"という方法で表の塗りつぶしが出来ます。<TABLE bgcolor="red">とか<TR bgcolor="green">とか<TD bgcolor="blue">を試してみてください。どこに色がつきましたか?

練習問題2

以前使った中国地方の県別人口データを次の表のように書いてください。
県別人口性別
県名鳥取294321
島根368402
岡山9391014
広島13981484
山口734817

図書館の工事ももうすぐ完了します。

0 件のコメント: