[小西ホームページ]   [目次・索引]   [前の授業]   [次の授業]

コンピュータIIE(HTMLとウェブ・サーバ)第5回

目次
5.1 表
5.1.1 表の基本
5.1.2 セルのスタイル
5.1.3 連続したセル
5.2 演習5
5.3 レポート課題
5.4 参考文献
索引
align属性   border属性   colspan属性   rowspan属性   tableタグ   tdタグ   thタグ   trタグ   valign属性   上揃え   下揃え   セル   中央揃え   データ・セル     ヘッダ・セル  

5.1 表

5.1.1 表の基本

は、物事を整理し、分かりやすく書き表すことができる、便利な表現方法です。 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>

と書きます。

5.1.2 セルのスタイル

border 属性を用いますと表に罫線が引かれますが、中身のないセルの内枠は表示されません。

例 5.1 
<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> を使います。

例 5.2 
<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!

セル内のテキストの位置は、ヘッダ・セルでは中央揃え、データ・セルでは左揃えがデフォルトでした。 セルが縦に広がりますと、デフォルトでは、ヘッダ・セルでもデータ・セルでもテキストが中央の高さに揃います。

例 5.3 
<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)が変更できます。 次の表に従ってください。

表 5.1  垂直方向の位置揃え
属性と値 位置揃え
valign="top" 上揃え
valign="middle" 中央揃え
valign="bottom" 下揃え
例 5.4 
<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

5.1.3 連続したセル

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>

相手
グー チョキ パー
自分 グー
チョキ
パー

ここで、属性 rowspancolspan を使います。 どちらの属性も、 <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>

相手
グー チョキ パー

グー
チョキ
パー

5.2 演習5

例を参考にして、アジア、オセアニア、ヨーロッパ、アフリカ、北アメリカ、および南アメリカから一国(地域)ずつ選び、その日本語名、英語名、ドメイン名を表にまとめてください。 ドメイン名は、例えばJPNICによる解説

http://www.nic.ad.jp/ja/dom/types.html

を参照してください。

例 5.5 
演習5(世界の国のドメイン名)

A table of domain names

余力のある人は、アジア、ヨーロッパなどの国(地域)を増やしてください。

例 5.6 
演習5(世界の国のドメイン名)

A table of domain names

5.3 レポート課題

今日の演習5の答案(ホームページのURL)をメールで提出してください。 メールの差出人は学内のアドレス(b04a001@twcu.ac.jpなど)とし、メールの宛先はkonishi@twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日(10月26日)を明記してください。


5.4 参考文献


[小西ホームページ]   [目次・索引]   [前の授業]   [次の授業]

2005年10月26日更新
小西 善二郎 <konishi@twcu.ac.jp>
Copyright (C) 2005 Zenjiro Konishi. All rights reserved.