リストと表

リストと表は、HTMLでは、特別な親子構造を持っているものとして表現します。

順序付けリストと順不同リスト

ものごとをリストアップする場合、順不同で列挙する場合と順番をつけて列挙する場合があります。HTMLでは、この順不同リスト(Unordered List)と順序付けリスト(Ordered List)を、各々「ul要素」と「ol要素」として表します。

列挙する各項目(List Item)の1つ1つは、ul要素やol要素の子要素である「li要素」として扱います。

リストは入れ子にも出来、その場合は子リスト要素（ol要素またはul要素）は親リスト中のli要素の子要素という形になります。

以上から、順不同リストの第2項目に順序付けリストが含まれるようなリストは、次のようにマーク付けすることになります。

<ol>
 <li>順序付けリストの第1項目</li>
 <li>順序付けリストの第2項目
  <ul>
   <li>順不動リストの第1項目</li>
   <li>順不動リストの第2項目</li>
   <li>順不動リストの第3項目</li>
  </ul>
 </li>
 <li>順序付けリストの第3項目</li>
</ol>

順序付けリストの番号や順不同リストの頭の印は、標準的なWWWブラウザの場合、各li要素の冒頭に自動的に割り振られます。これはスタイルシートの設定によって変更可能です。印のスタイル指定については、CSS 1.0仕様5.6.3節をご覧ください。

また、両リストについて、詳しくはHTML 4仕様10.2節をご覧ください。

定義リスト（見出し付きリスト）

辞書などのように、見出し語と説明文のような関係で列記していく形式のリストの型は、定義リスト(Definition List)と呼ばれる「dl要素」として定義されています。

定義リストの内容は、定義語(Definition Term)である「dt要素」と定義内容(Definition Data)である「dd要素」の対によって表します。

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Languageの略で、SGML (Standard Generalized Markup Language) によって定義された文書型の1つ。</dd>
<dt>HTML文書インスタンス</dt> <dd>HTMLで実際にマーク付けされた実在の文書のこと。</dd> <dt>CSS</dt>
<dd>Cascading Style Sheetの略で、HTML文書インスタンスの表示処理を定めるスタイルシートの記述に用いる言語規定。</dd>
<dt>JavaScript</dt>
<dd>Netscape Communications社によって開発された、WWWブラウザを実行環境とするスクリプト言語。</dd>
<dt>DOM</dt>
<dd>Document Object Modelの略で、HTML等でマーク付けされた要素の各々を文書オブジェクトというモノとして考えるということと、スクリプト言語などから文書オブジェクトへのアクセス方法などを規定している。</dd>
</dl>

このdl要素について、詳しくはHTML 4仕様10.3節をご覧ください。

表の基本構造

仙台では、テレビの各チャンネル番号と局名、系列名が、次のような関係になっています。（ちなみに下の「表」は、PRE要素として表しています。）

   1         3        5        12         32           34
東北放送  NHK総合  NHK教育  仙台放送  東日本放送  ミヤギテレビ
TBS系     NHK総合  NHK教育  フジ系    テレ朝系    日テレ系

この「3行6列の表」は、「各々6つのデータ区画（コマ）を含んだ3つの行」だという具合に考えられます。HTMLでは、そういう行の集まりとして、表を扱います。具体的には、表(Table)全体を1つの「table要素」とし、その子要素である行(Table Row)を「tr要素」、行の子要素である1つ1つのコマ(Table Data cell)を「td要素」としています。そこで、上の一覧は次のようにマークづけされることになります。

<table>
<tr>
<td>1</td><td>3</td>…以下番号…
</tr>
<tr>
<td>東北放送</td><td>NHK総合</td>…以下局名…
</tr>
<tr>
<td>TBS系</td><td>NHK総合</td>…以下系列名…
</tr>
</table>

さて、上のマークづけは、そちらのWWWブラウザでは次のように「見えて」いることでしょう。

表の見栄えを整える

もし上の表に対して、どうも見栄えが悪いと感じられるとすると、その理由は「枠線が引かれていないから」、「チャンネル番号が中央揃えになっていないから」といったものではないでしょうか。

枠線に関しては、table要素の開始タグにborderという属性を設定することでコントロールします。画面の1画素を太さの単位として、次のように記します。

<table border="2"> …表の内容… </table>

コマの中身に関して、「中央揃え」「右寄せ」「左寄せ」などの指定を行うには、スタイルシートでtd要素のtext-alignプロパティを変更します。ある行（tr要素）全体を同じ設定にする場合は、当該tr要素のスタイル設定をすれば、その子要素であるtd要素全てに同じスタイルが継承されます。

<tr style="text-align: center;">

さて、ではさっきの表に、「table border="2"」と、1行目に対する「align: center」を設定してみましょう。どんな具合に「見える」でしょうか。

項目見出しのコマ

上の表について、その表だけを見せられても、個々のデータの意味は「なんとなく」理解できます。けれども、あまり馴染みのない内容を扱う場合などは、項目見出しや表の題名などを併記しておくことになるでしょう。

ある行の中で、項目見出しであるようなコマは、「th要素」として表します。「Table Header cell」です。表の題名（あるいは簡単な説明書き）は、表全体の開始タグ<table>と、第一行の開始タグ<tr>の間に、caption要素を挿入して表します。

さっきの表を、項目見出しと題名を持つものとして、次のように記すことにしましょう。

<table border="2">
<caption>テレビチャンネルに関する仙台地区の放送局とキー局の関係</caption>
<tr style="text-align: center;">
<th>チャンネル番号</th><th>1</th>…以下チャンネル番号…
</tr>
<tr>
<th>局名</th><td>東北放送</td>…以下テレビ局名…
</tr>
<tr>
<th>系列名</th><td>TBS系</td>…以下系列名…
</tr>
</table>

チャンネル番号を横方向の見出しとして解釈し直していることにご注意下さい。

他の複数のコマをまたぐコマ

今までの例を、縦横入れ替えて、「東京のキー局の番組が宮城県では何という地元局で放送されていて、チャンネルが何番であるか」という表に構成し直してみましょう。

チャンネル番号は地域によって異なりますので、「チャンネル番号」という大見出しの下に「仙台地区」「鳴子地区」という項目見出しを立てることにします。

項目見出し「キー局名」「地元局名」のように、他の列の複数の行をまたぐような項目については、「<th rowspan="2">…</th>」や「<td rowspan="2">…</td>」などのようにして、またぐ行数をrowspan属性によって表します。この場合、またがれることによって減ってしまう個数分だけ、またがれる相手側の行のコマ数を減らす必要があります。

項目大見出し「チャンネル番号」のように、他の行の複数の列をまたぐ場合は「<th colspan="2">…</th>」や「<td colspan="2">…</td>」のようにして、またぐ列数をcolspan属性によって表します。この場合、またぐことによって減ってしまう個数分だけ、当該行のコマ数を減らす必要があります。

では、上の表のマークづけがどうなっているかをご覧下さい。

<table border="2">
<caption>キー局の番組が地元局のどのチャンネル番号で見られるか</caption>
<tr>
<th rowspan="2">キー局名</th><th rowspan="2">地元局名</th><th colspan="2">チャンネル番号</th>
</tr> <tr>
<th>仙台地区</th><th>鳴子地区</th>
</tr>
<tr>
<th>TBS</th><td>東北放送</td><td>1</td><td>9</td>
</tr>
…以下略…
</table>


HTMLの表について、詳しくはHTML 4仕様11.1以下をご覧ください。

目次/詳細目次

まず1つ作ってみよう

色を変えてみたりする

HTMLの基本的な要素

ファイル名とリンク

画像などをページに貼り付ける

ページレイアウト

リストと表

フォームとスクリプト

HTML化する文章と文字

Web用の文章の組み立てを考える

HTMLで表せない型や要素

ドキュメントオブジェクトとDynamic HTML

Thanks a lot for visits since April 13, 1999.