テーブル(表)は、様々なデータをリストとして表示する際に頻繁に利用される。
かつてはテーブルによってレイアウトしていたケースもあったが、最近はスタイルシートによってデザインされる例が多くなっているので、この授業では、純粋に表としての機能の紹介にとどめる。
<table> … </table>
テーブルを作成するという宣言。
<caption> … </caption>
テーブルの枠外にキャプションを表示する。
<tr> … </tr>
table row(行)の略。
行を作成する場合に用いる。通常tableタグの次ぎにくる。
<th> … </th>
table headerの略。
一番最初のテーブルの項目に使われる。通常表の中で一階使われるが、複数使う場合もあるし、使わない場合もある。
<td> … </td>
table divisionの略。
列を作成する際に使用する。
必ず、tdはtrの中で使用される。
列を増やしたければ、複数tdタグを並べる。
サンプル
tableタグを使ったサンプルは以下の通り。
ボーダーは本来スタイルシートで書くものだが、ここでは便宜的に使用している。
インデントを忘れないこと。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <table border="1"> <caption>キャプション</caption> <tr> <th>ヘッダ1</th> <th>ヘッダ2</th> </tr> <tr> <td>サンプル1</td> <td>サンプル2</td> </tr> <tr> <td>サンプル3</td> <td>サンプル4</td> </tr> </table> |
結果
ヘッダ1 | ヘッダ2 |
---|---|
サンプル1 | サンプル2 |
サンプル3 | サンプル4 |
列の連結
colspanを用いると、列を連結することができる。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <table border="1"> <tr> <th>ヘッダ1</th> <th>ヘッダ2</th> </tr> <tr> <td colspan="2">サンプル1</td> </tr> <tr> <td>サンプル2</td> <td>サンプル3</td> </tr> </table> |
結果
ヘッダ1 | ヘッダ2 |
---|---|
サンプル1 | |
サンプル2 | サンプル3 |
行の連結
rowspanを用いると、行を連結することができる。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <table border="1"> <tr> <th>ヘッダ1</th> <th>ヘッダ2</th> </tr> <tr> <td rowspan="2">サンプル1</td> <td>サンプル2</td> </tr> <tr> <td>サンプル3</td> </tr> </table> |
結果
ヘッダ1 | ヘッダ2 |
---|---|
サンプル1 | サンプル2 |
サンプル3 |