表
ホームページでは表を使うことが多いです。 このような| A | B | C |
|---|---|---|
| 2 | 4 | 4 |
| 2 | -1 | -6 |
| 2 | 3 | -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
以前使った中国地方の県別人口データを次の表のように書いてください。| 県別人口 | 性別 | ||
|---|---|---|---|
| 男 | 女 | ||
| 県名 | 鳥取 | 294 | 321 |
| 島根 | 368 | 402 | |
| 岡山 | 939 | 1014 | |
| 広島 | 1398 | 1484 | |
| 山口 | 734 | 817 | |
今日の課題
自分でテーマを決めて、ホームページを作ってください。 内容は何でもいいですが、例えばパワーポイントの課題と同じテーマを使えば内容を新たに考える手間が省けます。条件は
- 少なくともindex.htm, link.htm, page1.htm の3つのファイルを作って下さい。page2.htmなどもっと作っても構いません。
- index.htmからはlink.htm, page1.htmへのリンクを作り、link.htm, page1.htmからindex.htmに戻るリンクを作って下さい。
- link.htmには他のサイト(友達、僕、岡山大学、外部などどこでもいいです)へのリンクを作って下さい。
- 画像を貼る
- 色をつける。文字の色でも背景の色でもいいです。
- 練習問題2の表を入れる。この表を入れておけば、もっと別の表を入れても構いません。
0 件のコメント:
コメントを投稿