Webデザインでは、長い間テーブルが悪いラップに陥っています。 何年も前、レイアウト用にHTMLテーブルが使用されていましたが、これは明らかに意図したものではありませんでした。 CSSがウェブサイトレイアウトの普及した使用法に昇ったとき、「テーブルが悪い」という考えが定着しました。 残念なことに、多くの人がこれを誤解してHTMLテーブルが常に悪いことを意味するようにはなりません。 それはまったく当てはまりません。 実際、HTML表は、表形式のデータ(スプレッドシート、カレンダーなど)を表示するための真の目的以外に使用すると悪いことがあります。 ウェブサイトを構築していて、このような表形式のデータを持つページがある場合は、ページ上でHTML表を使用することを躊躇しないでください。
レイアウト用のHTMLテーブルが賛成できなくなってから何年も前にサイトを構築し始めたのであれば、実際にはHTMLテーブルを構成する要素に精通していないかもしれません。 テーブルマークアップを見始めるときに多くの質問が1つあります:
"
タグとは何ですか?
タグとは
ほとんどのWebブラウザでは、フォントの太さを太字に変更し、セル内のコンテンツの中央に配置します。 もちろん、CSSのスタイルを使用して、これらの表のヘッダーやタグの内容を、レンダリングされたWebページで見たいように見えるようにすることができます。
< th> むしろ
タグは、セル内のコンテンツをその列または行のヘッダーとして指定する場合に使用します。 表の見出しのセルは、通常、表の上部または側面にあります。基本的には、列の先頭の見出し、左端の見出し、または行の先頭です。 これらのヘッダーは、その下または横の内容を定義するために使用され、表とその内容をすばやく確認して処理するのがはるかに簡単です。
を 使用し てセルのスタイルを設定 しないで ください。 ブラウザはテーブルヘッダーのセルを別々に表示する傾向があるため、怠惰なWebデザイナーの中には、コンテンツを大胆で中央に配置したい場合に、このタグを利用しようとする場合があります。 これはいくつかの理由で悪いです:
- あなたはWebブラウザに頼ることはできません常にそのようにコンテンツを表示します。 将来のブラウザでは、デフォルトで色が変更されたり、コンテンツに視覚的な変更が加えられたりしないことがあります。 デフォルトのブラウザスタイルだけに依存するべきではありません。また、HTML要素の使用方法は決してデフォルトでは見えないので
- それは意味的に間違っています。 テキストを読むユーザエージェントは、 "行ヘッダ:あなたのテキスト"のような可聴フォーマットを追加して、それが
セルにあることを示すことができます。 さらに、一部のWebアプリケーションでは、各ページの上部に表のヘッダーが印刷されるため、実際にはヘッダーではなく、代わりに見た目には問題があります。 要するに、タグをこのように使用すると、多くのユーザー、特に支援されたデバイスを使用してサイトのコンテンツにアクセスするユーザーにとって、アクセシビリティの問題が発生する可能性があります。 - セルをどのように見えるかを定義するには、CSSを使用する必要があります。スタイル(CSS)と構造(HTML)の分離は、長年にわたりウェブデザインのベストプラクティスでした。 もう一度、そのセルのコンテンツがヘッダーであるため、ブラウザを既定でそのコンテンツをレンダリングする可能性が高いからではなく、を使用します。
を 使用し てセルのスタイルを設定 しないで ください。 ブラウザはテーブルヘッダーのセルを別々に表示する傾向があるため、怠惰なWebデザイナーの中には、コンテンツを大胆で中央に配置したい場合に、このタグを利用しようとする場合があります。 これはいくつかの理由で悪いです:
セルにあることを示すことができます。 さらに、一部のWebアプリケーションでは、各ページの上部に表のヘッダーが印刷されるため、実際にはヘッダーではなく、代わりに見た目には問題があります。 要するに、タグをこのように使用すると、多くのユーザー、特に支援されたデバイスを使用してサイトのコンテンツにアクセスするユーザーにとって、アクセシビリティの問題が発生する可能性があります。