目次 | 索引 |
---|---|
表 は、物事を整理し、分かりやすく書き表すことができる、便利な表現方法です。 HTMLにも、表に関するタグがいくつか用意されています。 これらを用いると、表を使ったホームページが書けます。
表は、何かが書き込まれた長方形を縦横に並べてできています。 ここでは、この長方形を セル ( cell )とよびます。 表の行とは、セルが横に並んだものを言います。 表の列とは、セルが縦に並んだものです。 表とは、行を縦に並べたものだと言えますし、列を横に並べたものだとも言えます。 HTMLでは、表を、行を縦に並べたものだととらえます。
HTMLを使って表を作るには、数種類のタグを組み合わせる必要があります。 例として、次の表を作成することにし、この作り方を順を追って説明します。
記号 | 読み方 | バイト数 |
---|---|---|
KB | キロバイト | 1,024 |
MB | メガバイト | 1,048,576 |
GB | ギガバイト | 1,073,741,824 |
はじめに、1行目、2行目、…と、セルの中身を書き出します。
記号 読み方 バイト数 KB キロバイト 1,024 MB メガバイト 1,048,576 GB ギガバイト 1,073,741,824
次に、各セルを2種類に分類します。
これは、
ヘッダ・セル
(
header cell
)か
データ・セル
(
data cell
)かという分け方です。
データの説明が書き込まれているのがヘッダ・セルで、データの値が書き込まれているのがデータ・セルです。
ブラウザは、HTMLドキュメントで
<th>
〜
</th>
に囲まれた部分をヘッダ・セルと見なします(Table Header)。
<td>
〜
</td>
に囲まれた部分をデータ・セルと見なします(Table Data)。
ブラウザは、デフォルトではヘッダ・セルをボールド体の中央揃えで表示します。
この例では、「記号」、「読み方」、「バイト数」の3つをヘッダ・セル、その他をデータ・セルと見ることにします。 HTMLドキュメントは次のようになります。
<th>記号</th><th>読み方</th><th>バイト数</th> <td>KB</td><td>キロバイト</td><td>1,024</td> <td>MB</td><td>メガバイト</td><td>1,048,576</td> <td>GB</td><td>ギガバイト</td><td>1,073,741,824</td>
HTMLにおいては、セルを横に並べたものが行で、行を縦に並べたものが表でした。
<th>
タグと
<td>
タグでセルが指定できたので、残りは行の指定と表の指定です。
th
要素と
td
要素の並びを
<tr>
〜
</tr>
で囲みますと、ブラウザはその範囲を表の行と見なします(Table Row)。
tr
要素の並びを
<table>
〜
</table>
で囲みますと、ブラウザはその範囲を表と見なします。
この例では、3つのセルで行になり、4つの行で表になっています。 HTMLドキュメントは次の通りです。
<table> <tr><th>記号</th><th>読み方</th><th>バイト数</th></tr> <tr><td>KB</td><td>キロバイト</td><td>1,024</td></tr> <tr><td>MB</td><td>メガバイト</td><td>1,048,576</td></tr> <tr><td>GB</td><td>ギガバイト</td><td>1,073,741,824</td></tr> </table>
記号 | 読み方 | バイト数 |
---|---|---|
KB | キロバイト | 1,024 |
MB | メガバイト | 1,048,576 |
GB | ギガバイト | 1,073,741,824 |
表のように表示されましたが、枠がありません。
<table>
タグには、外枠の幅を指定する属性
border
が用意されています。
<table border="
px
">
〜
</table>
で囲みますと、外枠の幅が
px
ピクセル(画素)の表を表示します。
ただし、
px
が0ですと外枠も内枠も表示しません。
border
属性を指定しませんと、
px
は0と見なされますので、枠のない表になったのです。
border
属性を用いて、外枠の幅を1ピクセルにします。
1行がだいぶ長くなりましたので、適宜改行を入れ、インデントをします。
<table border="1"> <tr> <th>記号</th> <th>読み方</th> <th>バイト数</th> </tr> <tr> <td>KB</td> <td>キロバイト</td> <td>1,024</td> </tr> <tr> <td>MB</td> <td>メガバイト</td> <td>1,048,576</td> </tr> <tr> <td>GB</td> <td>ギガバイト</td> <td>1,073,741,824</td> </tr> </table>
記号 | 読み方 | バイト数 |
---|---|---|
KB | キロバイト | 1,024 |
MB | メガバイト | 1,048,576 |
GB | ギガバイト | 1,073,741,824 |
最後に、数を右に揃えます。
<th>
タグと
<td>
タグでは、テキストの位置揃えに
align
属性
が使えます。
<table border="1"> <tr> <th>記号</th> <th>読み方</th> <th>バイト数</th> </tr> <tr> <td>KB</td> <td>キロバイト</td> <td align="right">1,024</td> </tr> <tr> <td>MB</td> <td>メガバイト</td> <td align="right">1,048,576</td> </tr> <tr> <td>GB</td> <td>ギガバイト</td> <td align="right">1,073,741,824</td> </tr> </table>
記号 | 読み方 | バイト数 |
---|---|---|
KB | キロバイト | 1,024 |
MB | メガバイト | 1,048,576 |
GB | ギガバイト | 1,073,741,824 |
これで、目的の表が完成しました。
規格の上では、終了タグ
</td>
,
</th>
および
</tr>
は省略できます。
表を中央に揃えるには、
<table align="center"> ... </table>
または
<div align="center"> <table> ... </table> </div>
と書きます。
border
属性を用いますと表に罫線が引かれますが、中身のないセルの内枠は表示されません。
<table border="5"> <tr> <td></td> <td>Good afternoon!</td> </tr> <tr> <td>Good afternoon!</td> <td> </td> </tr> </table>
Good afternoon! | |
Good afternoon! |
強制的に内枠を表示するには、強制改行
<br>
を使います。
<table border="5"> <tr> <td><br></td> <td>Good afternoon!</td> </tr> <tr> <td>Good afternoon!</td> <td><br></td> </tr> </table>
Good afternoon! | |
Good afternoon! |
セル内のテキストの位置は、ヘッダ・セルでは中央揃え、データ・セルでは左揃えがデフォルトでした。 セルが縦に広がりますと、デフォルトでは、ヘッダ・セルでもデータ・セルでもテキストが中央の高さに揃います。
<table border="1"> <tr> <th>header</th> <td>Good afternoon!<br>!<br>!<br>!<br>!</td> </tr> <tr> <td>Good afternoon!<br>!<br>!<br>!<br>!</td> <td>data</td> </tr> </table>
header | Good afternoon! ! ! ! ! |
---|---|
Good afternoon! ! ! ! ! |
data |
valign
属性
を用いますと、垂直方向の位置揃え(Vertical ALIGNment)が変更できます。
次の表に従ってください。
<table border="1"> <tr> <th valign="top">header</th> <td>Good afternoon!<br>!<br>!<br>!<br>!</td> </tr> <tr> <td>Good afternoon!<br>!<br>!<br>!<br>!</td> <td valign="bottom">data</td> </tr> </table>
header | Good afternoon! ! ! ! ! |
---|---|
Good afternoon! ! ! ! ! |
data |
HTMLでは、複数のセルを連続させることができます。 行をまとめて縦長のセルにすることも、列をまとめて横長のセルにすることも、行と列を同時にまとめて大きな長方形のセルにすることも可能です。
例として、次の表を作成します。
相手 | ||||
---|---|---|---|---|
グー | チョキ | パー | ||
自 分 |
グー | 分 | 勝 | 負 |
チョキ | 負 | 分 | 勝 | |
パー | 勝 | 負 | 分 |
まず、セルの内容を書き出します。 連続するセルの中身は、最も上の最も左のセルにあるものと考えます。 つまり、「相手」は1行目の3列目から5列目まで連続していますので、1行目の3列目にあるものと考え、「自分」は1列目の3行目から5行目まで連続していますので、3行目の1列目にあるものと考えます。
相手 グー チョキ パー 自分 グー 分 勝 負 チョキ 負 分 勝 パー 勝 負 分
続いて、ヘッダ・セルかデータ・セルかを見極め、セルの内容を
<th>
〜
</th>
か
<td>
〜
</td>
で囲みます。
行を
<tr>
〜
</tr>
で囲み、全体を
<table>
〜
</table>
で囲みます。
<table border="1"> <tr><th>相手</th></tr> <tr><th>グー</th><th>チョキ</th><th>パー</th></tr> <tr><th>自分</th><th>グー</th><td>分</td><td>勝</td><td>負</td></tr> <tr><th>チョキ</th><td>負</td><td>分</td><td>勝</td></tr> <tr><th>パー</th><td>勝</td><td>負</td><td>分</td></tr> </table>
相手 | ||||
---|---|---|---|---|
グー | チョキ | パー | ||
自分 | グー | 分 | 勝 | 負 |
チョキ | 負 | 分 | 勝 | |
パー | 勝 | 負 | 分 |
左上の中身のないセルを忘れていました。
このセルは1行目の1列目にあるものと考えます。
<br>
タグを使って内枠を表示します。
また、適宜改行を入れます。
<table border="1"> <tr> <th><br></th> <th>相手</th> </tr> <tr> <th>グー</th> <th>チョキ</th> <th>パー</th> </tr> <tr> <th>自分</th> <th>グー</th> <td>分</td> <td>勝</td> <td>負</td> </tr> <tr> <th>チョキ</th> <td>負</td> <td>分</td> <td>勝</td> </tr> <tr> <th>パー</th> <td>勝</td> <td>負</td> <td>分</td> </tr> </table>
相手 | ||||
---|---|---|---|---|
グー | チョキ | パー | ||
自分 | グー | 分 | 勝 | 負 |
チョキ | 負 | 分 | 勝 | |
パー | 勝 | 負 | 分 |
ここで、属性
rowspan
と
colspan
を使います。
どちらの属性も、
<th>
タグと
<td>
タグで使えます。
rowspan
属性は、セルが何行まとめられるかを指定します。
この値を3にしますと、縦に3行連続したセルが確保されます。
colspan
属性は、セルが何列まとめられるかを指定します(COLumn SPAN)。
この値を2にしますと、横に2列連続したセルが確保されます。
「相手」は、3列まとまっていますので、
colspan="3"
とします。
「自分」は、3行まとまっていますので、
rowspan="3"
とします。
左上の中身のないセルは、2行2列まとまっていますので、
rowspan="2" colspan="2"
とします。
「自」と「分」に間に強制改行を入れて、表が完成します。
<table border="1"> <tr> <th rowspan="2" colspan="2"><br></th> <th colspan="3">相手</th> </tr> <tr> <th>グー</th> <th>チョキ</th> <th>パー</th> </tr> <tr> <th rowspan="3">自<br>分</th> <th>グー</th> <td>分</td> <td>勝</td> <td>負</td> </tr> <tr> <th>チョキ</th> <td>負</td> <td>分</td> <td>勝</td> </tr> <tr> <th>パー</th> <td>勝</td> <td>負</td> <td>分</td> </tr> </table>
相手 | ||||
---|---|---|---|---|
グー | チョキ | パー | ||
自 分 |
グー | 分 | 勝 | 負 |
チョキ | 負 | 分 | 勝 | |
パー | 勝 | 負 | 分 |
例を参考にして、アジア、オセアニア、ヨーロッパ、アフリカ、北アメリカ、および南アメリカから一国(地域)ずつ選び、その日本語名、英語名、ドメイン名を表にまとめてください。 ドメイン名は、例えばJPNICによる解説
http://www.nic.ad.jp/ja/dom/types.html#cctld
を参照してください。
余力のある人は、アジア、ヨーロッパなどの国(地域)を増やしてください。
今日の演習5に従ってホームページを作成し、そのURLをkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付け(5/14)を明記してください。