web-dev-qa-db-ja.com

<colgroup>と<col>を使用する必要があります。使用する場合、その理由と方法を教えてください。

Colgroupとcolタグを適切に使用しようとしましたが、取得できません。仕様書などを読みましたが、その目的や実装方法がわかりません。

何かアドバイス？

htmlhtml-tablecolcolgroup
10
Roger G. Zapata

colgroupは、table要素で使用され、不規則なヘッダーを持つテーブル内の情報の複雑な階層を理解するのに役立ちます。

WAIには、このような状況に対処する方法に関する完全な情報ページがあります： 不規則なヘッダーを持つテーブル とcolとcolgroup

第1レベルのヘッダーを両方の列のすべてのセルに適切に関連付けるには、列構造をテーブルの最初に定義する必要があります。 <col>要素は、左側から始まる各列を識別します。ヘッダーが2つ以上の列にまたがる場合は、<colgroup>要素の代わりに、その数の<col>要素、およびスパンされる列の数は、span属性に示されます。

とはいえ、これらの要素の最適な使用例は、styleまたはclass属性を繰り返さずに列をスタイル設定することです。

<table>
  <colgroup>
    <col style="background-color:red">
    <col style="background-color:yellow">
    <col style="background-color:blue">
  </colgroup>
  <tr>
    <th>First</th>
    <th>Second</th>
    <th>Third</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
13
Adam

これが、colgroupおよびcolを使用する必要がある理由です。障害の。

私は過去4か月間コーディングをしていて、チュートリアルを読んだり、質問したり、もう一度コーディングしたりしています。個人的には[〜＃〜] www [〜＃〜]はすべての人向けである必要があり、学習中にHTML5がその意図で作成されていることを発見しました。数日前、テーブルをコーディングしていて、今まで見たことのないタグであるcolgroupとcolを紹介されました。初めは、このタグが気になり始めるまであまり注意を払っていませんでした。なぜ存在するのですか？どのように使用する必要がありますか？それらを宣言することは必須ですか？まったく使用しないとどうなりますか？

まあ私は物事がどのように機能するかを知りたいので、これらのタグの使用方法をウェブで尋ねる私の研究を述べました。私は多くのブログで良い情報を見つけましたが、私が見つけた情報のほとんどはどういうわけか混乱していました。一部の記事では、列のスタイルを設定する方法としてこれらのタグについて説明し、他の記事では、テーブルを操作する際のワークフローを改善する方法としてこれらのタグについて言及しました ただし、正しい方法で説明されているWebサイトがあります 。なぜ、どのように、そしてこの情報をあなたと共有したいのか、ようやく理解しました。

Colgroupタグはテーブル内の列のグループを宣言する方法であり、colは単一の列を宣言する方法です。 W3C仕様 によると、colタグはcolgroupタグの内側または外側にあり、colタグがcolgroupタグの内側にある場合、colgroupタグはspan =””属性を持つことができません。 colタグ内のスパンはそれを上書きします。

例1– colgroupおよびcolタグの適切な使用。

<col>
<colgroup span="2"></colgroup>
<colgroup>
<col span="3">
</colgroup>

例2– colgroupおよびcolタグの不適切な使用。

<col>
<colgroup span="2"><colgroup>
<colgroup span="2">
<col span="3">
</colgroup>

例2では、​​2番目のcolgroupは2列にまたがるように宣言されましたが、内部ではこのコマンドを上書きするcolタグが宣言され、UAに2ではなく3列にまたがるように指示しています。なぜこれが問題なのでしょうか。前述のとおり、私は物事がどのように機能するかを知りたいので、調査したところ、1998年にクリントン前大統領が署名した「リハビリテーション法」の一部である「 508条 」と呼ばれるものを見つけました、およびこのセクション508では、実際のテクノロジーを使用して、障害を持つ人々が情報にアクセスできるようにする方法について説明しています。さて、正しく見えない人が、スクリーンリーダーでリレーしてWebサイトに投稿された情報にアクセスする必要がある場合を考えてみてください。そのようなWebサイトにはテーブルがあり、このテーブルに間違ったマークアップがある場合は…ユーザーは情報を間違って取得するか、まったく取得しない可能性があります。そしてそれが問題です。W3Cディレクターであり、World Wide Webの発明者であるTim Berners-Leeは、Webについて次のように述べています。

ウェブの力はその普遍性にあります。障害に関係なく誰もがアクセスできることが重要な側面です。

したがって、コンテンツをマークアップすることで、コンテンツをすべての人が利用できるようにするだけでなく、多くのメリットを得ることができます。

アクセシビリティについての強力なビジネスケースもあります。アクセシビリティは、モバイルWebデザイン、デバイスの独立性、マルチモーダルインタラクション、使いやすさ、高齢ユーザー向けのデザイン、検索エンジン最適化（SEO）などの他のベストプラクティスと重複しています。ケーススタディによると、アクセシブルなWebサイトでは、検索結果が向上し、メンテナンスコストが削減され、視聴者のリーチが拡大するなどのメリットがあります。組織のWebアクセシビリティビジネスケースの開発では、Webアクセシビリティの社会的、技術的、財政的、および法的なメリットについて詳しく説明します。

以前のw3.orgの引用が見つかりました here ：

colgroupとcolの他に、使用する必要のある他のタグもあります（これを実装することは必須ではありませんが、Web開発者として、そして私の意見では、コンテンツを設計および実装する義務があります。の能力や欠如に関係なく、誰でも利用できます）など、優れた記事がたくさんあるので説明しません。この貢献の私の意図は、これらのタグの使用に関する一般的な説明として、Webで見つけられなかったものを説明することだけです（前述のWebサイトのほかに）。この情報が、私にとってもそうであったように、誰かにとって役立つことを願っています。

1
Roger G. Zapata