HTML マークアップ言語 - テーブルタグ

123WORDPRESS.COM HTML チュートリアルセクションに戻るには、ここをクリックしてください。
前:マークアップ言語 - タイトル 元のソース

標準化されたデザインソリューション - マークアップ言語とスタイルマニュアル
Web 標準ソリューションマークアップとスタイルハンドブック
パート 1: マークアップを習得する
Chapter2 邪悪なテーブル？
テーブルの使用が罪になったことをご存知ですか? 実際、Web 標準で Web ページを記述することに関する最大の誤解は、「二度とテーブルを使用するな!」です。テーブルは疫病のように避けられ、埃をかぶったキャビネットに封印され、Web の初期の遺物として保存されているように思えます。
このような嫌悪感はどこから来るのでしょうか。おそらく最初は悪気はなかったか、少なくとも正当な理由があったのでしょう。多くの人は、ネストされたテーブルや空白を埋める GIF 画像などの従来のレイアウト方法を捨て、柔軟に構造化された CSS レイアウト方法を使用することの利点を自信を持って推進するでしょう。私たちは、状況に関係なく、すべてのテーブルを削除し始めるか、頑固にすべてのテーブルを追放することを主張するかもしれません。
本書の後半では、CSS レイアウト方法とそれがもたらすすべての利点について説明します。しかし今は、データのリストをマークアップするときに適切な場合にテーブルを使用する方法を見てみましょう。データのリストをより使いやすく、より美しくする簡単な方法をいくつか見ていきます。
すべてはテーブルについてです 表形式のデータをマークアップするときにテーブルタグを使用しない理由はまったくありません。しかし、ちょっと待ってください。表形式のデータとは何でしょうか。次に例を示します。カレンダー、スプレッドシート、グラフ、タイムライン。これらの場合やその他多くの場合では、データをテーブルのように見せるために非常に複雑で厳密な CSS 効果が必要です。ご想像のとおり、巧妙な CSS フロートを使用してすべての項目を配置すると、互換性のない矛盾した結果になります。また、CSS がなければ、各データを正確に読み取ることはおそらく不可能でしょう。実際、テーブルを恐れる必要はありません。テーブルは、設計された目的のために使用する必要があります。
誰でも使える表 表が評判の悪い理由の 1 つは、注意して使用しないと使い勝手に問題が生じる可能性があることです。たとえば、スクリーンリーダーはコンテンツを正しく読み取るのに苦労しますし、画面の小さいデバイスでは表のレイアウトが乱雑になることがよくあります。しかし、データをリストする表の使い勝手を向上する簡単な方法がいくつかあります。また、将来的に CSS で簡単にスタイル設定できる柔軟な構造を作成することもできます。
図 3-1 の簡単な例、アメリカンリーグベースボールのリーグ記録を見てみましょう。

図 3-1: 典型的なデータテーブルの例これはレッドソックスファンにとっては非常に気が滅入る統計データかもしれませんが、図 3-1 は表形式のデータの完璧な例です。3 つのテーブルヘッダー (年、対戦相手、シーズン記録 (wl)) があり、その後に 4 年間のデータが続きます。テーブルの上にはテーブルタイトルがあり、テーブルの内容が説明されています。
このデータテーブルをマークアップする方法は非常に簡単で、次のようなコードで実行できます。
ボストンレッドソックスワールドシリーズ優勝
<テーブル>
<tr>
<td align="center">年</td>
<td align="center">対戦相手</td>
<td align="center">シーズン記録 (WL)</td>
</tr>
<tr>
<td>1918</td>
<td>シカゴ・カブス</td>
<td>75-51</td>
</tr>
<tr>
<td>1916</td>
<td>ブルックリン・ロビンズ</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>
</テーブル>
結果は図 3-1 と非常によく似ているはずですが、これに基づいていくつか改善を加えることができます。
まず、より意味的な <caption> タグを使用して、「Boston Red Sox World Series Championships」を保存します。<caption> タグは、<table> 開始タグの直後に配置する必要があり、通常はテーブルのタイトルまたはテーブルデータの説明を保存するために使用されます。
ユーザーにとっては表の主題が見やすくなるほか、他の方法でページの内容を知っている人にも役立つようです。
冒頭の段落を削除して、正しい <caption> を追加しましょう。
<テーブル>
<caption>ボストン・レッドソックスのワールドシリーズ優勝</caption>
<tr>
<td align="center">年</td>
<td align="center">対戦相手</td>
<td align="center">シーズン記録 (WL)</td>
</tr>
<tr>
<td>1918</td>
<td>シカゴ・カブス</td>
<td>75-51</td>
</tr>
<tr>
<td>1916</td>
<td>ブルックリン・ロビンズ</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>
</テーブル>
タイトルは、その後に続く資料の主題をすぐに伝えることが重要です。デフォルトでは、ほとんどのビジュアルブラウザーは、表の上部にある <caption> タグ内のテキストを中央に配置します。もちろん、CSS を使用して後でデフォルトのスタイルを変更できます。これについては、この章の詳細なヒントで説明します。タイトルが一意のタグ内にあるため、後で簡単に変更できます。

前のページ1 2 3 4 5 6 7 8 次のページ全文を読む

<<: Mysql トランザクションで Update を実行するとテーブルがロックされますか?

>>: JS+Canvas が抽選ホイールを引く