トップ > インターネット > ホームページ作成・素材 > HTMLの基礎−タグを覚えてウェブページを作ろう!−

ホームページはHTMLタグの知識とテキストエディタさえあれば作成できます。またタグを理解していればサイトの細かい部分まで手が届きます。でも、わからない・・そんな方にお送りする初心者向けのHTMLタグ講座「HTMLの基礎」。

RSS


メルマガの登録・解除

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。



HTMLの基礎 Vol.46 テーブルのヘッダ・フッタ・ボディ(thead・tfoot・tbody)

発行日:5/13

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

    HTMLの基礎 −タグを覚えてウェブページを作ろう!−

      2005/05/13(Fri) Vol.46       執筆:ykr
              http://ykr.main.jp/html/index.html

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

   1.テーブルのヘッダ <thead>

   2.テーブルのフッタ <tfoot>

   3.テーブルのボディ <tbody>

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   


  ようやく壊れていたお腹も回復し、なんとか復活致しました。やはり今回
  は食中毒だったようで、熱まで出してしまう始末。さすがの私も病院に行
  く事を考えましたが(救急)、そう思い始めた頃から回復してきたので止
  めました。

  さて今回は<thead>と<tfoot>と<tbody>です。なんとHTML4.01のタグはこれ
  で最後になります。それでは今回も最後までお付き合い宜しくお願いいた
  しますね。


  ※注意  HTMLのバージョンは4.01です。
       発刊時点で非推奨とされてるものも掲載しています。
       表示確認しているブラウザは、WinIE6、WinNN7、MacIE5.2
       MacNN7です。その他のブラウザでの表示は未確認ですので
       意図したとおりにならないことがあります。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


1.テーブルのヘッダ <thead>

  テーブルの構造はそれぞれヘッダー部分、フッター部分、ボディ部分に分
  ける事ができます。<thead>〜</thead>に囲まれたテーブルのセルはヘッダ
  ーに当たります。<thead>は1つのテーブルに付き、1つしか配置すること
  ができません。


----------------------------------------------------------------------


2.テーブルのフッタ <tfoot>

  <tfoot>〜</tfoot>に囲まれたセルはフッターに当たります。<tfoot>は1
  つのテーブルに付き、1つしか配置することができません。


----------------------------------------------------------------------


3.テーブルのボディ <tbody>

  <tbody>〜</tbody>に囲まれたセルはテーブルのボディに当たります。
  <thead>や<tfoot>が1つのテーブルにつき1つしか配置できないのに対し
  、<tbody>は複数配置することができます。


----------------------------------------------------------------------

  これらのタグは、テーブルの行をグループ化する為に使用します。
  <thead>や<tfoot>、<tbody>の間に記述された<tr>〜</tr>はグループ化さ
  れ、スタイルシートや属性などをまとめて適用させる事ができます。

  しかし、これらのタグをテーブルに適用させる場合・・

  1.<thead><tr>〜</tr></thead> (ヘッダ部分)

  2.<tfoot><tr>〜</tr></tfoot> (フッタ部分)

  3.<tbody><tr>〜</tr></tbody> (ボディ部分)

  の順に記述する必要があります。
  通常テーブルを記述する際に、本体部分に当たるボディと、フッタに当た
  る部分を逆に書く必要があるのです。

  書く順序は逆でもブラウザでは、ヘッダ・ボディ・フッタの順で表示され
  ます。しかしこれらのタグに対応していないブラウザで閲覧した場合、記
  述した順序のまま(ヘッダ・フッタ・ボディ)表示されてしまいます。


----------------------------------------------------------------------


 ■<table border="1" width="500">
  <thead bgcolor="#ccccff">
  <tr><th>ヘッダ</th><th>ヘッダ部分に当たります。</th></tr>
  </thead>

  <tfoot bgcolor="#ffcccc">
  <tr><td>フッタ</td><td>フッタ部分に当たります。</td></tr>
  </tfoot>

  <tbody>
  <tr><td>ボディ</td><td>ボディ部分に当たります。</td></tr>
  <tr><td>ボディ</td><td>ボディ部分に当たります。</td></tr>
  </tbody>
  </table>


  上記の例を見るとわかるように、テーブルのボディ部分はフッタの後に記
  述されています。通常ブラウザでは、ヘッダ・ボディ・フッタの順できち
  んと表示されますが、未対応ブラウザではヘッダ・フッタ・ボディという
  ように記述したまま表示されてしまうようです。

  グループ化されたセルは行ごとに属性やスタイルシートを適用させる事が
  できます。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


  それでは、いつもと同じ手順でHTML文書を作成して表示を確かめて
  みましょう。面倒な方は前回の続きに上書きしても良いでしょう。


----------------------------------------------------------------------


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>テーブルのヘッダ・ボディ・フッタ</title>
</head>

<body>
<h1>テーブルのヘッダ・ボディ・フッタ</h1>
<hr>
<h2>テーブルのヘッダ・ボディ・フッタを記述する</h2>

<table border="1" width="500">
<thead bgcolor="#ccccff">
<tr><th>ヘッダ</th><th>ヘッダ部分に当たります。</th></tr>
</thead>
<tfoot bgcolor="#ffcccc">
<tr><td>フッタ</td><td>フッタ部分に当たります。</td></tr>
</tfoot>
<tbody>
<tr><td>ボディ</td><td>ボディ部分に当たります。</td></tr>
<tr><td>ボディ</td><td>ボディ部分に当たります。</td></tr>
</tbody>
</table>

<p>
上の説明で記述したものに記述を加え、そのまま例に持ってきました。
</p>
</body>
</html>


----------------------------------------------------------------------


  さて、記述できたらファイルを保存します。
  前回のファイルに追加したという方は、上書き保存か名前をつけて、新
  しく保存して下さい。拡張子は「.html」です。


----------------------------------------------------------------------


 ■<thead bgcolor="#ccccff">
  <tr><th>ヘッダ</th><th>ヘッダ部分に当たります。</th></tr>
  </thead>

  テーブルのヘッダです。この行に bgcolor="#ccccff" を指定して、ヘ
  ッダの行全体に背景色を設定しています。


 ■<tfoot bgcolor="#ffcccc">
  <tr><td>フッタ</td><td>フッタ部分に当たります。</td></tr>
  </tfoot>

  テーブルのフッタです。ブラウザでの閲覧時には一番下に表示する行です
  が、本体部分に当たるボディよりも先に記述する必要があります。この行
  には bgcolor="#ffcccc" を記述して背景色を設定しています。


 ■<tbody>
  <tr><td>ボディ</td><td>ボディ部分に当たります。</td></tr>
  <tr><td>ボディ</td><td>ボディ部分に当たります。</td></tr>
  </tbody>

  テーブルのボディです。ブラウザでの閲覧時、テーブルの本体部分に当た
  る行ですが、フッタの後に記述する必要があります。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


来週は・・・

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

   1.特殊文字について

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

(予告なく変更する事があります)


■ 雑記 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


  今回も最後まで付き合ってくださった方、お疲れ様でした。
  ようやく今回でHTML4.01のタグはすべて紹介し終えました。この後どうし
  ようかと考えていましたが、まだ書くべき事がいくつか残っているので、
  これらをすべてし終えたら、後を考えることにします。

  皆さんゴールデンウィークはどこかに出かけられたのでしょうか?私はた
  いして遠出はしませんでした。(・・というかお腹壊してできませんでし
  た(泣))食べ物の消費期限には気をつけましょう。

  さて、次回は特殊文字について説明します。
  では次回のメルマガもどうぞ宜しくお願いいたします。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

■■■「HTMLの基礎」姉妹サイトです。よろしくお願いします。■■■■

■■■「全部まるごとスタイルシート」
■   http://ykr414.com/css/
■   スタイルシート辞典です。プロパティごと、または目的ごとに引
■   け、ブラウザの対応状況なども掲載しています。
■   HTMLに加える事で、より細かいレイアウトの指定が可能に。
■   コピーペーストするだけで利用できるテンプレートのページも。

■■■「コマンドプロンプトを使ってみよう!」
■   http://ykr414.com/dos/
■   コマンドプロンプトとは何かから始まり、バッチファイルの作成
■   法や、コマンド別・目的別に引けるコマンド辞典。
■   初心者でもわかるよう細かく説明。

■■■「伸び縮みマークアップ言語 XML」
■   http://ykr414.com/xml/
■   SGMLのサブセットであるXMLは、ネット上で扱うデータを
■   記述するためのデータフォーマットで、柔軟性のある言語構造を
■   持っており、プログラムで自在にデータを情報処理できます。そ
■   のXMLを実際に文書を作成しながら解説。随時追加更新。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


・MAKERS     http://ykr414.net/
         ダイエットグッズ、美味しいもの、かわいいもの
         セレクトショップ。ちょっと珍しいグッズ・便利な
         サービスなどの情報も掲載。
         コラムなどのコンテンツもあります。

・YKR GALLERY   http://ykr414.com/gallery/
         CG、また実際に描いた絵を紹介するギャラリー。
         趣味で運営の為かなり更新が遅め。


*――*――*――*――*――*――*――*――*――*――*――*――*――*――*
  Auther       ykr
  Mail         ykr414@yahoo.co.jp
  URL          http://ykr.main.jp/html/index.html
  Copyright    (C)2004 ykr414. All rights reserved.
  Attention    掲載記事の無断転載を禁じます
*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

最新の記事

ブックマークに登録する

TwitterでつぶやくLismeトピックスに追加するdel.icio.usに追加Buzzurlにブックマークニフティクリップに追加Yahoo!ブックマークに登録記事をEvernoteへクリップ
My Yahoo!に追加Add to Google

規約に同意してこのメルマガに登録/解除する

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。


この記事へのコメント

コメントを書く


上の画像で表示されている文字を半角英数で入力してください。

※コメントの内容はこのページに公開されます。発行者さんだけが閲覧できるものではありません。
コメントの投稿時は投稿者規約への同意が必要です。

  1. コメントはありません。

このメルマガもおすすめ

  1. @(あっと)驚く!エクセル好きルアップ  

    最終発行日:
    2011/05/26
    読者数:
    4068人

    エクセル(Excel)の基礎から裏ワザまで... D-UP発行のマガジンは、1問1答の形式、詳細な解説付きで配信。さらに連動した懸賞サービスもあり、スキルとプレゼントを同時にゲット。映画情報もあるよ

  2. これ知ってます?Wordの小ワザ&便利ワザ

    最終発行日:
    2011/05/26
    読者数:
    4682人

    D-UPが送る、ほほー!っと納得ワード(Word)の小ワザ&便利ワザをクイズ形式で楽しく学んでいきます。知ってて損することはありません。あなたの文章にアクセントをつけてみませんか?懸賞のチャンスもWでお得。

  3. 全部フリーソフト!!

    最終発行日:
    2014/02/26
    読者数:
    4881人

    ネット上にはこんなに便利なソフトがいっぱい。仕事にも、遊びにも、あると絶対にお得で楽しいソフトを1つずつご紹介します。

  4. 高橋浩子の日本一“お気楽”なパソコンマガジン

    最終発行日:
    2017/04/23
    読者数:
    1129人

    「クスッと笑えてタメになる」をモットーとするテクニカルライター高橋浩子が魂を込めてお届けする週刊メルマガ。パソコン講座を中心に、便利ネタやおすすめサイトもご紹介。とにもかくにも、“お気楽”に楽しめる異色のエンターテイメントマガジンである。

  5. C#プログラミングレッスン

    最終発行日:
    2017/03/04
    読者数:
    972人

    C#での .NETプログラミングを易しく丁寧に解説するメールマガジンです。「C#プログラミング・レッスン」で、.NETプログラミングをマスターしましょう。

発行者プロフィール

過去の発行記事