Блоки,.. таблицы,.. Главное - хвост.
/me протирает красные глаза
Скажите, а неделя «блочная/табличная-вёрстка-круче!» уже прошла или ещё есть пара свободных билетов?
В приведённом ниже куске (на результат можно и не смотреть) имена тэгов не имеют значения при создании визуального каркаса (в два ночи умнее слов…).
Q: Так что же такое «блочная верстка»?
Интересное понятие, ага. Что это? Вёрстка дивами «потому что модно» или создание логической структуры документа, «потому что w3c»?
Первое отдыхает. Пройдёт. Второй подход более основателен, но жизнь вносит свои коррективы. Всё упирается в количество времени, желания и опыта.
Если уж дошло до спора DIV/TABLE и участники ведут себя благоразумно, то в конечном итоге остаются лишь две большие буквы: «IE» (остальные слишком мелковаты на их фоне). И мирно расходятся работать дальше. Одни продолжают лепить таблицы, а у других — желание.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Who need TABLES?</title>
<style type="text/css">
<![CDATA[
html, body {
margin:0 auto;
height:100%;
color:#000;
background-color:#fff}
body {
display:table;
width:400px}
body > div {display:table-row}
div div {
display:table-cell;
text-align:center;
border:2px dotted #333}
div + div div {
vertical-align:bottom;
border-top:none}
table, tr, td {display:block}
td {position:absolute}
table tr:first-child td {
position:static;
float:right}
]]>
</style>
</head>
<body>
<div><div>111</div></div>
<div><div>
222
<table>
<tr><td>333</td></tr>
<tr><td>444</td></tr>
</table>
</div></div>
</body>
</html>Categories: Web-билдинг | comments: (3)
Комментарии
1. +_+ 21st September 2005 - 09:11
Divs must div!
2. gray 21st September 2005 - 11:55
Меня давно накрывает когнитивный диссонанс на эту тему: по уму делать надо вот так, а по работе — вот эдак. Если начать с семантики, то 3/4 того, что есть на «среднестатистической» странице, надо бы выкинуть — просто потому, что оно посетителям там нахрен не впилось (зато нравится начальнику); и уж только тогда обсуждать вёрстку…
3. borr 16th November 2005 - 20:14
таблицы это, конечно, атавизм некоторый, но с помощью верстки дивами нельзя достичь некоторых возможностей, которые делаются таблицами очень просто, ну или я просто не знаю как это сделать правильно… для формирования табличной верстки дивами я использую display:table; и т.д. вот пример —
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>$pagetitle</title>
<style type="text/css">
<![CDATA[
body {
margin:1em;
padding:0;
font-family:"bitstream vera sans";
font-size:75%;
}
body > div, table {
display:table;
margin:0 auto;
border-collapse:collapse;
}
body > div > div, tr {
display:table-row;
}
div, td {
display:table-cell;
padding:1em;
border:thin solid gainsboro;
text-align:center;
}
div > div > div:hover, td:hover {
background-color:gainsboro;
}
table {
margin-top:.5em;
}
]]>
</style>
</head>
<body>
<div>
<div>
<div>table-cell</div>
<div>table-cell</div>
</div>
<div>
<div>table-cell</div>
</div>
</div>
<table>
<tr>
<td>table-cell</td>
<td>table-cell</td>
</tr>
<tr>
<td colspan="2">table-cell</td>
</tr>
</table>
</body>
</html>
хочу, чтобы вторая строка сформирвоанная дивом была растянута на ширину двух верхних ячеек, в таблице все делает просто — colspan="2"…
Mash:
В спецификации CSS2 написано, что «Ячейки могут захватывать несколько рядов и столбцов. (Хотя CSS2 не определяет, как вычисляется количество захваченных рядов или столбцов, ПА может иметь специальные сведения о документе-источнике; будущая версия CSS может предоставить способ выражения этих сведений в синтаксисе CSS.)»
P.S. Opera прекрасно откликается на colspan дива.
P.P.S. Если это будет использоваться для представления табличных данных, то дивы и не нужны. В противном случае…