Баг в таблице

В этой статье я расскажу о особенностях в html которые должен знать
каждый. Я расскажу как обойти ошибку на которые я сам натыкался. Без
того что я расскажу будет сложно в будущем. Нередко возникают вопросы у
веб-мастеров о html. Рано или поздно сам находишь ошибки которые
совершал и раньше. В статье я буду говорить по большей части о
табличном html. Именно сложная структура сайта лежит в таблицах и
именно в них происходят сбои. В большом количестве таблиц можно лекго
запутаться и когда потом открываешь свой код немного позже бывает
сложно что-то найти и изменить.


Всем известно что для того чтобы страничка корректно отображалась при
разрешении 800x600 и 1024x768 нужно таблице прописывать width=100%. В
следствии чего она просто растягивается на весь экран в ширину. И
прописывать height=100% если вы хотите чтобы она растягивалась по
длине. Вот код такой таблицы:



<table width=100% height=100% border=0 cellpadding=0 cellspacing=0><tr>
<td width=100%>


</td></tr><table>


Вроде бы всё нормально должно работать. Но может возникнуть ситуация
при которой таблица работает не совcем правильно. Например у вас две
ячейки. Одна меню, другая там где новости пишутся. Вы хотели бы чтобы
меню имело ширину 200, и ячейка с новостями растягивалась на всю
остальную страницу (width=100%). Обрадовавшись вы напишите вот что:




<table width=100% height=100% border=0 cellpadding=0 cellspacing=0><tr>

<td width=200>меню</td>

<td width=100%>новости</td>


</td></tr><table>


Но работать она к сожалению не будет правильно. Почему? Потому что
ячейка с новостями растянется на всю абсолютно страницу, т.е. меню не
будет видно(если конечно что-нибудь не вписать туда). Но даже если туда
что-то вписать она не будет иметь ширину 200 пикселей. Как же быть. Вот



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

<tr>

<td width=200>

<table width=200 border=0 cellpadding=0 cellspacing=0><tr><td width=200>

меню

</td></tr></table>

</td>

<td width=100%>

<table width=100% border=0 cellpadding=0 cellspacing=0><tr><td width=200>

новости

</td></tr></table>

</td>

</tr></table>



Для того чтобы ячейка с меню устоялась впихиваем туда таблицу с такой
же шириной. Для новостей уже не обязательно вписывать табличку, но на
всякий случай не помешает.
А теперь пора поговорить о багах которые могу произойти в этом случае.
Например у вас сверху картинка(логотип на сайте). Для неё вы создаёте
ячейку. А потом следующую за ней с таким фоном как у картинки чтобы как
бы продолжался топ. Для этой второй ячейки вы ставите width=100%. Далее
переходите ниже - делаете меню и новости. Вроде бы всё хорошо и всё
работает при всех разрешениях. Вот код:



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

<tr>

<td width=1><img src=pix.gif border=0></td>

<td width=100%></td>

</tr>

<tr>

<td width=200 height=100%>

<table width=200 height=100% border=0 cellpadding=0 cellspacing=0>

<tr><td>

меню

</td></tr></table>

</td>

<td width=100% height=100%>

новости

</td>

</tr>

</table>

Но
попробуйте в новости запихнуть баннер 768x60. Или написать слово из 50
символов. У вас сразу появиться нижний скроллинг. Табличка с новостями
будет работать не правильно, она будет растягиваться не так. Чтобы
избежать ячейки где логотип помещён поставить значение ширины 100%. А
вторую ячейку убрать. Даже если вам надо ещё в конце картинку - вы её
ставите во вторую ячейку, а первой всё равно ставите width=100%.