CSS таблицы как стиль

Question

Я хочу создать следующую таблицу, как элемент в моей странице:

я использовал, чтобы сделать это с помощью <table>...<table> тегов, но теперь я переключение на все мои сайты в CSS и я м с использованием DIV и т. д. Я хотел бы знать, что такое «лучший» способ достичь такого типа элемента (это все еще тег <table>?). Я не хочу создавать только 3 столбца и отдельные элементы в том же столбце с <BR />, так как я хотел бы контролировать расстояние между элементами в одном столбце (например, между Item1 и Item4).

Спасибо!

Joel

Answer 1

Использование таблиц для создания вашего макет обычно неодобрительно. Использование divs вместе с CSS для таблиц данные также неодобрительны. Лучший способ - по вашему вопросу - использовать столы по этому поводу.

Если, конечно, элементы, представленные на вашем изображении, не являются табличными данными, а контейнерами/ящиками, которые, в свою очередь, будут содержать соответствующие данные. В этом случае я, вероятно, рекомендую CSS.

Answer 2

использование 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>

Живой пример http://jsbin.com/awagu4

... но я предлагаю вам использовать table HTML тег, если вам нужна таблица. По этой причине существуют, а затем вы можете изменить его с помощью css. В любом случае оба решения имеют одинаковый результат.