私はテンプレートに取り組んでおり、CSSを使用する方がHTMLテーブルを使用してポジショニングするよりも優れていることを知っています...しかし、両方の世界を最大限に活用し、divでテーブルのようなスタイルを使用することは許容されますか?例えば:
display: table;
これは、スティッキーフッターの問題を解決するのに役立つだけでなく、フロートに関連する痛みも回避できました。これが醜いハックと見なされるのか、雄弁な解決策と見なされるのかわからない。考え?
醜いハック... clearfixメソッドを使用してフロートを処理することができ、使用するスティッキー フッター テクニック (このようなもの) がたくさんあります。
また、懸念される場合display: table
は、IE7 以下ではサポートされていません。
先に進んで、レイアウトに新しいよりセマンティックな要素 ( header、section、footerなど) を使用し、表形式のデータのみを表示する場合はtable -s に頼る必要があります。
恐れたり嫌ったりする理由はありませんdisplay: table
。はい、値は ですがtable
、公正なゲームであり、完全に有効な CSS 2.1 です。
表は、表形式のデータを表示するという意図されたセマンティックな目的を反映していない方法で悪用され、適用されたため、マークアップでは「悪い」ものです。表形式のデータがある場合、テーブルを使用しないことは、レイアウトにテーブルを使用することと同じくらい大きな罪になります。
しかし、話題に戻りましょう。のサポートdisplay: table
は、IE < 8 では少し不安定で、Android < 2.1 および iOS < 3.2 には存在しません。それらをサポートする必要がある場合は、代わりにfloat
.
このプロパティの最も簡単な使い方はdisplay: table
、親要素、display: table-row
子要素、およびdisplay: table-cell
孫要素に適用することです。任意のレベルでこれから逸脱すると、結果が少しおかしくなる可能性があります。(これについては個人的な経験があります。) 行き詰まった場合は、CSS テーブル モデルの W3C 仕様を参照してください。
ソース:
http://caniuse.com/css-table
http://www.w3.org/TR/CSS21/tables.html#table-display
個人的には、 を使用しても問題はないと思いdisplay: table
ます。私はそれを広く使用することをお勧めしませんが、余分なHTMLを追加したり、面倒なCSSルールを設定したりして何かをあなたのように見せる必要なく、あなたが望む方法で何かを表示させるのに非常に役立つことがあります.したい。
開発で対象としているクライアント ブラウザーで機能し、他の領域での手間や複雑さを軽減できる場合は、気軽に使用してください。
場合によります。CSS div は HTML のあらゆるものに対する最良のソリューションであり (IE6 のサポートが必要な場合を除く)、テーブル (マークアップの観点から) は古い技術になりつつありますが、一方では、最も多くのことを考え出すことが可能です。これまでに作成された CSS の障害のある愚かなソリューションであり、一方で、div を 1 つも使用せずに HTML の傑作を作成できます。
したがって、CSS に十分慣れていると思われる場合は、それを使用してください。よくわからない場合、または実際のテーブルマスターである場合は、テーブルが機能するはずです。
私は個人的に を使用display: table
したことはありませんが、このリンクは構文にかなり精通しているようです。
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
私は通常フロートに固執し、これを読んだ後display: table
、チャンスを与えるかもしれません. フロートを使用するときは、ある種のclear: both
div でフォローアップする必要があります。display: table
その問題に対するより効率的で受け入れられる解決策のようです。
前述のように、テーブルは表形式のデータに最適です。また、大量の動的データを取得するときにテーブルを使用することも好きです。テンプレートの開発には、CSS を使用します。