CSS estilo de tabla-como

Question

Quiero crear el siguiente elemento de la tabla-como en mi página:

Solía ​​hacerlo utilizando <table>...<table> etiquetas, pero ahora estoy cambiando todos mis sitios a CSS y estoy m usando DIVs y tal. Me gustaría saber cuál es la "mejor" forma de lograr este tipo de elemento (¿sigue siendo la etiqueta <table>?). No quiero crear solo 3 columnas y separar elementos en la misma columna con <BR /> ya que me gustaría controlar el espacio entre elementos en la misma columna (como entre Item1 y Item4).

Gracias!

Joel

Answer 1

Uso de tablas para crear su diseño es generalmente mal visto. El uso de los divs junto con CSS para tabular datos también está mal visto. La mejor manera, como lo hizo su pregunta, es usar tablas en esta ocasión.

A menos que, por supuesto, los elementos representados en su imagen no sean datos tabulados, sino contenedores/cajas que a su vez contendrán los datos respectivos. En cuyo caso, probablemente recomendaría CSS.

Answer 2

uso display:table, display:table-row, display:table-cell

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

<div id="table"> 
 
    <div class="row"> 
 
    <div class="cell">Item 1</div> 
 
    <div class="cell">Item 2</div> 
 
    <div class="cell">Item 3</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell">Item 4</div> 
 
    <div class="cell">Item 5</div> 
 
    <div class="cell">Item 6</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell">Item 7</div> 
 
    <div class="cell">Item 8</div> 
 
    <div class="cell">Item 9</div> 
 
    </div> 
 
</div>

ejemplo vivo http://jsbin.com/awagu4

... pero sugiero que uses table etiqueta html si necesita una mesa. Por esta razón existe, y luego puedes modificarlo con css. En cualquier caso, ambas soluciones tienen el mismo resultado.