HTML講座
トップページ > HTML講座 トップ > 第９章 表のタグと要素

第９章 表のタグと要素

前回、表（「<table>タグ」）を使ってみました。今回はもっと詳しくやっていきます。

ではいきなり、複数の行と列を持った表を紹介。
今回は、３行２列の表を作りたいと思います。

<html>
<head>
<title>表を使ってみる PART２</title>
</head>
<body>
<table border="1">
  <tr>
    <td>１行目１列目</td>
    <td>１行目２列目</td>
  </tr>
  <tr>
    <td>２行目１列目</td>
    <td>２行目２列目</td>
  </tr>
  <tr>
    <td>３行目１列目</td>
    <td>３行目２列目</td>
  </tr>
</table>
</body>
</html>

これをHTMLファイルとして保存して、そのあと、そのファイルを開いてみます。

どうなりましたか？
下の表のように表示されたら成功です。

１行目１列目 １行目２列目
２行目１列目 ２行目２列目
３行目１列目 ３行目２列目

詳しい説明の前に、どちらが「行」でどちらが「列」だか分かりますか？
ここで簡単に解説しておきます。

行は縦方向に増えていきます。

１行目
２行目
３行目
４行目

列は横方向に増えていきます。

１
列
目		 ２
列
目		 ３
列
目		 ４
列
目

本当に簡単になってしまいましたが、こんな感じです。

では、本題のタグについて説明します。

HTMLでは、行を「<tr>タグ」、列を「<td>タグ」で表します。
そして、「<td>タグ」を「<tr>タグ」ではさむような形になります。
最後に、「<tr>タグ」や「<td>タグ」のまとまりを「<table>タグ」ではさむ形になります。

そのため、行だけを表すなら下のようになります。

<table>
  <tr>
    <td>１行目</td>
  </tr>
  <tr>
    <td>２行目</td>
  </tr>
  <tr>
    <td>３行目</td>
  </tr>
</table>

もし、列だけを表すなら下のようになります。

<table>
  <tr>
    <td>１列目</td>
    <td>２列目</td>
    <td>３列目</td>
  </tr>
</table>

表は、いろいろな要素を設定することができますが、設定できるのは、「<td>タグ」と「<table>タグ」のみです。

ちなみに、「<td>タグ」に設定すると「表の各セル」に適用され、「<table>タグ」に設定すると「表全体」に適用されます。

どんな要素が設定できるかなどの詳細は、タグ辞典に載せる予定です。
（忙しくてまだ製作できていませんが．．．本当にすみません）




[ ← 前へ ] [ 戻る ] [ 次へ → ]

(C)2006 はむ / AHD