第9章 表のタグと要素
前回、表(「<table>タグ」)を使ってみました。今回はもっと詳しくやっていきます。
ではいきなり、複数の行と列を持った表を紹介。
今回は、3行2列の表を作りたいと思います。
<html> <head> <title>表を使ってみる PART2</title> </head> <body> <table border="1"> <tr> <td>1行目1列目</td> <td>1行目2列目</td> </tr> <tr> <td>2行目1列目</td> <td>2行目2列目</td> </tr> <tr> <td>3行目1列目</td> <td>3行目2列目</td> </tr> </table> </body> </html>
これをHTMLファイルとして保存して、そのあと、そのファイルを開いてみます。
どうなりましたか?
下の表のように表示されたら成功です。
1行目1列目 | 1行目2列目 |
2行目1列目 | 2行目2列目 |
3行目1列目 | 3行目2列目 |
詳しい説明の前に、どちらが「行」でどちらが「列」だか分かりますか?
ここで簡単に解説しておきます。
行は縦方向に増えていきます。
1行目 |
2行目 |
3行目 |
4行目 |
5行目 |
・ |
・ |
・ |
列は横方向に増えていきます。
1列目 | 2列目 | 3列目 | 4列目 | 5列目 | ・ | ・ | ・ |
本当に簡単になってしまいましたが、こんな感じです。
では、本題のタグについて説明します。
HTMLでは、行を「<tr>タグ」、列を「<td>タグ」で表します。
そして、「<td>タグ」を「<tr>タグ」ではさむような形になります。
最後に、「<tr>タグ」や「<td>タグ」のまとまりを「<table>タグ」ではさむ形になります。
そのため、行だけを表すなら下のようになります。
<table> <tr> <td>1行目</td> </tr> <tr> <td>2行目</td> </tr> <tr> <td>3行目</td> </tr> </table>
もし、列だけを表すなら下のようになります。
<table> <tr> <td>1列目</td> <td>2列目</td> <td>3列目</td> </tr> </table>
表は、いろいろな属性を設定することができますが、設定できるのは、「<td>タグ」と「<table>タグ」のみです。
ちなみに、「<td>タグ」に設定すると「表の各セル」に適用され、「<table>タグ」に設定すると「表全体」に適用されます。
どんな属性が設定できるかなどの詳細は、タグ辞典に載せる予定です。
(都合でまだ製作できていませんが...本当にすみません)
← 前へ | 次へ →
カテゴリー:HTML編
2011/09/11 17:39:15 更新