en lugar de tablas html use div .. ok pero las tablas son fáciles así que

Question

Chicos Soy programador y cuando necesito agregar algo que se ve como una tabla en el ojo y uso tablas html, siempre me gusta mi compañero web diseñadores. ¿Cómo puedo construir una estructura html div común para divs así puedo simplemente tenerla y siempre copiar pegar el html cuando necesito algo que se parece a una tabla?

Así, en el caso de esta estructura html tabla

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

lo que es la estructura div similar?

Answer 1

Usted querrá utilizar la pantalla table, table-row y 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

Tenga en cuenta que la table, table-row y table-cell los valores de visualización no son compatibles con IE7 o inferior y IE8 necesita un! DOCTYPE.

Además, las tablas se deben usar para representar datos tabulares, ya que le da al marcador un significado más semántico sobre un grupo de div con clases. Usted simplemente no debería usar tablas para propósitos de diseño.

Answer 2

voy a utilizar los estilos en línea de simplicidad, pero no lo recomendaría en un proyecto real:

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

Ésta es una de las muchas soluciones.

El bit overflow: hidden se usa para "borrar automáticamente" el contenedor div (sin él, el div no se ajustará alrededor de sus hijos flotados). La razón por la cual el tercer div aclara ambos es para que se renderice en su propia fila.

Editar: Dado que los divs tienen un ancho del 50%, no hay necesidad de flotar cada dos div a la derecha (puede flotarlos todos a la izquierda y se verá idéntico) pero si quiere un margen entre los divs puede simplemente cambie el ancho y todos los demás div estarán alineados a la derecha (lo que no sería el caso si todos estuvieran flotando hacia la izquierda).

Editar: Si de hecho está marcando los datos tabulares (como sugieren algunos comentarios), apóyate con el elemento de la tabla. Para eso está ahí. Debe absolutamente no simplemente cambie de table, tr y td a div s con las clases del mismo nombre.

Answer 3

Si está utilizando el elemento HTML table para datos tabulares, ¡entonces le recomiendo que vuelva a golpear a sus colegas diseñadores web!

Las tablas HTML no son malas, es aceptable & recomendado, para usar HTML table al mostrar datos tabulares.

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

Answer 4

sugeriría a utilizar algún diseño como PowerBuoy sugerido pero ya que tendrá que adaptarse a la estructura de tamaño diferente en diferentes escenarios puede que desee utilizar un sistema de red en el CSS para centralizar la disposición de diseño .

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

y así sucesivamente ...

te prometo que este enfoque reducirá su estilismo de una gran cantidad que resulta en un mayor rendimiento.

véase: https://github.com/stubbornella/oocss/wiki/ (CSS orientado a objetos)