勝手にHTML4.0講座 - 表
1.リストの概説
HTMLでは、リストとして表現するために幾つかの方式が用意されています。
どのリスト方式であっても、1つ以上のリスト項目が含まれていなければなりません。
またリストは入れ子にすることもできますし、他方式のリストと組み合わせて使うこともできます。
リスト方式には、次の3つがあります。
順不同のリストは、UL要素を用いて次のように記されています。
番号つきのリストは、OL要素によって記されます。
- 粉末状の材料を、完全に混ぜ合わせます。
- 液状の材料を加えます。
- 10分間撹拌します。
- 300度で1時間焼きます。
定義リストは、DL要素によって記されます。
- 低価格
- 新バージョンは、旧バージョンより大幅に値下げしました!
- 簡単
- より操作を易しくしました!
- お子さまにも安全
- お子さまだけが部屋にいる時でも、お子さまを傷つけるようなことはありません（保証の限りではありませんが）
2.<UL><OL><LI>要素
(UL,OL)
開始タグ: 必要
終了タグ: 必要
(LI)
開始タグ: 必要
終了タグ: 省略可能
| 属性 = 属性値 | 説明 |
| type = スタイル | リスト項目の目印の形式を指定します。[非推奨] |
| start = 数字 | OL要素のみ。順序づけリストの最初の番号を指定します。[非推奨] |
| value = 数字 | LI要素のみ。リスト項目が何番目であるかを指定します。[非推奨] |
| compact | リストがなるべく狭い面積で表示されます[非推奨] |
| 内在イベント | onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | lang , dir , id , class , style , title |
どちらの方式のリスト要素も、LI要素によってリスト項目を指定します。
基本的なリスト構造の例を下に挙げます。
<UL>
<LI> ... 第1項 ...
<LI> ... 第2項 ...
...
</UL>
番号付きリストは、value属性により番号を指定することが可能です。
<OL>
<LI value="30"> 左記の指定でこの項の番号は30番になります。
<LI value="40"> 左記の指定でこの項の番号は40番になります。
<LI> そしてこの項目の番号は41番になります。
</OL>
3.<DL><DT><DD>要素
(DL)
開始タグ: 必要
終了タグ: 必要
(DT,DD)
開始タグ: 必要
終了タグ: 省略可能
| 属性 = 属性値 | 説明 |
| 内在イベント | onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | lang , dir , id , class , style , title |
定義リストは、リスト項目が二つの部分から成り立っているところが他の方式と違います。
定義部分は DT要素で、叙述部分は DD要素で記述されます。
<DL>
<DT>Dweeb
<DD>young excitable person who may mature into a Nerd or Geek
<DT>Cracker
<DD>hacker on the Internet
<DT>Nerd ナード
<DD>male so into the Net that he forgets his wife's birthday
</DL>
4.<DIR><MENU>要素[非推奨]
開始タグ: 必要
終了タグ: 必要
| 属性 = 属性値 | 説明 |
| 内在イベント | onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | lang , dir , id , class , style , title |
DIR要素は各項目を1行複数項目で、格子状に掲げるものです。
MENU要素は1行1項目という形で掲げます。
実際のところ、DIR要素やMENU要素をUL要素のリスト表示と同じ形式で表示するブラウザもあります。
DIR要素と MENU要素の代わりにUL要素を使ったほうが良いです。
5.テーブル概説
HTMLのテーブル機能を使うと、文章、画像、リンクなどのデータを行・列に区画整理された表で表示することが可能になります。
下記に主な機能を記します。
- 表題を一個つけることができます。(CAPTION要素)
- 音声出力などのために長い解説を付けることもできます。(summary属性)
- 各行は、頭部・本体・脚部に分けることができます。(THEAD要素,TFOOT要素,TBODY要素)
- 各列は、表の構造(列幅など)を定義することができます。(COLGROUP要素,COL要素)
- 他の行・列の複数のセル(一つのマス目)をまたぐように記述することもできます。
たとえば下のような表が作れます。
結合されたセルのある表の見本
| 平均 | 赤
目
|
|---|
| 体長 | 体重
|
|---|
| オス | 1.9 | 0.003 | 40%
|
|---|
| メス | 1.7 | 0.002 | 43%
|
|---|
6.<TABLE>要素
開始タグ: 必要
終了タグ: 必要
| 属性 = 属性値 | 説明 |
| summary = 文字列 | 音声出力などで、表の説明文を提供するためのものです。 |
| align = 配置コード | 表示するときに、水平方向での配置を指定します。[非推奨] |
| width = 長さ | 表の横幅を指定します。 |
| bgcolor = 色 | テーブルの背景色を指定します。[非推奨] |
| frame = 枠線コード | 表の枠線の、どの部分を表示させるかを指定します。 |
| rules = 罫線コード | 表のセルを、どのように区切るのかを指定します。 |
| border = ピクセル | 枠の幅のピクセル数を指定します。 |
| cellspacing = 長さ | セル同士の感覚を指定します。 |
| cellpadding = 長さ | セルと枠の間の距離を指定します。 |
| 内在イベント | onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | lang , dir , id , class , style , title |
TABLE要素には、表の表題、行、内容、形式を指定する他のすべての要素が含まれます。
テーブルは、作り方によっては表のデータ全部を受け取ってからではなく、逐次表示できるようになっています。
そのためにはつぎの二つを守らなければなりません。
表は普通、左から右へ表示されますが、dir属性を指定すると右から左へ表示することもできます。
<TABLE dir="RTL">
...表の本体...
</TABLE>
7.<CAPTION>要素
開始タグ: 必要
終了タグ: 必要
| 属性 = 属性値 | 説明 |
| align = 配置コード | 表示するときに、水平方向での配置を指定します。[非推奨] |
| 内在イベント | onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | lang , dir , id , class , style , title |
CAPTION要素は、表に表題をつけるためにあります。
CAPTION要素はTABLE要素の開始タグの直後に置かれなければなりません。
また1つのTABLE要素の中には1つのCAPTION要素しか置くことができません。
8.<THEAD><TFOOT><TBODY>要素
開始タグ: 必要
終了タグ: 省略可能
| 属性 = 属性値 | 説明 |
| align = 配置コード | 表示するときに、水平方向での配置を指定します。[非推奨] |
| valign = 配置コード | セル内での垂直位置を指定します。 |
| char = 文字 | セル内の文字列の桁揃えするための基準文字を指定します。 |
| charoff = 長さ | char属性が指定されたとき、その文字をセルの端からどの程度移動した位置に表示するかを指定します。 |
| 内在イベント | onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | lang , dir , id , class , style , title |
表を構成する各行は、THEAD、TFOOT、TBODY要素により、頭部、脚部、本体の3グループに分けることができます。
これによりユーザエージェントが頭部と脚部を固定して本体部分をスクロールするということが可能になります。
頭部と脚部には [構造上の意味や表示上の注意点など] 列に関する情報を記し、本体には実際のデータを記します。
THEAD、TFOOT、TBODY要素の各々に含まれる列の数は一致していなければなりません。
<TABLE>
<THEAD><TR><TD> ...頭部の行...</THEAD>
<TFOOT><TR><TD> ...脚部の行...</TFOOT>
<TBODY>
<TR><TD> ...本体の第1部第1行...
<TR><TD> ...本体の第1部第2行...
</TBODY>
<TBODY>
<TR><TD> ...本体の第2部第1行...
<TR><TD> ...本体の第2部第2行...
<TR><TD> ...本体の第2部第3行...
</TBODY>
</TABLE>
9.<COLGROUP><COL>要素
(COLGROUP)
開始タグ: 必要
終了タグ: 省略可能
(COL)
開始タグ: 必要
終了タグ: なし
| 属性 = 属性値 | 説明 |
| span = 数字 | 列グループ中の列の個数を表します。1以上の整数で記します。 |
| width = 長さ | 列グループ中の、各々の横幅を指定します。[0*]を入れると、最小の列幅になります。 |
| align = 配置コード | 表示するときに、水平方向での配置を指定します。[非推奨] |
| valign = 配置コード | セル内での垂直位置を指定します。 |
| char = 文字 | セル内の文字列の桁揃えするための基準文字を指定します。 |
| charoff = 長さ | char属性が指定されたとき、その文字をセルの端からどの程度移動した位置に表示するかを指定します。 |
| 内在イベント | onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | lang , dir , id , class , style , title |
COLGROUP要素は、列のグループ構造を明示的に表します。
span属性とwidth属性によって、列幅と列幅を指定する列数を指定することができます。
COL要素は、単に複数の列の間で属性値を共有させるためだけに使われるものです。
COL要素は空要素であり、内容はありません。単に属性値を書き込むだけの存在です。
また、COLGROUP要素の内側にあっても外側にあっても構いません。
下の例は、二列目までは横幅50ピクセルで表示します。
<TABLE border="1">
<COLGROUP span="2" width="50">
<TR><TD>1<TD>2<TD>3
<TR><TD>2<TD>4<TD>6
<TR><TD>3<TD>6<TD>9
</TABLE>
10.<TR>要素
開始タグ: 必要
終了タグ: 省略可能
| 属性 = 属性値 | 説明 |
| bgcolor = 色 | テーブルの背景色を指定します。[非推奨] |
| align = 配置コード | 表示するときに、水平方向での配置を指定します。[非推奨] |
| valign = 配置コード | セル内での垂直位置を指定します。 |
| char = 文字 | セル内の文字列の桁揃えするための基準文字を指定します。 |
| charoff = 長さ | char属性が指定されたとき、その文字をセルの端からどの程度移動した位置に表示するかを指定します。 |
| 内在イベント | onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | lang , dir , id , class , style , title |
TR要素は、1行を1単位とするコンテナのような役割を果たします。
次の例には、TR要素で、3つの行が指定されています。
<TABLE border="1">
<CAPTION>CAPTION要素</CAPTION>
<TR> ...1行目...
<TR> ...2行目...
<TR> ...3行目...
</TABLE>
11.<TH><TD>要素
開始タグ: 必要
終了タグ: 省略可能
| 属性 = 属性値 | 説明 |
| headers = id | そのセルにとっての見出し情報の所在をid属性値で指定します。 |
| scope = スコープ名 | headers属性の代わりに用いて、表定義を簡単にする物です。 |
| abbr = 文字列 | セルの内容の省略形を指定します。必要に応じて使われます。 |
| axis = カテゴリー名 | セルを意味づけして、データ配列の組み替えを可能にします。必要に応じて使われます。 |
| rowspan = 数字 | セルが、何行分の高さをまたぐかを指定します。[0]を指定すると、最終行までまたぎます。 |
| colspan = 数字 | セルが、何列分の幅をまたぐかを指定します。[0]を指定すると、最終列までまたぎます。 |
| nowrap | セル内のテキストを自動改行しないようにします。[非推奨] |
| width = ピクセル数 | セルの横幅を指定します。[非推奨] |
| height = ピクセル数 | セルの高さを指定します。[非推奨] |
| bgcolor = 色 | セルの背景色を指定します。[非推奨] |
| align = 配置コード | 表示するときに、水平方向での配置を指定します。[非推奨] |
| valign = 配置コード | セル内での垂直位置を指定します。 |
| char = 文字 | セル内の文字列の桁揃えするための基準文字を指定します。 |
| charoff = 長さ | char属性が指定されたとき、その文字をセルの端からどの程度移動した位置に表示するかを指定します。 |
| 内在イベント | onclick , ondbclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | lang , dir , id , class , style , title |
個々のセルには、見出し情報と実際のデータの2種類の情報が区別して記入され得ます。
TH要素は、そのセルが見出し情報を記したものだということを表します。
TH要素の内容が表示しきれないなどの場合、abbr属性の値が表示される可能性があります。
TD要素は実際のデータの入れ物です。セルは空でも構いません。
次の例には4つの列がありますが、各列について見出し列が指定されています。
<TABLE>
<CAPTION>各評議員のコーヒー消費</CAPTION>
<TR>
<TH>評議員</TH>
<TH>カップ数</TH>
<TH>コーヒーの種類</TH>
<TH>砂糖を入れるか</TH>
<TR>
<TD>T. Sexton</TD>
<TD>10</TD>
<TD>エスプレッソ</TD>
<TD>入れない</TD>
<TR>
<TD>J. Dinnen</TD>
<TD>5</TD>
<TD>カフェイン抜き</TD>
<TD>入れる</TD>
</TABLE>
セルは他の行の複数の行・列にまたがる大きさに指定される場合もあります。
またぐ行・列の個数は、rowspan属性で行数が、colspan属性で列数が指定されます。