- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
.....
<table width=100% border=1>
<colgroup .....>
.....
<tr>
<td colspan=2>(тут шапка)</td>
</tr>
<tr>
<td width=60% colspan>(слева)</td>
<td width=40% colspan>(справа)</td>
</tr>
.....
</table>
.....
Нужна простота - используй таблицы, нужна красота - используй дивы
#center{
width:200px;
height:200px;
background:#333;
color: #fff;
position:absolute;
margin: -100px 0 0 -100px;
left:50%;
top:50%;
}
</style>
<div id="center">Попробуй сделать оптимальнее на таблах</div>
и ничего лишнего :P
<table cellspacing="2" cellpadding="2" border="1" width="150">
<tr>
<td rowspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
и ничего лишнего :P
P.S. Это лучше скопировать и посмотреть как выглядит
td{
color: #fff;
background:#333;
}
</style>
<table height=100% align=center>
<tr><td><table width=200 height=200><tr><td>Делать маленький код оптимальнее безполезно</td></tr></table></td></tr>
</table>
Как ниже грамотно заметили, сложную разметку проще сделать таблицами + она будет стабильно отображаться во всех браузерах одинаково без танцев с бубнами. Согласен с lener, что для маленькой декаративной разметки приятнее использовать div, но вопрос был именно об "основной" разметке сайта как в сабже.
это не есть правда.
Главное не фанатеть от чего-то одного, а то я видел, когда список товаров (чистой воды таблица) выводился дивами.
P.S.: Очень хочу чтобы меня в этом кто-нибудь переубедил. Ведь типа же модно верстать div'ами..
Рендер идет сразу же по мере получения кода разметки, но в этом случае ширина столбцов будет либо конкретно определена заранее, либо по первой строке.
http://htmlbook.ru/html/table.html
<style>
div {display: block; border:1px solid #000;}
#sidebar{ float: left; width: 60%;}
#content{ margin-left: 60%;}
</style>
разметка
<div id="header">(тут шапка)</div>
<div id="sidebar">(слева)</div>
<div id="content">(справа)</div>
<table width=100%>
<tr><td>(тут шапка)</td></tr>
<tr><td width=40%>(слева)</td></tr>
<tr><td width=60%>(справа)</td></tr>
</tr></table>
Див кода меньше, даже если css кода было бы больше чем html оно бы всеравно грузилась быстрее, css двигло обрабатывает css быстрее чем html дмигло - хтмл + css кэштруется, html - нет, по поводу нестабильности ДИВов - дело в руках.
P.S.: до сих пор не считаю говнокодом каркас из таблиц ;)
<html>
<head>
<!--[if IE]>
<script>
document.createElement('header');
document.createElement('aside');
document.createElement('article');
</script>
<![endif]-->
<style>
header, article, aside, {display: block; border:1px solid #000;}
article{ border:1px solid #000; float: left; width: 40%; }
aside{ margin-left: 40%;}
</style>
</head>
<body>
<header>(тут шапка)</header>
<article>(слева)</article>
<aside>(справа)</aside>
</body>
</html>
Немного погуглив набросал тоже самое на html5, хоть он и в разработке, но браузеры его поддерживают(не считая небольшой финт для IE6). Говнокод? Выглядит осмысленнее чем куча div'ов.. Без хака для IE - меньше даже чем на таблицах...
От них никогда не избавишься, пока не выкинешь.
<header>
<table cellspacing="2" cellpadding="2" border="1" width="150">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td> <div style="padding-left:10px"> <font face="Arial" size="5"> Новости </font></div> </td>
<td> <img src="spacer.gif" width="200" /> </td>
</tr>
</table>
</header>
// ыыы
такое сейчас только готовый инструментарий шепает, не руками же такое писать?