XHTMLについて　２

このホームページはW3Cの提唱する、「XHTML 1.0　Strict」に準拠して作りました。

ワードアート図

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	進級

表の区切り線には、外部スタイルシートで「線を重ねる：border-collapse属性とcollapse値」を設定し細線枠にしてあります。

テーブル<table>の設定

表作成を定義します。（終了タグ必須）
視覚的方法でない方法で表現するソフト（音声表現ブラウザなど）で使用するための summary 属性（表の目的と仕組みを説明）記述が求められます。「 <table class="collapse" summary="1列目氏名、2列目国語点数、3列目数学点数、4列目英語点数、5列目合計点数、6列目個人平均点、7列目評価を表示"> 」の形で記述しました。

キャプション<caption>の設定

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

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

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

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

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

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

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

横列<tr>の設定

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

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

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

セル<td>の設定

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

解説

テーブルのキャプション設定はあくまで任意です。
<tr>タグは横列の行を設定し、この中にセルを配置します。終了タグによって、横列の行が終わります。
<th>タグは表組の見出しのセルです。ここには、アクセサビリティ（情報を容易に知見できる）見地から、ヘッダセルの概要を示すabbr属性の記述（非視覚系ブラウザ用に）が求められ、記述チェックの「Another HTML-lint gateway」でも指摘され、「 <th abbr="１">東京</th> 」の形で記述しました。
<td>タグは、データセルを意味し、１つのセルを設定します。この中には他のブロックレベル要素や別のテーブルなどを配置することが可能です。
HTMLでは、<td> タグの終了タグは省略が可能ですが、XHTMLは省略できません。

セルの結合

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

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

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

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

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

批評では、「タグ<td>には、チェックしているHTMLのヴァージョン「XHTML1.0 Strict」ではサポートされていないが、他のヴァージョンHTML3.2、HTML4.0、HTML4.01、XHTML1.0 Transitional、XHTML1.0 Frameset、Mozilla で「属性 ”width ”」がサポートされています。
あまりこの警告が大量に出るようなら、DOCTYPE宣言が適切でない可能性がありますので、上記の[XHTML1.0 Transitional]か、それ以下に替えなさい。」と言うことです。

主な内容
利根町関係利根町イラストマップ町ホームページマップ役場と筑波と利根川と mid ＆ mp3 音楽大利根小唄　野口雨情作詞利根町を歌う(mid) 町の祭の歌(mp3) 日本の心の歌(mid) 市町村合併問題あの町この町背比べ市町村合併問題人物誌利根川を替えた話柳田国男と岡田竹松赤松宗旦と利根川図志一茶と利根町栗林義長物語利根町の歴史＆由緒利根町の歴史町の神社仏閣由来まちの昔ばなし	野鳥エリア町で見られる野鳥野鳥集１野鳥集２野鳥集３写真集・他写真集１写真集２弘前の花見孫娘の見た日本 Flashアニメ集つぶやき IT一般マルチメデア実習ＨＰ作成キット Word ツ-ルバ-考 Excel ツ-ルバ-考 Windoows　一般ネットセキュリティ目次個人情報のスパイ防止ショ-トカットキ-目次いろいろな設定	画像エリア Excel関係いろいろな関数目次 SUMIFとCOUNTIF関数関数実用例セル参照,オ-トフィルセルの表示形式いろいろなグラフ目次ピボットテーブル HTML＆スタイルシート極楽スタイル体験１極楽スタイル体験２極楽スタイル体験３極楽スタイル体験４完 XHTML.XML XHTMLについて XHTMLで表作成 XML例題

上の表の html 構図

tableタグにsummary属性を付け、値を「トップの目次」としました。
captionタグで「主な内容」とし、上下位置を示す属性を省略（自動的に上に）
<tr></tr>タグは１組しか使用しません。即ち表の上では１行です。
<td></td>タグを３組使用し、３列にし、色分けしました。
<td>タグの内容説明に、定義型リストの「ブロックレベル・タグ」<dl><dt>を組み込みました。
<dt>は辞書形の見出しタグです。
インラインタグ<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 になるほど致命的です。

（-９点の減点はヤフーのコマーシャルタグの埋め込みが</html>以降に記述されたための減点です。

このページに対する「Ｗ３Ｃでの検証の結果」下記ロゴを取得しました。

XHTMLについて ２