Таблиці CSS
Стилями можна перетворити будь-які блоки на таблиці. Використовуються такі стилі:
display: table;
display: table-cell;
display: table-row;
Якщо потрібно використати псевдо-табличну верстку для одного рядка - table-row можна опустити.
<p>
<span>Комірка 1</span>
<span>Комірка 2</span>
<span>Комірка 3</span>
</p>
p { display: table;}
span { display: table-cell;}
Зверніть увагу, що тег <p> в цьому випадку перестане займати всю ширину сторінки чи батьківського елемента і звузиться до мінімально можливої ширини. Задайте тегу width.
Якщо потрібно декілька рядків таблиці:
<div>
<p>
<span>Комірка 1</span>
<span>Комірка 2</span>
<span>Комірка 3</span>
</p>
<p>
<span>Комірка 4</span>
<span>Комірка 5</span>
<span>Комірка 6</span>
</p>
<p>
<span>Комірка 7</span>
<span>Комірка 8</span>
<span>Комірка 9</span>
</p>
<div>
div { display: table; }
p { display: table-row; }
span { display: table-cell; }
Є ще один корисний в деяких випадках стиль, який не дозволяє колонкам автоматично підлаштовувати свою ширину:
table { table-layout: fixed; }
