テーブルは日本語で言う”表”のことである。
一般的に、表は多数の文字や数をコマによって分けて長方形に並べたものである。
横並びのコマを行といい、上から順に、1行、2行・・・と数え、
一方縦並びのコマを列といい、左から順に、1列、2列・・・と数える。
コンピュータの世界ではコマではなくセル(cell。英語でコマの意。)という呼び方が一般的であり、
HTML言語にも使われているので、
以後はセルと呼ぶ。
| (1.1) | (1.2) | (1.3) |
| (2.1) | (2.2) | (2.3) |
テーブルは、基本的には table要素・tr要素・td要素の3つの要素によって構成され、
文字や数字だけでなく、画像やリンク、別のテーブルといったあらゆる要素をセルに置くことができる。
- <table>・・・</table>は、テーブルを作るための要素である。
テーブルを作りたい位置にこれを記述することで、「ここにテーブルを作りますよ。」ということを示し、その要素内にはセルを作るための
tr要素と td要素が含まれる。
table要素の属性では、テーブルの色や枠の太さといったテーブル全体の設定を行う。
- <td>・・・</td>は、セルを1つを作るための要素である。
td は table data の略で、要素内にはそのセルの内容を記述する。
td 要素の属性では、その1つのセルについての設定を行う。
- <tr>・・・</tr>は、
td要素を好きな数だけ要素内に含めることで、それらが同一の行にあることを指定する。
tr要素の属性では、要素内にある全ての td要素の設定を一括に設定する、つまり、
その行にある全てのセルについての設定を行う。
例えば、上の表は以下のようにして表すことができる。
<table border="1">
<tr>
<td>(1.1)</td><td>(1.2)</td><td>(1.3)</td>
</tr>
<tr>
<td>(2.1)</td><td>(2.2)</td><td>(2.3)</td>
</tr>
</table>
注意しなければならないのは、この例から分かるように、
td 要素は必ず tr 要素に含まれ、tr 要素は必ず td 要素に含まれるということだ。
1行しかないテーブルでも tr要素は必要であるし、
セルが1つだけしかないテーブルであっても、
<table> <tr> <td>(1.1)</td> </tr> </table>
といったように3つの要素が正しい順序で入れ子構造になっていなければならない。
※補足1:table要素内に含めることができる要素としては、tr 要素にも以下のようなものがあり、
これらは全て HTML4.x Strict DTD でも定義されている。ただ、
ブラウザ側が未対応であるかこれらを活かせるだけの機能がなかったり、
もしくは使う機会があまりなかったりするので、紹介は省略する。
<caption>、<th>、<thead>、<tbody>、<tfoot>、
<col>、<colgroup>
※補足2:td要素のcolspan属性を設定することで、横並びのセルを連結を行い、
rowspan属性を設定することで、縦並びのセルの連結を行うことができる。
属性値には、いくつのセルを連結するかを指定する。
<table border="1">
<tr><td>(1.1)</td><td colspan="2">(1.2) </td></tr>
<tr><td>(2.1)</td><td>(2.2)</td><td>(2.3)</td></tr>
</table>
<table border="1">
<tr><td>(1.1)</td><td rowspan="2">(1.2)</td><td>(1.3)</td></tr>
<tr><td>(2.1)</td><td>(2.3) </td></tr>
</table>
<table border="1">
<tr><td>(1.1)</td><td> (1.2) </td><td>(1.3)</td></tr>
<tr><td>(2.1)</td><td colspan="2" rowspan="2">(2.2)</td></tr>
<tr><td>(3.1) </td></tr>
</table>
↓ ブラウザで読み込むと…
| (1.1) | (1.2) |
| (2.1) | (2.2) | (2.3) |
| (1.1) | (1.2) | (1.3) |
| (2.1) | (2.3) |
| (1.1) | (1.2) | (1.3) |
| (2.1) | (2.2) |
| (3.1) |
|