Сложные таблицы
Уже было сказано, что работа Web-дизайнера – по большей части не наука (здесь вернее сказать – технология), а искусство (а зачастую – просто шаманизм). И, как в любом искусстве, здесь нет готовых путей решения той или иной проблемы. Есть только общие рекомендации и толстенные руководства по HTML и Web-обозревателям, не всегда и не во всем помогающие.
В процессе работы вы выясните, что стандарты HTML понимаются разработчиками Web-обозревателей по-своему, а сами программы Web-обозревателей содержат уйму ошибок, из-за которых правильный код отображается совсем не так, как должен. Мало того, сами средства HTML весьма ограничены и вам придется изрядно поломать голову над некоторыми особо сложными элементами дизайна.
Выход из этого положения? Вряд ли он существует… Конечно, программы Web-обозревателей постепенно приближаются к стандартам HTML, количество ошибок и несовместимостей в них уменьшается, а программы Web-редакторов становятся все "умнее" и проще в использовании. Но это не заменит обычной человеческой изобретательности. И Web-дизайн еще долго будет искусством (а зачастую – просто шаманизмом) и вряд ли когда-нибудь, даже в отдаленном будущем, полностью превратится в технологию.
Конечно, со временем к вам придет опыт, появятся свои наработки, свой стиль. Это вам сильно поможет в работе. Также очень помогает общение с другими, даже не обязательно более опытными Web-дизайнерами. Ведь давно ясно, что все сложности лучше решать сообща.
Посмотрите, например, на рис. 5.39. Это список увлечений нашего гипотетического героя. Давайте воплотим его в HTML.
Вы сразу скажете, что HTML не позволяет делать такие сложные таблицы. Да, напрямую не позволяет. Но сделать ее все-таки можно, и для этого нам придется воспользоваться все теми же вложенными таблицами.
Примечание
Вообще-то такую таблицу можно сделать стандартными средствами HTML, воспользовавшись уже знакомым вам слиянием ячеек. Но в этом случае вам не удастся сделать такую рамку, какую вы видите на рис. 5.39.
Посмотрите хорошенько на рис. 5.39. Что вы видите? В первую очередь, большую таблицу из четырех ячеек. В этих ячейках располагаются четыре вложенные таблицы, отформатированных различным образом. Две из них представляют собой секции таблицы: "Компьютеры" и "Прочие", а две другие – заголовки названных секций. Это логическая структура таблицы, и ее тоже нужно хорошо себе представлять. Но нас в данный момент больше интересует физическая структура, описывающая, как отформатированы все эти вложенные таблицы.
Рис. 5.39. Список увлечений Ивана Ивановича Иванова
Чтобы лучше понять физическую структуру, давайте пока отложим в сторону клавиатуру и мышь и возьмем лист бумаги. Нарисуем на нем нашу большую таблицу и в каждой ее ячейке напишем параметры форматирования вложенных таблиц. У нас получится такой список:
- одна строка, один столбец, черный фон;
- три строки, три столбца, белый фон, невидимая граница;
- одна строка, один столбец, черный фон;
- две строки, три столбца, белый фон, невидимая граница.
Заметьте, что здесь перечислены только главные параметры. Остальное будет определено позднее, в самом конце. Сейчас же нам нужно выяснить для себя то, без чего настоящая таблица у нас не получится.
Итак, параметры форматирования вложенных таблиц мы выяснили. Осталось определить параметры внешней таблицы. А они таковы (напишите их на том же листе бумаги):
- четыре строки и один столбец;
- толщина границы должна быть равна нулю;
- параметр Cell Padding равен двум пикселам. Если мы хотим сделать видимую границу, то должны прибегнуть к приему, описанному ранее;
- цвет фона – черный.
Опять же, мы не стали выяснять малозначительные параметры. Выясним их позднее.