HTML таблица, разметка страницы

volodya66

Такая проблема:
Страница разбита на шапку, меню слева, контент, футер и ещё справа ячейка (высотой шапка+контент).


<table width="100%" style="height:100%" border="0" cellspacing="0" cellpadding="0">

<tr>

   <td colspan="2" style="width:100%">Шапка</td>

   <td rowspan="2" style="height:100%">

        <img .../></td> 

</tr>

<tr>

    <td style="height:100%">Меню</td>

    <td style="width:100%; height:100%">Контент</td>

</tr>

<tr>

    <td colspan="3" style="width:100%">Футер </td>

</tr>

</table>

Когда в эту правую ячейку вставляешь картинку, то в шапке сверху и снизу появляются пустые места. Почему? Как от них избавиться?

kruzer25

Потому что табличный дизайн - зло!

pitrik2

потому что не надо использовать rowspan
все браузеры его неадекватно понимают (во всяком случае неадекватно человеческому восприятию)
твой пример переписывается както так:


<table width="100%" style="height:100%" border="0" cellspacing="0" cellpadding="0">

<tr>

   <td style="width:100%">



<table>

<tr>

    <td colspan="2" style="width:100%">Шапка</td>

</tr><tr>

    <td style="height:100%">Меню</td>

    <td style="width:100%; height:100%">Контент</td>

</tr></table>

   

   </td>

   <td style="height:100%">

        <img .../>

   </td> 

</tr>

<tr>

    <td colspan="2" style="width:100%">Футер </td>

</tr>

</table>

volodya66

Ясно. Спасибо большое!

volodya66

Ну да....

valodyr

Когда приходится верстать в том числе под осла, особенно 6-го, часто от таблиц никуда не деться.

pitrik2

Когда приходится верстать в том числе под осла, особенно 6-го, часто от таблиц никуда не деться.
глупости
таблицы можно совершенно не использовать для верстки
да, могут возникнуть трудности, часто приходится разные css стили для разных браузеров писать
но не бывает такого, что без таблиц не обойтись

valodyr

Как ты будешь эмулировать min-height в осле?

artimon

В осле с этим height неплохо справляется.

pitrik2

дополню примером
установка min-height для всех брузеров


style="height: expression('32px'); min-height: 32px;"

первую команду проигнорят все брузеры кроме ие, вторую команду наоборот

artimon

Только лучше не expression, а conditional comments (<>) или underscore hack (_height: 32px). Т.к. expression не работает при выключенном JS.
Оставить комментарий
Имя или ник:
Комментарий: