Портал для веб-мастера
Вход пользователей
Поиск статей
WoWeb.ru » Статьи » Программирование для Web » HTML

Баг в таблице
В этой статье я расскажу о особенностях в 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%.

Автор статьи - Zealot www.rupixel.com

Автор: Zealot · Добавлена: 2008-02-11 · Добавил: rupixel-com
Источник статьи · Просмотров: 2110 · Рейтинг: 5.0

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории раздела
Flash
Apache
WWW
PhotoShop
Веб-дизайн
Раскрутка и реклама
Базы данных
3D графика
Хостинг
Истории веб-мастеров
Web-технологии
Сетевая безопасность
Программирование для Web
Операционные системы

Новые статьи
Лучшие статьи
Популярные статьи
Комментируемые статьи
Разделы сайта
Скрипты
Статьи
Шрифты
Флэш исходники
HTML шаблоны
Партнерки
Клипарты
Смайлы
Фоны
Гифы
Иконки
Опрос сайта
Ведете ли вы блог?
Всего ответов: 59902
Наша кнопка
WoWeb.ru - портал для веб-мастера