基盤的情報処理論

li要素にul要素やol要素を含むことで、リストの中でリストを作ることができます。このような状態を、「リストを入れ子にする」と呼びます。

表を作るには、table要素を使います。

ところで表は、

• 表の中のひとつひとつの項目である 「セル (cell)」
• セルの横方向のまとまりである 「行 (row)」
• セルの縦方向のまとまりである 「列 (column)」

…から構成されます。

表は、次のような順序で書いて行きます。

1. まず、表全体を示す table要素を書きます。
   
   
   
2. 必要があれば、caption要素を用いて表にタイトル (キャプション)をつけます。caption要素は、table要素の開始タグの直後に記述します。
   
   
   
3. 次にtable要素の内容として、行 (table row)を定義する tr要素を書き、一行目を指定します。
   
   
   
4. tr要素の内容として、その行の中にある各セルを、見出しセル (table header cell)を示す th要素か、通常の(データ)セル (table data cell)を示す td要素で、左側のセルから順に書きます。
   
   
   ↓
   
   
   
   
5. これで、タイトルと表の1行目ができましたので、まずは、Webブラウザで表示して確認してみます。この段階で保存してWebブラウザで表示すると下図のように表示されるはずです。
   

   表 (<table>、<tr>、<td>) は、タグの対応が崩れると想像も付かないところに表示されたりします。

6. 1行の記述が済んだら、次の行を新たな tr要素で指定し、 1行目と同じ要領で、左から順にセル(列要素)を書いていきます。 その際、完成した1行目をコピー＆ペーストしてから、各列の内容を書き換えるのが、何もないところから書くより簡単です。(下図は、表の1行目を2行目のテンプレートとしてコピー＆ペーストしたところ。この時点では、1行目と2行目はまったく同じ物です。)
   
   
   
7. 上記の作業を必要な行の数だけ繰り返せば、表の完成です。

table要素は、ブロックレベル要素でtr要素と後述するcaption要素以外を含むことはできず、一つ以上のtr要素を含む必要があります。

tr要素は、th要素とtd要素以外を含むことができず、一つ以上のth要素もしくはtd要素を含む必要があります。

th要素とtd要素は、ブロックレベル要素であり、インライン要素やテキストを含むことができ、更にブロックレベル要素も含むことができます。

td要素でセルを書くと、左寄せで表示されますが、td要素の代わりにth要素によりセルを書くと、セル中で中央揃え(センタリング)され、太文字になります。

そのため、通常表題を書く1行目や1列目では、多くの場合th要素を使います。

HTMLは、文書の構造を決める記述言語なので、デザインについては取り扱わないのが基本なのですが、歴史的な経緯から、table要素に関してその一部は HTMLでデザインする場合が多いので、少しだけここで取り上げます。詳細なデザインについては別の時間に学習します。

枠線の太さを決めます。値は「ピクセル値」で指定します。

枠線をなくすには、border属性の指定をしないか、border="0"とします。

セルの枠線どうしの間隔(セル間隔)を、cellspacing属性で、セルの枠線とセルの内容の間隔(セル内間隔)を、cellpadding属性で、それぞれ「ピクセル値」で指定します。