ホーム > HTML講座 > HTML編 > 第9章 表のタグと要素

第9章 表のタグと要素

登録タグ: HTML タグ


前回、表(「<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 更新

Powered by AkiWiki. Wiki syntax is based on PukiWiki, and extends it.

スポンサード リンク

メニュー

HTML講座

HSP講座

Inkscape講座

スポンサード リンク