invece di tabelle html usa div .. ok ma le tabelle sono facili così

Question

Ragazzi io sono un programmatore e quando ho bisogno di aggiungere qualcosa che assomiglia ad un tavolo negli occhi e usare tabelle html, mi viene sempre smaked dal mio compagno web progettisti. Come posso costruire una struttura div html comune per div in modo da poterla semplicemente copiare e incollare sempre l'html ogni volta che ho bisogno di qualcosa che assomigli ad un tavolo?

Quindi, nel caso di questo tavolo struttura html

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

qual è la struttura div simile?

Answer 1

Ti consigliamo di utilizzare il display table, table-row, e table-cell:

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

Si noti che la table, table-row e table-cell i valori di visualizzazione non sono supportati in IE7 o inferiori e IE8 richiede un! DOCTYPE.

Inoltre, le tabelle devono essere utilizzate per rappresentare dati tabulari in quanto forniscono al markup un significato più semantico su un gruppo di div con classi. Non dovresti usare le tabelle per scopi di layout.

Answer 2

userò gli stili inline per semplicità, ma non li consiglierei in un vero e proprio progetto:

<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> 

Questa è una delle tante soluzioni.

Il bit overflow: hidden viene utilizzato per "auto liberare" il contenitore div (senza che div divida attorno ai suoi figli flottanti). Il motivo per cui il terzo div cancella entrambi è in modo che venga visualizzato sulla propria riga.

Edit: Dato che i div sono del 50% di larghezza non c'è bisogno di fluttuare tutti gli altri div a destra (puoi farlo galleggiare tutti a sinistra e sembrerà identico) ma se vuoi un margine tra i div puoi basta cambiare la larghezza e ogni div sarà ancora allineato a destra (che non sarebbe il caso se fossero tutti flottati a sinistra).

Modifica: se si stanno infatti marcando i dati tabulari (come suggeriscono alcuni commenti), quindi attenersi assolutamente all'elemento tabella. Ecco a cosa serve. Si consiglia di non assolutamente non passare semplicemente da table, tr e td a div s con le classi con lo stesso nome.

Answer 3

Se si utilizza l'elemento HTML table per dati tabulari, quindi si consiglia di rompere i tuoi colleghi web designer!

Le tabelle HTML non sono malvagie, è consigliabile & consigliata per utilizzare l'HTML table durante la visualizzazione di dati tabulari.

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

Answer 4

Vorrei suggerire di utilizzare alcuni di layout come PowerBuoy suggerito, ma dal momento che si vuole adattare la struttura alle diverse dimensioni in diversi scenari che si potrebbe desiderare di utilizzare un sistema a griglia nel CSS di centralizzare la progettazione del layout .

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

e così via ...

ti prometto questo approccio consente di ridurre i styling da un sacco con conseguente prestazioni più elevate.

vedi: https://github.com/stubbornella/oocss/wiki/ (CSS orientata agli oggetti)