wulin.com HTMLチュートリアル列に戻るには、ここをクリックしてください。
上：マークアップ言語 - タイトル
元のソース
標準化された設計ソリューション -マークアップ
とスタイルハンドブックパート1：マークアップでマークアップを開始します第2章邪悪なテーブル？あなたは知っていますか？テーブルを使用して罪深い行為に変わったとき、いつ始まったのかわかりませんか？確かに、Web標準に基づいてWebページを書くことの最大の神話は、テーブルの使用をもう停止することです。それはペストのように聞こえます、それは避けられなければならず、封印されてほこりっぽいキャビネットに投げ込まれなければなりません、そしてそれはインターネット開発時代の初期から渡されたアンティークと見なされます。
そのような嫌悪感はどこから来たのですか？少なくとも正当な理由があるのは、おそらく最初は非常に単純だったでしょう。多くの人々は、テーブルのネストと空のGIF写真の従来のレイアウトを放棄することの利点を促進し、代わりに柔軟な構造化されたCSSレイアウトを使用することに自信があります。私たちはすべてのテーブルを取り外した方法で削除し始めるかもしれません。そして、すべてのテーブルを追放することを頑固に主張するかもしれません。
本の後半では、CSSレイアウトの方法とそうすることのすべての利点がわかります。ただし、適切な状況でテーブルを使用する方法、つまりデータリストをマークするときに見てみましょう。データリストを使いやすく、より美しくするためのいくつかの簡単な方法を見ていきます。
それは完全にフォームですリストデータをタグ付けする場合、テーブルタグを使用しない理由はまったくありません。しかし、待って、リストデータとは何ですか？ここにいくつかの例があります：カレンダースプレッドシートチャート時間の旅程
これらの例や他の多くのケースでは、データをテーブルのように見せるために、非常に複雑で厳格なCSS効果を使用する必要があります。おそらく、巧妙なCSSフロートを使用してすべてのプロジェクトを見つけると、CSSを削除した後、各データを正確に読むことはおそらく不可能なタスクになることは言うまでもありません。実際、テーブルを恐れる必要はありません。元の設計目標でそれらを使用する必要があります。
みんなのためのフォームテーブルが批判される理由の1つは、慎重に使用されない場合、使いやすさの欠陥があることです。たとえば、画面読み取りプログラムはコンテンツを正しく読み取ることが困難ですが、小さな画面デバイスはレイアウトに使用されるテーブルによって邪魔されることがよくありますが、リストデータテーブルの使いやすさを向上させる簡単な方法があります。同時に、将来、CSSを使用したスタイルの設定を容易にするための柔軟な構造を確立します。
アメリカ野球リーグのリーグ記録である図3-1の簡単な例を見てみましょう。
図3-1：典型的なデータ表現の例
おそらく、これはRed Soxファンにとって非常に憂鬱な統計データですが、図3-1はリストデータの完璧な例です。 3つのテーブルヘッダー（年、対戦相手、シーズンレコード（WL））があり、その後4年間のデータが続きます。テーブルには、テーブルのタイトルがあり、テーブルの内容を説明しています。
このデータテーブルをマークする方法は非常に直感的であり、次のようなコードでこれを行うことがあります。
<P align = center>ボストンレッドソックスワールドシリーズチャンピオンシップ</p>
<表>
<tr>
<td align = center> <b>年</b> </td>
<td align = center> <b>相手</b> </td>
<td align = center> <b>シーズンレコード（wl）</b> </td>
</tr>
<tr>
<td> 1918 </td>
<td>シカゴカブス</td>
<td> 75-51 </td>
</tr>
<tr>
<td> 1916 </td>
<TD> BROOKLYN ROBINS </TD>
<td> 91-63 </td>
</tr>
<tr>
<td> 1915 </td>
<td>フィラデルフィアフィリーズ</td>
<td> 101-50 </td>
</tr>
<tr>
<td> 1912 </td>
<td>ニューヨークジャイアンツ</td>
<td> 105-47 </td>
</tr>
</table>
この方法で示されている結果は、図3-1と非常に似ているはずですが、この基礎にいくつかの改善を追加できます。
まず、よりセマンティック<キャプション>タグを使用して、ボストンレッドソックスワールドシリーズチャンピオンシップを保存できます。 <キャプション>タグは、<table>起動タグの直後に従う必要があります。これは通常、テーブルのタイトルまたはテーブル情報の説明を保存するために使用されます。
ユーザーがテーブルのトピックを簡単に確認できるようになり、他の方法でWebのコンテンツを知っている人にも役立つようです。
最初の段落を削除して、正しい<キャプション>を追加しましょう。
<表>
<キャプション>ボストンレッドソックスワールドシリーズチャンピオンシップ</キャプション>
<tr>
<td align = center> <b>年</b> </td>
<td align = center> <b>相手</b> </td>
<td align = center> <b>シーズンレコード（wl）</b> </td>
</tr>
<tr>
<td> 1918 </td>
<td>シカゴカブス</td>
<td> 75-51 </td>
</tr>
<tr>
<td> 1916 </td>
<TD> BROOKLYN ROBINS </TD>
<td> 91-63 </td>
</tr>
<tr>
<td> 1915 </td>
<td>フィラデルフィアフィリーズ</td>
<td> 101-50 </td>
</tr>
<tr>
<td> 1912 </td>
<td>ニューヨークジャイアンツ</td>
<td> 105-47 </td>
</tr>
</table>
重要なことに、タイトルは次の情報の主題をすばやく伝える必要があります。デフォルト設定によると、ほとんどのビジュアルブラウザは、テーブルの上部にある<キャプション>タグのテキストを中心にします。もちろん、CSSを使用してデフォルト設定のスタイルを後で変更できます。この問題については、この章のヒントの拡張で説明します。実際、タイトルはユニークなタグにあり、その後の変更が簡単かつシンプルになります。
前のページ1 2 3 4 5 6 7 8次のページ全文を読む