HTML マークアップ言語 - テーブル マークアップ_HTML/Xhtml_Web ページの制作

標準化されたデザイン ソリューション - マークアップ言語とスタイル ハンドブック
Web 標準ソリューション マークアップとスタイル ハンドブック
パート 1: マークアップ構文から始めるマークアップの概要
第2章 邪悪な姿？
テーブルを使用することがいつから罪深い行為になったのかをご存知ですか? 実際、Web 標準に基づいて Web ページを作成することに関する最大の誤解は、「テーブルを使用するのはもうやめるべきだ」というものです。疫病は封印され、埃っぽいキャビネットに放り込まれ、インターネットの初期から受け継がれてきた骨董品として保存されなければなりません。
そのような嫌悪感はどこから来るのでしょうか? おそらく、最初は非常に単純です。その理由は、ネストされたテーブルと空白を埋める GIF 画像の従来のレイアウトを放棄し、柔軟で構造化された CSS レイアウトに切り替えることの利点を自信を持って宣伝する人がいるからです。
CSS レイアウトの方法とその利点については、この本の後半で説明します。しかし、今のところは、まず始めてみましょう。適切なコンテキストでテーブルを使用する方法、つまりデータ リストにラベルを付ける方法を見てみましょう。
これで終わりです。データ リストをより使いやすくするための簡単な方法をいくつか見ていきます。 🎜> リスト データにラベルを付けるときに table タグを使用しない理由はまったくありません。次に、リスト データとは何でしょうか。 カレンダー スプレッドシート チャート タイム スケジュール
これらの例や他の多くのケースでは、データをテーブルのように見せるために非常に複雑で厳密な CSS 効果を使用する必要があります。おそらく、賢い CSS フロートを使用してすべての項目を配置した後に何が得られるか想像できるでしょう。 CSS がなければ、すべての情報を正確に読み取ることはおそらく不可能になるでしょう。実際、テーブルを恐れる必要はありません。本来の目的に合わせてテーブルを使用する必要があります。

すべての人のためのフォーム フォームが非難される理由の 1 つは、注意して使用しないと使いやすさに問題があることが挙げられます。たとえば、スクリーン リーダーはコンテンツを正しく読み取ることが困難です。画面デバイスはレイアウトに使用されるテーブルによって中断されることがよくありますが、同時に、CSS を使用して将来のスタイル設定に備えて柔軟な構造を作成する簡単な方法がいくつかあります。 3- 1 からの簡単な例です。これはアメリカン リーグのリーグ記録です:


図 3-1: 典型的なデータ テーブルの例おそらく、これはレッドソックス ファンにとって非常に憂鬱なものでしょう。統計データただし、図 3-1 はリスト データの完璧な例です。これには 3 つのテーブル ヘッダー (年、対戦相手、シーズン記録 (w-l)) があり、その後に 4 年間のデータが続きます。テーブルのタイトルと説明の内容です。
このデータ テーブルをマークする方法は非常に直感的で、次のようなコードで作業を完了できます。

ボストン レッドソックス ワールド シリーズ チャンピオンシップ< ; /p>

対戦相手









gt;

年	シーズン成績 (W-L)< ; /td>
1918	シカゴ カブス
1916	ブルックリン・ロビンス	91-63
1915	フィラデルフィア フィリーズ td> ;	101-50
1912	新規ヨーク ジャイアンツ	105-47

このように表示される結果は次のようになります。図 3-1 と同じですが、これに基づいていくつかの改善を加えることができます。 まず、よりセマンティックな タグを使用して、「ボストン レッドソックス ワールド シリーズ チャンピオンシップ」を保存できます。 開始タグの後に付ける必要があります。また、他の方法でページの内容を知っている人にとっても役立ちます。
先頭の段落を削除して、正しい を追加しましょう:

ボストン・レッドソックス ワールドシリーズチャンピオンシップ

年	対戦相手	シーズン記録 (W-L)
1918	;シカゴ カブス	75-51
1916	ブルックリン・ロビンス	91-63
1915/ td>	フィラデルフィア フィリーズ	101-50
;1912	ニューヨーク・ジャイアンツ	105-47

重要なことは、标は後面料金の主な問題であり、默认設定に基づいて、ほとんどの可視化視聴者は标签内の文字居中に表示されます、当然、私は後ですcss を使用して設定の形式を変更することができます — 本章の技術巧拡張中会讨论藮题.事上,现在标题位置一意的标签内,正好让我们之后的修正工作变得轻松简单.
                                               #p#加上摘要

另外,我们も可能标签加上概要プロパティ,进一步解释这个表格の目的と内容,摘要プロパティ对非可視化浏览器
以下は例表格追加摘要プロパティの代価です:
年












> ;

対戦相手	シーズン記録 ( W-L)
1918	シカゴ・カブス td>	75-51
1916	ブルックリン・ロビンス	91-63
1915	フィラデルフィア フィリーズ	101-50
1912	ニューヨーク・ジャイアンツ	105-47

表格の表头

在立データベース表格時,善用表头は件重要な工作。 の使用ではなく、表示上でこの要素が重要であることを示す表示効果标签を使用します。第 2 章では标题标签标记段落标题一样を使用します。粗い体居中の効果は、第 2 回の内容を示していますが、第 2 回の内容を使用して、これらの重要な内容を別の形式で保存できるようにすることも可能であると考えています。
表示効果の利点を除き、
を使用すると非可視化浏览器を支援できます — この部分は私们稍の後に深入论を実行します。 例表枠内の表これが最上面の那一行: Year,Opponent and Season Record(W-L).我们来掴刚才的昈果标签替换成正确的表头标签:







gt;


td>1916

ボストン レッドソックス ワールド シリーズ チャンピオンシップ

年	対戦相手	シーズン記録 (W-L)
1918	シカゴ カブス	75-51
ブルックリン・ロビンス	91-63
1915	フィラデルフィア フィリーズ	101-50
1912	ニューヨーク・ジャイアンツ 105-47 ;

タグを使用してヘッダー セルをマークすると、図 3-1 と同じ効果が得られます。この方法が優れている理由を見てみましょう。 🎜>データ コンテンツの外側のヘッダーを強調表示するために追加の表示効果タグを使用する必要はありません。
デフォルト設定によれば、ほとんどのビジュアルブラウザは タグのコンテンツを太字で中央揃えで表示するため、ユーザーはヘッダーとテーブルのコンテンツの違いを簡単に区別できます。 これは タグから比較的独立しているため、データ コンテンツとは異なるスタイルをテーブル ヘッダーに追加できます。 テーブル ヘッダー タグを使用する他の利点については、以下で引き続き説明します。章。
                                                                        #p#


ヘッダーとデータの関係
headers 属性を使用して、ヘッダーを対応する 内のデータに関連付けることができます。この属性を使用すると、スクリーン リーダーは、通常のように各列を左から右に厳密に読むのではなく、より論理的にテーブルの内容を読み取ることができるようになります。 >引き続き Red Sox レコード テーブルを使用して、その使用方法を示します。まず、 に一意の ID を追加し、次に、ヘッダー属性に対応するものを追加する必要があります。正しいヘッダーです。
次のように、各ヘッダーに ID を追加するのは非常に簡単です:

ボストン・レッドソックス ワールドシリーズチャンピオンシップ

年
相手
シーズン成績 (W-L)

< ;tr>
1918
シカゴ・カブス
75-51
;/ tr>

1915
フィラデルフィア・フィリーズ
101-50

1912
ニューヨーク・ジャイアンツ
105- 47
/td>


各ヘッダー ID に短くわかりやすい名前を選択し、各データに与えます 適切なヘッダー属性をセルに追加しますコンテンツが正しいヘッダー ID と一致するようにします:

ボストン レッドソックス ワールドシリーズチャンピオンシップ

年	対戦相手	シーズン記録 (W-L)
1918	シカゴ・カブス	75-51 td> tr>
1916	ブルックリン・ロビンス< ;/td>	91-63
1915	フィラデルフィア フィリーズ	101-50
1912	ニューヨーク ジャイアンツ	105-47

テーブルヘッダーとコンテンツ間の対応関係を確立した後、スクリーンリーダーはそれを実行します。 「年: 1918 年、対戦相手: シカゴ カブス、シーズン成績 (W-L): 75 勝 51 敗」というようにテーブルの各行を読み出すことができます。各セルの内容を左から右に読み出すのと比較すると、次のようになります。
それぞれに固有の ID を持たせると、この識別ベースを使用して特別な CSS ルールを設定できます。これについては、この後半のテクニックの拡張で説明します。この方法。
                                                                        #p#

abbr 属性を使用します
前の例では、ヘッダーの「シーズン レコード (W-L)」が音声で発音するには長すぎると感じるかもしれません。このとき、abbr 属性を追加するだけで、ビジュアル ブラウザの セル内の発音内容を短縮できます。










75-51


;

ボストン レッドソックス ワールド シリーズ チャンピオンシップ

年	対戦相手	シーズン記録 (W-L)
1918	シカゴ・カブス
1916	ブルックリン・ロビンス	91-63
1915	フィラデルフィア フィリーズ /td>	101-50
1912	;ニューヨーク ジャイアンツ	105-47

abbr="記録を追加しました" とすると、スクリーン リーダーはヘッダーの短縮版を使用して "Record" と読み上げます。 >ここで、テーブル関連の 3 つのタグについても触れておきたいと思います。これらは、テーブル構造のより正確なセマンティクスを提供するだけでなく、追加のタグも提供します。 css を使用すると、テーブルの行をスタイル設定するときに タグ設計には非常に多くのクラスがあります。HTML4.01 仕様のこれらのタグの W3C 説明からの引用 (http:// www.php.cn/):
Quote:

テーブルの行は、thead、tfoot、tbody タグを使用してテーブル ヘッダー、テーブル フッター、および無制限の数のテーブル本体に分割できます。この分類方法を使用すると、ブラウザは、長い表を印刷するときに、表データを含むすべてのページでヘッダーとフッターを繰り返すことができます。また、独立したテーブル本体をサポートするブラウザ ユーザーがテーブル コンテンツ (特に長いテーブル) を読みやすくできるため、ブラウザや他のデバイスが読み込めるようになります。最初にコンテンツを作成し、テーブル行分類のこの方法でテーブルをマークします。

...テーブルヘッダーの内容...



...テーブルのフッター内容...




...テーブルデータ行...


...テーブル データ行 ...


...テーブル データ行...
tr>

< ;/table>

ヘッダーとフッターのデータが タグと タグで囲まれ、テーブル データ行の前に配置されていることがわかります。前に述べたように、これらのタグはテーブルの正確なセマンティクスに関する詳細情報を提供するだけではありません。また、CSS のスタイル アンカーも提供できるため、 ごとに多くのクラスを設計することなく、これらの特定のコンテンツに CSS ルールを設定できます。
たとえば、データにブロック (マーク付き) を与えるだけの場合、 ) を使用すると、他のブロックとは異なる背景色が設定されます。その後、次の CSS 部分を記述するだけで目的を達成できます。 }

tbody タグがない場合は、灰色の背景を追加する各 タグに class 属性を追加する必要があります。多くの場合、後で CSS 設定を使用して、この作業を行うことができます。これはスタイルの設定が非常に簡単になる良い例です。                                                                         #p#

テーブルは悪ですか?

テーブル タグを本来の目的に従って使用するのであれば、答えは間違いなく「いいえ!」です。テーブルの乱用は当然非難されます。
完璧なテーブルを作成するために必要なすべてのテクニックを説明するには、本全体を費やすことはできません。できればここでやめておきます。シンプルで使いやすく、CSS で簡単に変更できる単純なテーブルを作成する方法を理解し始めました。
スタイルについて言えば、いくつかの異なる CSS テクニックを使用して前の例を変更しましょう。スキルの拡張

前の章と同様に、柔軟なセマンティック構造化マークアップをベースとして使用し、CSS を使用してそれにいくつかのスタイルを追加します
まず、見てみましょう。シンプルな境界線のテクニックでは、例に単線の境界線を作成し、テーブルのタイトルとヘッダーに独自のスタイルを追加します
境界線を作成します
境界線にはすでに 3D 効果がありますデフォルト属性はもう飽きたでしょうか。一般的に、 table タグに border="1" を追加すると、図 3-1 と同様の効果が得られます。もちろん、このメソッドを変更することもできます。 CSS の上手な使い方 まず、各

td> の両側 (右と下) に 1 ピクセルの境界線を追加します:

th, td { border- right: 1px Solid #999; border-bottom: 1px Solid #999;
}
作成中にどこにでも同じ幅のボーダーを作成するには、両側にボーダーを追加するだけです重要なのは、すべての辺に境界線を追加すると、セルを配置するときに境界線の上辺と左辺が重なり合うことです。境界線ルールは 1 つだけを使用する方法です。
図 3-2 の表全体では、境界線を完成させるために、上部と左側の境界線だけが欠落していることがわかります。 要素にスタイルを追加します。同じ border-top プロパティと border-left プロパティ、td {
border-right: 1px Solid #999;
border-bottom: 1px Solid #999; }


図 3-2: 両側に td と横線を追加した表の例


図 3-3 横線を埋めた後の表の例
                                                                        #p#


ギャップを削除します
これで完全なテーブルが完成しました。残念ながら、ほとんどのブラウザではエディターが少し外側のパッチを設定するため、境界線間の間隔はどうなるでしょうか?デフォルトでは、これらの煩わしいギャップが露出します。私たちができることは、これらのギャップを削除し、必要なスタイルを取得するために、 table 要素に border-collapse 属性を追加することです。

table { border-top: 1px ソリッド #999;
border-left: 1px ソリッド #999;
border-collapse: Collapse;
}
th, td { border-right: 1px Solid #999; border-bottom: 1px Solid #999;
}

collapse 属性を border-collapse に追加すると、次のように正確な単一線の境界線スタイルが実現されることがわかります。図 3-4 に示す

図 3-4: border-collapse 属性を使用した後のテーブルの例

Mac 版の IE のバージョンはサポートされていません

Internet Explorer for Mac を除き、他のブラウザでは次のような CSS の省略形がサポートされています:

table { border-collapse: Collapse;
}
th, td { border: 1px Solid # 999;
}
もちろん、どの方法を使用するかはあなた次第です。まだ Mac 版 IE を使用している人もいます。この代替方法を使用すると、エッジが重複して見えることになります。このことを気にしない場合は、次を使用してください。厳密に言えば、これは単なる表示の問題であり、テーブルの機能にはまったく影響しません。
私は Mac マニアを放棄することはできません (それなりの Web デザイナーならそうすべきです)。今後の例では、Mac 版 IE で正しく表示できるバージョンを引き続き使用します。
スペースを拡張します
これで、完璧なテーブルが手に入りました。少し窮屈に見えます。ただし... th, td ルールに少しインライン化を追加して、呼吸する余地を与えましょう (図 3-5)
table {
border-top: 1px Solid #999;
border-left: 1px ソリッド #999;
border-collapse: Collapse;
}
th, td {
パディング: 10px;
border-right : 1px ソリッド #999;
border-bottom: 1px Solid #999;
}

図 3-5: 10 ピクセルの内側パッチを含むテーブルの例
内側のパッチを設定するには単一の値 (前の例の 10px など) を使用する場合、要素の 4 つの側面すべてに同じ設定値を追加する必要があります。時計回りの順序 (上、右、下、左) に従うこともできます。内側のパッチを 10px 5px 2px 10px に設定すると、上部に 10px の内側パッチ、右側に 5px の内側パッチ、下部に 2px の内側パッチが追加されます。左側に10pxの内側パッチを追加します。
別のショートカット: 上下の設定値が同じで、左右の設定値も同じ場合パディング: 10px 5px を設定すると、上部と下部に 10px の内側のパッチが追加され、左側と右側に 5px の内側のパッチが追加されます。 🎜>
図 3-6: 内側のパッチを時計回りに設定し、外側の境界の順序を設定します
                                                                        #p#


メーター ヘッダーの表示効果を調整しますメーター ヘッダーに背景色を簡単に追加し、さまざまなフォントを選択して、メーター ヘッダーをよりわかりやすくすることができます。
行内で太字のコンテンツを直接設定する代わりに

タグが使用されるため、他のタグを追加せずにヘッダー コンテンツのスタイルを直接設定できます。タイトルの内容を強調表示するために、異なるフォントと色 (もちろん赤) も使用します (図 3-7) table { border-top: 1px Solid #999; border -left: 1px ソリッド #999; } caption { font-family: Arial、sans-serif; color: #993333; padding-bottom: 6px; } th, td { パディング: 10px; border-right: 1px ソリッド #999; border-bottom: 1px ソリッド #999; } th { フォントファミリー: Verdana、sans-serif; 背景: #ccc; } 図 3-7: スタイル付きのタイトルと テーブルのヘッダーに背景画像を追加します先ほど、テーブルの	要素に灰色の背景を追加しましたが、実際にはさらに一歩進んで、タイル状の背景画像を使用することもできます。グリッド内に美しい効果を作成します。たとえば、詳細なグレーのストライプを使用して、Mac OS の多くのウィンドウ スタイルをシミュレートできます (使い慣れたその他の描画ツール)。 この例では、次のような効果を作成します。 2 ピクセルのグレーと 2 ピクセルの白を交互に配置するため、画像の高さは 4 ピクセルだけで済みます。これは、必要なストライプ効果を作成するために画像を平坦化するためです。帯域幅を節約するために、幅は 1 ピクセルのみにします (図 3-8) 図 3-8: 1X4 ピクセルのストライプ画像 (拡大) CSS 先ほどの例のコードに従います。変更する必要があるのは、背景色を先ほど作成した小さな画像のパスに変更することだけです。指定しない場合は、デフォルト設定に従って背景画像が変更されます。 table { border-top: 1px ソリッド #999; border-left: 1px ソリッド } caption { font-family: Arial、sans-serif; color: #993333; padding-bottom: 6px; } th, td { padding: 10px; border- right: 1px ソリッド #999; border-bottom: 1px ソリッド #999; } th { font-family: Verdana, sans -serif; 背景: url(th_strip. gif); } 図 3-9 は、このスタイルを適用した後のテーブルです。タイルの背景画像も試してみる必要があります。ヘッダーや情報に最適なエフェクトを作成する方法を試してみてください。 図 3-9: テーブルヘッダーでタイル状の背景を使用する例                                                                         #p# ID のアイコンを指定します この章の冒頭で、テーブル内の各 に一意の ID を追加したことを覚えていますか?これらの id はデータ リストの headers 属性と一致し、非ビジュアル ブラウザのユーザーがテーブルの内容を理解できるようになります。これで、この id の関数を別の場所で使用できるようになります。つまり、各 アイコン。 アイコンのパスは CSS ファイルに完全に記録されるため、ラベル部分を変更することなく、Web サイトの再構築および更新中に簡単に置き換えることができます。アイコン Photoshop で作成した 3 つの固有のアイコンを使用します。例では、年、対戦相手、シーズン記録 (W-L) が使用されています。図 3-10 は、これらの 3 つのアイコンを示しています。 画像 3。 -10 hotoshop で生成された 3 つのヘッダー アイコン CSS に CSS を追加するのは難しくありません。各	に一意の ID を作成しているため、直接使用できます。正しいアイコンを指定するには、background 属性を使用します。 table { border-top: 1px Solid #999; border-left: 1px Solid #999; } caption { フォントファミリー: Arial、サンセリフ; カラー: #993333; パディングボトム: 6px; } th, td { パディング: 10px; border-right: 1px ソリッド #999; border-bottom: 1px ソリッド #999; } th { font-family: Verdana, sans-serif; } #year { padding-left: 26px; background: #ccc url(icon_year.gif) no-repeat 10px 50%; } #opponent { padding-left: 26px; 背景: #ccc url(icon_opp.gif) no-repeat 10px 50%; } #record { パッド左: 26px; 背景: #ccc url( icon_rec.gif) no-repeat 10px 50%; } 背景スタイルの定義に省略形を使用していることに注目してください。 th の定義から、background:#ccc ルールを取り出します。これを各ヘッダーのアイコン名の横に配置すると、アイコンが指定した灰色の背景に「配置」され、テキストがアイコンを覆わないように、各ヘッダーのコンテンツの左側にアイコン用の十分なスペースが確保されます。図 3-11 は、必要な効果です。 図 3-11: ごとに固有のアイコンを作成する効果 省略された構文を使用すると、明らかな利点があります。 , ただし、background 属性で画像のみを定義し、背景色を定義しない場合は、最初に	の background で以前に定義した背景色をキャンセルする必要があります。 ルールを組み合わせてコンテンツを簡素化する 同じ機能を実現できるもう 1 つの書き方は、各テーブルのヘッダー内で繰り返し出現するルール (この場合、背景画像、内部パッチ、位置) を取り出し、それらを	に記述することです。 ; そしてそれらを一度定義し（それぞれの設定は実際に同じであるため）、#year、#opponent、# 内でのみ異なる設定値（つまり、画像パス）を保持します。レコード定義 table { border-top: 1px ソリッド #999; border-left: 1px ソリッド #999; } caption { font-family: Arial、サンセリフ; カラー: #993333; パディングボトム: 6px; } th, td { パディング: 10px; ボーダー右: 1px ソリッド#999; border-bottom: 1px ソリッド #999; } th { font-family: Verdana, sans-serif; padding-left: 26px; 背景-color: #ccc; 背景繰り返し: no-repeat; 背景位置: 10px 50%; } #year { 背景画像: url(icon_year.gif) ); } #opponent { 背景画像: url(icon_opp.gif); } #record { 背景: url(icon_rec.gif); } これはもう少し簡潔ではないでしょうか。同じルールを統合することで、毎回定義と変更を繰り返す時間と労力を節約できます。この例では、6 つしかないように見えます。 概要 この章では、テーブルが悪いものではないことを発見しただけでなく、深さは、表データのラベル付けに非常に適しており、依然として使いやすいことがわかりました。 また、いくつかのスタイルを追加することで、リスト データの表示を制御でき、非常に魅力的になることがわかりました。もうテーブルを使うのが心配です。