htmlテーブルの代わりにdivを使用しますが、テーブルは簡単です

Question

私はプログラマです。私は目の中にテーブルのように見えるものを追加し、htmlテーブルを使用する必要があるときはいつも私の仲間のウェブデザイナー。 divの共通のhtml div構造を構築すると、テーブルのようなものが必要なときにいつでもhtmlをコピーしてコピーすることができます。したがって、この表のHTML構造

<table> 
<tr><td></td><td></td></tr> 
<tr><td></td><td></td></tr> 
<tr><td></td><td></td></tr> 
</table> 

同様のdivの構造は何であるの場合の

？

Answer 1

：

CSS：

.table 
{ 
    display:table; 
} 

.table-row 
{ 
    display:table-row; 
} 

.table-cell 
{ 
    display:table-cell; 
} 

HTML：

<div class="table"> 
    <div class="table-row"> 
     <div class="table-cell">1</div> 
     <div class="table-cell">2</div> 
    </div> 
    <div class="table-row"> 
     <div class="table-cell">3</div> 
     <div class="table-cell">4</div> 
    </div> 
</div> 

Demo

注こと,table-rowおよびtable-cell IE7以下では表示値がサポートされていないため、IE8には！DOCTYPEが必要です。

また、テーブルは、クラスを持つdivの束に比べてより意味的な意味をマークアップするので、表形式のデータを表すために使用する必要があります。レイアウトの目的でテーブルを使用しないでください。

Answer 2

私は簡単にするためにインラインスタイルを使用しますが、実際のプロジェクトでそれらをお勧めしません：

<div style="overflow: hidden"> 
    <div style="width: 50%; float: left"></div> 
    <div style="width: 50%; float: right"></div> 
    <div style="width: 50%; clear: both; float: left"></div> 
    <div style="width: 50%; float: right"></div> 
</div> 

これは、多くのソリューションの1つです。

overflow: hiddenビットは、コンテナdivを「自己クリア」するために使用されます（divは浮動小数点を囲みません）。 3番目のdivが両方をクリアする理由は、それがそれ自身の行にレンダリングされるためです。

編集：divは50％幅なので、他のdivをすべて右に浮かべる必要はありません（左に浮かべるとすべて同じに見えます）が、divの間に余白が必要な場合は幅を変更するだけで、他のdivはすべて右に揃えられます（すべてが左に浮動する場合はそうではありません）。

編集：実際に表のデータをマークアップしている場合（いくつかのコメントが示唆しているように）、テーブル要素に固執してください。それがそこにあるのです。 は絶対にでなければなりません。table、tr、tdからdivに同じ名前のクラスがあります。あなたが表示table、table-row、およびtable-cellを使用したいと思う

Answer 3

表形式のデータにHTML table要素を使用している場合は、仲間のウェブデザイナーを元気に戻すことをおすすめします。

表形式のデータを表示するときにHTML tableを使用するには、HTML表が悪いことではありません。&をお薦めします。

http://webdesign.about.com/od/tables/a/aa122605.htm

Answer 4

私が提案しpowerbuoyのようないくつかのレイアウトを使用することをお勧めしていますが、さまざまなシナリオで異なるサイズの構造に合うようになるでしょうので、あなたが設計レイアウトを集中するために、あなたのCSSでグリッドシステムを使用したい場合があります。

.left { float:left; } 
.right { float: right } 
.onetenth { width: 10%; } 
.onetwentieth { width: 5%; } 

のように...

私は、このアプローチは、より高い性能が得られ抽選であなたのスタイリングを削減するあなたを約束します。

参照：https://github.com/stubbornella/oocss/wiki/（オブジェクト指向CSS）