Ширина таблицы html или наш сайт куда-то уехал

Ширина таблицы в html — вещь довольно хитрая. В общем случае, если не указано иное, она будет рассчитываться браузером самостоятельно исходя из ширины ейных ячеек. А ширина ейных ячеек, если не проставлена, будет рассчитываться исходя из засунутого в них контента. Т.е. если вы запихали в нее контента шире чем ячейка (изображение или длинное слово без пробелов) — ячейку разопрет. А если разопрет ячейку то и таблицу разопрет тоже. В общем, ширина таблицы не всегда будет такой какую вы указали. Сходите по ссылке, если кому-то интересны подробности особенностей работы с таблицами.
Я же добавлю от себя один момент, который возможно пригодится при верстке html-страниц.
Суть вопроса в том, что зачастую сайты делаются фиксированной ширины, например 900 или 1200 пикселей — не суть важно. После добавления навигации справа-слева (два столбца по 200 допустим) осталось 500 или 800 пикселей, на контент. А чо? Нормально.
Конечно нормально. Но я не единожды сталкивался с такой проблемой:  звонит мне человек и говорит — «посмотри, пожалуйста, что-то у нас сайт поехал». Не единожды. Часто проблема в ширине таблиц для которых в html-разметке страницы не хватает места. Как правило смотришь и видишь, что при ширине на весь контент 500-600 пикселей, у таблицы стоит атрибут width=»856″ допустим. Да. Так написано в документации. Так и надо писать. И естественно таблица (а иногда это бывает фотка) раздвигает границы дозволенного и сайт уезжает.
Отчего так происходит. В кмс в админке, зачастую ширина окна для ввода текста в wysiwyg-редакторе много больше, чем ширина для отображения текста на странице. А во многих wysiwyg-редакторах есть еще и замечательная функция для работы с таблицей — растянуть ширину ячейки держась за краешек таблицы. Естественно юзеры растягивают. Как правило во всю ширину окна редактора — 1200 — давай! А еще у них мониторы бывают дорогущие — 1500 растянем, фигли.
Редактор тоже не дурак — растянули — значит надо. Запишем атрибут width.
Ну а потом звонят посмотреть. Дело конечно благодарное. Посидишь полдня, потом за 3 минуты заверстаешь по-уму, а потом еще и денег возьмешь иной раз.
Но я на всякий случай все же пишу сразу в css-файле: .content table {max-width:100%}
Это конечно не во всех браузерах сработает, хотя бы потому что max-width старые ослики не понимают, но они же старые. Опять же есть модные редакторы, которые научились писать inline стили и вместо width=1300, напишут style=»width:1300px», а иногда и то и другое. Тогда конечно и этот маленький трюк не поможет. Но в целом эта строчка никому лишних проблем не доставит, а зато иногда поможет их избежать. Ведь так?
Еще, кстати, можно добавить для .content {overflow:hidden} — тогда все выбивающееся за рамки нормального, упрячется куда-то под границы блока, а не раздвинет его, но могут быть и непредвиденные сложности.
Все вышесказанное касается, кстати, и изображений.

Метки: , , , ,

Добавить комментарий

Перед отправкой формы:
Human test by Not Captcha