• [まろぐ]
  • [簡単で正しいHTMLの書き方]
  • [Moses奮闘記]
  • [プレゼンは引き算の美学です]
[まろぐ] [簡単で正しいHTMLの書き方] [Moses奮闘記] [プレゼンは引き算の美学です]

表を書く

<TABLE> <CAPTION> <TBODY> <TR> <TH> <TD>

HTML3.2で新しく追加された表ですが、実に簡単です。恐れることはありません。例えば、

ハイブリッド車の比較
プリウス エンジンを止めたまま、モーターだけで走り出せます。
インサイト エンジンをかけないと、走り出せません。

を書くには、

<TABLE>
<CAPTION>ハイブリッド車の比較</CAPTION>
<TBODY>
<TR><TH>プリウス</TH><TD>エンジンを止めたまま、モーダーだけで走り出せます。</TD></TR>
<TR><TH>インサイト</TH><TD>エンジンをかけないと、走り出せません。</TD></TR>
</TBODY>
</TABLE>

と書きます。では、ひとつひとつ見ていきましょうか。

  1. まず、表全体を表す<TABLE>があります。
  2. 表全体の中に、表の名前を表す<CAPTION>と、表本体を表す<TBODY>があります。ただし、<CAPTION>は書かないことが多いです。
  3. 表本体の中に、表の行(Table Raw)を表す<TR>があります。
  4. 各行の中に、見出し(Table Header)を表す<TH>か、値(Table Data)を表す<TD>があります。

基本は、表の中に行があり、行の中には見出しか値が入る。たった、それだけのことです。さて、ここまでの話をツリー図で見てみると、

[ツリー図]

になります。簡単ですね。もちろん、もっと複雑な表を作ることもできますが、表の複雑さに応じて、タグの使い方も複雑になります。また、このページの表は、CSSを使ってデザインを変更しているので、素のHTMLだけでは、このような見た目にはなりません。

ところで、表というのはレイアウトがあってこそ、初めて意味を成すものなので、SGMLの世界では表を表すのにとても苦労したそうです。このあたりにもSGMLの矛盾がちらほら。

では、次はクリッカブル・マップの作り方です。

« 前 | 目次 | 次 »

投稿情報: 10:41 | 個別ページ

|

検索

基礎編

  • HTMLとは?
  • まずは骨格を作る
  • タイトルを付ける
  • 見出しを付ける
  • 本文を書く
  • リストを書く
  • 番号のないリスト
  • 番号の付いたリスト
  • 見出しの付いたリスト
  • 絵を入れる
  • ハイパー・リンクを付ける

中級編

  • 罫線を入れる
  • 文字を目立たせる
  • コメントを入れておく
  • 特殊な文字について
  • 表を書く
  • クリッカブル・マップを作る

上級編

  • HTMLのバージョンを明記する
  • 文字コードを明記する
  • HTMLの文法をチェックする

著作権

  • © 1995-2023, "Toda, Masalu", All Rights Reserved.
Powered by Typepad
  • 簡単で正しいHTMLの書き方 •
  • Powered by Typepad
上