セマンティックマークアップのための提案
-
18-09-2019 - |
質問
私は、私が働いているアプリケーションのWeb GUIを作成しています。この特定のセクションでは、良い意味的な化粧のある大きなページ内に座ってます。しかし、私は最良の選択肢は、意味的に下の画面をマークアップするためにどのようなわからない思います。
私の最初に考えたのはdivを介して、下半分から上半分を分離することです。そのため、トップのためのマークアップは非常に簡単です。私は困惑を感じるところである下を残します。最も簡単な答えはテーブルですが、この内容は、簡単に表形式のデータ・ルールの唯一の使用テーブルに適合していません。特に、ヘッダはこのレイアウトで目立つ見えることを考慮。提案?
このイメージのセマンティックマークアップが必要http://img183.imageshack.us/img183/2261/semanticmarkup.png の
解決
私はので、私の意見では、下部のために、こののあるの表形式のデータをテーブルを使用します。私は4列(アイコン、プロジェクト名、プロジェクトの説明、およびアクションボタン)を参照してください。私はいかなる理由が(適切にこのレイアウトの規模になるだろう、他のアプローチが正しく動作するJavaScriptと頭痛の多くを必要とすることを言及しないように)このレイアウトのためにテーブルを使用しないように表示されていない。
他のヒント
私はあなたがテーブルにその原料を置けば、それはセマンティックマークアップの中で最も悪質な違反になるとは思いません。ボタンを除き、それは私にはかなりの表を探します。私はCSSの神はあなたを免除すると思う:)
私はアンドリューに同意します。あなたが<table>
を使用していますが、正しくテーブルヘッダ、列、およびフッタを定義する必要があることを心に留めておく必要がありますので、これは表形式のデータです。
あなたの他のオプションは、ヘッダーとフッターと体として<div>
<table>
for使用する場所ヘッダレステーブルに行くことです。しかし、私はこれを行うことはお勧めしません。一つの理由は、あなたがJavaScriptを使用している場合、クライアント側でのソートのようなもののためのヘッダを望むだろう。
あなたは表形式でこれを入れて何も違反していません。確かに、一部の人々はそれについて駄々をこねるだろうが、それはあなたが同様にことが、表形式のデータに十分に近いのです。