XHTMLについて 2

XHTMLのテーブル

テーブル(表)の設定

○学年期末テスト採点表
氏名 国語 数学 英語 合計 個人平均点 評価
科目平均点 66.3 78.8 73.8 218.8 - -
山田太郎 80 90 80 250 83.3 進級
川田花子 75 70 70 215 71.7 進級
草田一郎 60 75 65 200 66.7 補習授業
木田一美 50 80 80 210 70.0 進級

テーブル<table>の設定

表作成を定義します。(終了タグ必須)
視覚的方法でない方法で表現するソフト(音声表現ブラウザなど)で使用するための summary 属性(表の目的と仕組みを説明)記述が求められます。「 <table border="1" summary="期末テスト結果一覧表"> 」の形で記述しました。

キャプション(題名)の設定

テーブルに標題を表示させるために <caption> を記述します。(終了タグ必須)

テーブル ヘッド<thead>の設定

表の表示領域の一番上に表示され、tr 要素を従います。(終了タグ必須)

テーブル フット<tfoot>の設定

表の表示領域の一番下に表示され、tr 要素を従います。タグ記述では、中間部の<tbody>より先に<thead>に続いて記述します。(終了タグ必須)

テーブル ボデイ<tbody>の設定

表のボデイ部分を定義し、tr 要素を従います。
thead 要素や tfoot 要素がない場合には記入の必要はない。(終了タグ必須)

横列<tr>の設定

表の横列を定義します。(終了タグ必須)

ヘッダーセル<th>の設定

abbr属性の記述を必要とします。(終了タグ必須)

セル<td>の設定

セルとは、表の中にある1つのマス目のことです。<table>の中には1つ以上の<tr>を必要とします。また、表はセルの集合体なので、必ず最低1つ以上のセルが必要になり、<tr>の後に<td>と記述します。(終了タグ必須)


解説

rowspanとcolspan (関東地方東京都はrowspanでセルを下に繋ぐ。西日本はcolspanでセルを横に繋ぐ。

日本3大都市
東京 大阪 京都
第1の都市 第2の都市 第3の都市
東日本 西日本
関東地方
東京都
近畿地方 近畿地方
大阪市 京都市

まだ、小数の簡単なタグしか使用していませんが、ちなみに、このページの評価は91点でした。ー9点の減点はヤフーBBのコマーシャル埋め込みが</html>以降に記述されたための減点です。


上記採点の後、下記のように「トップページ目次」を書き換えて追加しました。

何故トップページの表を書き換えたかと言いますと、トップページの XHTML1.0 Strict 化を試みたところ「Another HTML-lint gateway」での採点が「ー190点」でした。原因は、表の59項目の記述に
<td width="147"><a href="url">●EXCEL関数総目次</a></td>
のような形で記述いたためです。「XHTML 1.0 Strict」では、「<td width="***">」は許されず、大幅な減点になりました。他に、MS 独自タグ[marquee](列車を走らす)も減点対象です。

批評では、「タグ<td>には、チェックしているHTMLのヴァージョンxhtmlではサポートされていないが、 他のヴァージョンHTML3.2、HTML4.0、HTML4.01、XHTML1.0 Transitional、XHTML1.0 Frameset、Mozilla でサポートされている属性 ”width ” が指定されています。
あまりこの警告が大量に出るようなら、DOCTYPE宣言が適切でない可能性があります。(即ちXHTML1.0 Transitionalに替えなさい。と言うことです。)」
そこで、このページを借りて「テーブル」の記述法を兼ねて、テストした訳です。

主な内容
利根町関係
利根町イラストマップ
町ホームページ・マップ
役場と筑波と利根川と
mid & mp3 音楽
大利根小唄 野口雨情作詞
利根町を歌うmid
町の祭の歌(MP3)
日本の心の歌(MID)
市町村合併問題
あの町この町背比べ
市町村合併問題
人物誌
利根川を替えた話
柳田国男と岡田竹松
赤松宗旦と利根川図志
一茶と利根町
栗林義長物語
利根町の歴史&由緒
利根町の歴史
町の神社仏閣由来
まちの昔ばなし
.
野鳥エリア
町で見られる野鳥
野鳥集1
野鳥集2
野鳥集3
写真集・他
写真集1
写真集2
弘前の花見
孫娘の見た日本
Flashアニメ集
つぶやき
.
IT一般
マルチメデア実習
HP作成キット
Word ツ-ルバ-考
Excel ツ-ルバ-考
ITサポートの会
Windoows 一般
ネットセキュリティ目次
個人情報のスパイ防止
ショ-トカットキ-目次
いろいろな設定

上の表の html 構図

  1. tableタグにsummary属性を付け、値を「トップの目次」としました。
  2. captionタグで「主な内容」とし、上下位置を示す属性を省略(自動的に上に)
  3. <tr></tr>タグは1組しか使用しません。即ち表の上では1行です。
  4. <td></td>タグを3組使用し、3列にし、色分けしました。
  5. <td>タグの内容説明に、定義型リストの「ブロックレベル・タグ」<dl><dt>を組み込みました。
    <dt>は辞書形の見出しタグです。
  6. インラインタグ<dd>数個を使い改行の>役目を果たさせました。
  7. <dd>には、別途、外部スタイルシートで赤色細線枠を設定してあります。

ちなみに、テーブル追加後の「Another HTML-lint gateway」での採点です。
チェックの結果は以下のとおりです。
http://www.geocities.jp/cxnpp630/x_table.html を XHTML1.0 Strict としてチェックしました。 1個のエラーがありました。このHTMLは 91点です。タグが 34種類 289組使われています。文字コードは Shift JIS のようです。
先頭の数字はエラーのおおまかな重要度を 0〜9 で示しています(減点数ではありません)。少ない数字は軽く、9 になるほど致命的です。
9: line 283: の後にまだ何かテキストがあります。 → 解説 242
(ー9点の減点はヤフーBBのコマーシャル埋め込みが</html>以降に記述されたための減点です。)

トップへ戻る     スタイルシート目次へ戻る
XHTMLへの移行へ戻る

inserted by FC2 system