パソコンQ&A

テーブルは通常では次のような構成で使います。
<table>
  <tr>
    <td>〜〜</td>
  </tr>
</table>

<table>は、『ここはテーブルですよ』という意味です。
<tr>は、『行』を表します。（tableタグの中で使います）
<td>は、『列』を表します。（trタグの中で使います）

<td>の代わりに<th>を使うこともできます。
<th>は『見出し』を表します。（『Totemo H』の略ではなくて、『Table Header』の略です）
『見出し』の意味なので、ほとんどのブラウザでは太字で中央揃えになります。
[ソース]

天気	説明
晴れ	太陽が見えます
曇り	太陽が雲で隠れてます
雨	水もしたたります

tdをthにすると
[ソース]

天気	説明
晴れ	太陽が見えます
曇り	太陽が雲で隠れてます
雨	水もしたたります

これだと見づらいので枠線（ボーダー）を付けてみましょう。
枠線の指定はborder="【太さ】"です。
[ソース]

天気	説明
晴れ	太陽が見えます
曇り	太陽が雲で隠れてます
雨	水もしたたります

tdをthにすると
[ソース]

天気	説明
晴れ	太陽が見えます
曇り	太陽が雲で隠れてます
雨	水もしたたります

必ず
<table>
  <tr>
    <td>
      〜〜
    </td>
  </tr>
</table>
の親子関係になっていると思っている人もいますが、実はHTML4.0の仕様では<tbody>が省略されているとみなされるので、
<table>
  <tbody>
    <tr>
      <td>
        〜〜
      </td>
    </tr>
  </tbody>
</table>
の親子関係なのです。
<tbody>ってなんでしょう？

<tbody>は『テーブルのボディ部分（本文）』という意味です。

じゃあ<tbody>以外にもあるの？

<tbody>以外に<thead>、<tfoot>があります。
[ソース]

タグ名	説明
パソコンＱ＆Ａ
<thead>	ヘッダー行（見出しなど）
<tbody>	ボディー行（本文など）
<tfoot>	フッター行（補足など）

仕様では
<thead>〜</thead>
<tfoot>〜</tfoot>
<tbody>〜</tbody>
の順序で書くように定義されてます。
これはヘッダーとフッターを先読みするため（<tbody>をスクロールさせることがあるから）ですが、 Netscape Navigator4などでは <thead>、<tfoot>、<tbody>タグに対応していないので、 記述の順番に表示します。注意してください。
またこの問題が、これらのタグの認知度の低い理由と思います。

HTML4.0では<tbody>が省略されているとされますが、XHTML1.0では<table>の次に<tr>を書くことが認められたため、 <tbody>がない場合は、
そのまま
<table>
  <tr>
    <td>
      〜〜
    </td>
  </tr>
</table>
の親子関係となります。

この違いによる弊害は、デザインでは特にないのですが、プログラムなどJavaScriptやDOMで、テーブルの要素に関係ある場合には問題が起こることがあります。
ただInternet Explorer 6.0やNetscape 7.0などのブラウザでは、XHTMLの宣言をしても、
<table>
  <tbody>
    <tr>
      <td>
        〜〜
      </td>
    </tr>
  </tbody>
</table>
の親子関係とみなしているようです。

DOM（Document Object Model）

注意
<tbody>などで分かれているといっても、列の数や幅は影響します。
<thead>、<tfoot>、<tbody>で列の数を統一しないといけません。

△上に戻る

ソース

簡単なテーブル

△上に戻る

thにしてみた

△上に戻る

borderを付けてみた

△上に戻る

thにしてみた

△上に戻る

thead、tbody、tfootを使う

△上に戻る