В этой статье я
расскажу об особенностях 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%.
Автор: ORC