- может ли div действительно заменить таблицы для макета?
Как правило, к этому стоит стремиться. Но для всего ? Нет. Существуют распространенные конструкции таблиц, которые невозможно воспроизвести с помощью CSS, особенно если вы смешиваете измерения с фиксированным пикселем, относительно шрифта и относительно области просмотра в одной таблице. Сложные макеты жидкой формы являются обычным случаем для этого.
Теоретически вы можете заменить <table>, <tr> и <td> на div, стилизованные под display: table-cell et al. Однако это не сработает в IE и представляет сомнительную полезность: вы по-прежнему просачиваете проблемы компоновки в разметку так же, как если бы это была таблица. (Кроме того, вы не можете использовать такие составные столбцы / строки.)
Я попал в беду, например, для создания div с углами.
Вы имеете ввиду с углами изображения? Это действительно легко. Но хитрость заключается не в том, чтобы попытаться сделать это путем расположения элементов. Вместо этого используйте вложенные div, каждый со своим фоном. Например:
<div id="foo"><div class="left"><div class="right">
Content.
</div></div></div>
#foo { background: url(mainbackground.gif); }
#foo .left { background: url(leftborder.gif) top left repeat-y; }
#foo .right { background: url(rightborder.gif) top right repeat-y; padding: 32px; }
Это дает вам левую и правую границу изображения, наложенного на основной фон. Вы можете сделать то же самое три раза, чтобы получить полную таблицу, как с 8 обрамлением изображений, или просто вложить делители глубиной девять. Вы можете уменьшить количество необходимых делений с 3 до 2, если можете включить основное фоновое изображение в одно из изображений границы (для этого могут потребоваться очень широкие изображения, если элемент может увеличиться). Вы можете использовать отступы для некоторых элементов, если необходимо, чтобы изображения границ были прозрачными (т. Е. Основное фоновое изображение не должно отображаться по краям).
В будущем это станет намного проще и избавит от необходимости так много вложенной разметки, благодаря предложенному CSS3 нескольким фонам на элемент и границам изображений .