FAQpk FAQpk.ru   Войти   Зарегистрироваться  


faqpk.ru
Компьютерный форум
С оплатой за сообщения



faqpk.ru

Страница 1 из 11
Компьютерный форум » Web-Мастер » Справочник по HTML » Вёрстка веб-страниц: Табличная верстка (Известный способ верстки с использование таблиц)
Вёрстка веб-страниц: Табличная верстка
Вёрстка веб-страниц: Табличная верстка

Использование таблиц с невидимой границей — известный способ верстки, применяемый на множестве сайтов. Такая таблица фактически представляет собой модульную сетку, в которой удобно размещать отдельные элементы веб-страницы. Простота и быстрота верстки, а также корректное отображение в различных браузерах — вот основные преимущества табличной верстки.

Благодаря универсальности таблиц и большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но наметилась четкая тенденция — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.



источник htmlbook.ru
Дата: Понедельник, 11.01.2016. Сообщение # 1 Bro
Вёрстка веб-страниц: Табличная верстка

Использование таблиц с невидимой границей — известный способ верстки, применяемый на множестве сайтов. Такая таблица фактически представляет собой модульную сетку, в которой удобно размещать отдельные элементы веб-страницы. Простота и быстрота верстки, а также корректное отображение в различных браузерах — вот основные преимущества табличной верстки.

Благодаря универсальности таблиц и большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но наметилась четкая тенденция — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.



источник htmlbook.ru
Сообщение отредактировал Bro - Понедельник, 11.01.2016, 06:44
Дмитрий Асмус (Bro)
Модератор
Сообщений: 198
Нет на сайте
    

 
Преимущества и недостатки таблиц

Табличная верстка нынче совсем не в почете. Буквально на каждом углу кричат, что надо переходить к верстке с помощью слоев, потому что это соответствует стандартам, правильнее и вообще «прикольно». Почему слои лучше таблиц обычно не сообщают, так что приходится либо верить на слово, либо решать дилемму самостоятельно. Поэтому попытаемся объективно решить, что же представляют собой таблицы, где их следует применять, а где не стоит.

Сразу следует оговорить, что спор вокруг таблиц происходит только в том случае, когда они используются для верстки. Если дело касается хранения табличных данных, то не возникает сомнений, что таблицы именно для этой цели и предназначены.

Преимущества таблиц
Таблицы довольно долго властвовали в области верстки, поскольку предлагали достаточно простые методы для размещения разных элементов на веб-странице при отсутствии явных конкурентов. Благодаря наличию большого числа параметров, особенно границе нулевой толщины, таблица выступает в роли невидимой модульной сетки, относительно которой добавляется текст, изображения и другие элементы. Удобство и широкие возможности верстки — вот основной реверанс в пользу таблиц. И на этом список не заканчивается, далее рассмотрены и другие плюсы таблиц.

Создание колонок
Одноколонная модульная сетка применяется на сайтах достаточно редко. Действительно, основной текст и ссылки по сайту удобнее располагать в разных колонках, разделяя их тем самым. Таблицы же хорошо выступают в качестве многоколонной модульной сетки, каждая ячейка представляет собой отдельную колонку. Это позволяет легко создавать двух- и трехколонный макет документа. При изменении размера окна браузера, колонки сохраняют свой исходный вид, а не переносятся как слои друг под друга. К тому же высота разных колонок при использовании таблиц остается одинаковой, независимо от объема их содержимого.

«Резиновый» макет
Таблицы удачно подходят для «резинового» макета, ширина которого привязана к ширине окна браузера. Благодаря тому, что размер таблицы можно задавать в процентах, она занимает все отведенное ей свободное пространство. Также можно регулировать и высоту содержимого. Например, если текста немного, то «подвал» страницы может висеть в ее середине. Параметрами таблицы можно отрегулировать это так, что при небольшом тексте «подвал» плотно прилегает к нижнему краю окна браузера, независимо от размеров окна.

«Склейка» изображений
Рисунки часто разрезают на отдельные фрагменты, а затем собирают их вновь в одно целое, выкидывая одни фрагменты или заменяя их другими изображениями. Это требуется для различных дизайнерских изысков вроде создания эффекта перекатывания, анимации или уменьшения объема файлов. Таблицы позволяют легко обеспечить «склейку» нескольких рисунков в одно изображение. Каждая картинка помещается в определенную ячейку, параметры таблицы при этом устанавливаются такими, чтобы не возникло стыков между отдельными ячейками.

Фоновые рисунки
В ячейки таблицы разрешается добавлять фоновый рисунок, в зависимости от размеров ячейки он может повторяться по горизонтали, вертикали или сразу в двух направлениях. За счет этого приема на странице создаются декоративные линии, рамки самого разнообразного вида, добавляется тень под элементом.

Выравнивание элементов
Содержимое ячеек можно одновременно выравнивать по горизонтали и по вертикали, за счет чего расширяются возможности по размещению элементов относительно друг друга и на странице в целом.

Особенности браузеров
Браузеры достаточно вольно толкуют некоторые параметры CSS, поэтому создание универсального кода с применением слоев может стать настоящей головной болью для разработчиков. В этом смысле таблицы отображаются в разных браузерах практически одинаково, поэтому создание веб-страниц упрощается.

Недостатки таблиц
Несмотря на описанные достоинства таблиц, у них есть и определенные недочеты, которые порой заставляют искать другие способы верстки.

Долгая загрузка
Особенность таблиц такова, что пока последнее слово в самом низу таблицы не загрузится, на экране содержимое ячеек отображаться не будет. Браузеры используют такой подход, чтобы получить всю информацию о таблице для правильного форматирования ее содержимого. Но если таблица велика по высоте, может пройти достаточно много времени, прежде чем мы увидим нужную информацию.

Существуют и способы обхода этого свойства, в частности, разбиение одной большой таблицы на несколько таблиц поменьше, а также использование стилевого свойства table-layout.

Громоздкий код
Таблицы содержат сложную иерархическую структуру вложенных тегов, которая увеличивает объем кода, и повышает сложность изменения отдельных параметров. В некоторых случаях для достижения желаемого результата приходится вкладывать одну таблицу внутрь другой, а это также влияет на размер «шелухи», т.е. кода, который не принимает непосредственного участия в отображении веб-страницы.

Плохая индексация поисковиками
За счет того, что текст располагается в отдельных ячейках таблицы, в коде он может находиться достаточно далеко друг от друга. Такая раздробленность информации, а также значительная вложенность тегов затрудняет правильное индексирование страницы поисковыми системами. Как результат документ не попадает в первую десятку выдачи запроса по ключевым словам, хотя вполне может и заслуживать это.

Нет разделения содержимого и оформления
В идеале HTML-код должен содержать только теги с указанием стилевого класса или идентификатора. А все оформление вроде цвета текста и положения элемента выносится в CSS и модифицируется отдельно. Такое разделение позволяет независимо править код страницы и менять вид отдельных ее элементов. Хотя к таблицам стиль легко добавляется, но обилие «лишних» тегов не позволяет действительно просто и удобно управлять видом отдельных компонентов страницы. К тому же не все параметры таблиц имеют свой стилевой синоним, поэтому в любом случае приходится обращаться к коду веб-страницы и править его.

Несоответствие стандартам
В последнее время стандарты HTML и CSS прочно засели в умах веб-разработчиков. Этому способствует развитие XHTML и XML, которые более «жестко» относятся к коду документа, появление новых версий браузеров, придерживающихся спецификации, и мода на верстку слоями.

Что же говорит спецификация относительно таблиц? А говорит она, что таблицы в первую и последнюю очередь нужны для размещения табличных данных. Все остальные способы использования таблиц осуждаются.

Применение таблиц для верстки
Разумеется, и плюсы и минусы таблиц не равнозначны между собой. То, что для одного сайта может быть простительно, для другого является грубейшей ошибкой. Поэтому опишем, в каком случае таблицы использовать для верстки логичнее, чем другие средства, в частности, слои. Итак, таблицы хорошо подходят в некоторых обстоятельствах, которые описаны далее.

Высота колонок должна быть одинаковой
Таблицы помогают установить колонки одинаковой высоты при разном объеме содержимого колонок. Разумеется, подобный эффект можно наблюдать только в том случае, если для колонок применяется фоновая заливка или добавляется рамка.

Макет должен занимать всю высоту окна браузера, независимо от объема информации
С помощью таблицы можно добиться эффекта, что нижняя часть страницы («подвал») выравнивается по нижнему краю окна браузера. Это имеет смысл в том случае, если объема данных не хватает для увеличения высоты документа. В противном случае часть страницы будет «висеть» в середине окна. Естественно, для документа достаточного объема его отображение происходит как обычно.

Нет времени на сложную верстку
Стоит признать, что табличная верстка если не легче, то гораздо привычнее, чем верстка с помощью слоев. Таблицы используют уже несколько лет и естественно, что приемы верстки с их помощью стали каноническими. Поэтому, в условиях лимита времени на создание сайта применение таблиц более чем оправдано. Кстати, многие дизайн-студии, занимающиеся разработкой сайтов, именно по этой причине отдают предпочтение табличной верстке. Результат получается планируемым и ожидаемым, а ошибок с отображением сайта в разных браузерах практически не возникает.

Если подходить критично к способам использования таблиц, то действительной причиной их популярности является консерватизм разработчиков, привычность и быстрота верстки сайтов с их помощью. Ясно одно — таблицы постепенно сдают свои позиции в пользу верстки слоями. Но пройдет еще несколько лет, прежде чем «табличные» сайты станут раритетом и исчезнут с простора Рунета.
Дата: Понедельник, 11.01.2016. Сообщение # 2 Bro
Преимущества и недостатки таблиц

Табличная верстка нынче совсем не в почете. Буквально на каждом углу кричат, что надо переходить к верстке с помощью слоев, потому что это соответствует стандартам, правильнее и вообще «прикольно». Почему слои лучше таблиц обычно не сообщают, так что приходится либо верить на слово, либо решать дилемму самостоятельно. Поэтому попытаемся объективно решить, что же представляют собой таблицы, где их следует применять, а где не стоит.

Сразу следует оговорить, что спор вокруг таблиц происходит только в том случае, когда они используются для верстки. Если дело касается хранения табличных данных, то не возникает сомнений, что таблицы именно для этой цели и предназначены.

Преимущества таблиц
Таблицы довольно долго властвовали в области верстки, поскольку предлагали достаточно простые методы для размещения разных элементов на веб-странице при отсутствии явных конкурентов. Благодаря наличию большого числа параметров, особенно границе нулевой толщины, таблица выступает в роли невидимой модульной сетки, относительно которой добавляется текст, изображения и другие элементы. Удобство и широкие возможности верстки — вот основной реверанс в пользу таблиц. И на этом список не заканчивается, далее рассмотрены и другие плюсы таблиц.

Создание колонок
Одноколонная модульная сетка применяется на сайтах достаточно редко. Действительно, основной текст и ссылки по сайту удобнее располагать в разных колонках, разделяя их тем самым. Таблицы же хорошо выступают в качестве многоколонной модульной сетки, каждая ячейка представляет собой отдельную колонку. Это позволяет легко создавать двух- и трехколонный макет документа. При изменении размера окна браузера, колонки сохраняют свой исходный вид, а не переносятся как слои друг под друга. К тому же высота разных колонок при использовании таблиц остается одинаковой, независимо от объема их содержимого.

«Резиновый» макет
Таблицы удачно подходят для «резинового» макета, ширина которого привязана к ширине окна браузера. Благодаря тому, что размер таблицы можно задавать в процентах, она занимает все отведенное ей свободное пространство. Также можно регулировать и высоту содержимого. Например, если текста немного, то «подвал» страницы может висеть в ее середине. Параметрами таблицы можно отрегулировать это так, что при небольшом тексте «подвал» плотно прилегает к нижнему краю окна браузера, независимо от размеров окна.

«Склейка» изображений
Рисунки часто разрезают на отдельные фрагменты, а затем собирают их вновь в одно целое, выкидывая одни фрагменты или заменяя их другими изображениями. Это требуется для различных дизайнерских изысков вроде создания эффекта перекатывания, анимации или уменьшения объема файлов. Таблицы позволяют легко обеспечить «склейку» нескольких рисунков в одно изображение. Каждая картинка помещается в определенную ячейку, параметры таблицы при этом устанавливаются такими, чтобы не возникло стыков между отдельными ячейками.

Фоновые рисунки
В ячейки таблицы разрешается добавлять фоновый рисунок, в зависимости от размеров ячейки он может повторяться по горизонтали, вертикали или сразу в двух направлениях. За счет этого приема на странице создаются декоративные линии, рамки самого разнообразного вида, добавляется тень под элементом.

Выравнивание элементов
Содержимое ячеек можно одновременно выравнивать по горизонтали и по вертикали, за счет чего расширяются возможности по размещению элементов относительно друг друга и на странице в целом.

Особенности браузеров
Браузеры достаточно вольно толкуют некоторые параметры CSS, поэтому создание универсального кода с применением слоев может стать настоящей головной болью для разработчиков. В этом смысле таблицы отображаются в разных браузерах практически одинаково, поэтому создание веб-страниц упрощается.

Недостатки таблиц
Несмотря на описанные достоинства таблиц, у них есть и определенные недочеты, которые порой заставляют искать другие способы верстки.

Долгая загрузка
Особенность таблиц такова, что пока последнее слово в самом низу таблицы не загрузится, на экране содержимое ячеек отображаться не будет. Браузеры используют такой подход, чтобы получить всю информацию о таблице для правильного форматирования ее содержимого. Но если таблица велика по высоте, может пройти достаточно много времени, прежде чем мы увидим нужную информацию.

Существуют и способы обхода этого свойства, в частности, разбиение одной большой таблицы на несколько таблиц поменьше, а также использование стилевого свойства table-layout.

Громоздкий код
Таблицы содержат сложную иерархическую структуру вложенных тегов, которая увеличивает объем кода, и повышает сложность изменения отдельных параметров. В некоторых случаях для достижения желаемого результата приходится вкладывать одну таблицу внутрь другой, а это также влияет на размер «шелухи», т.е. кода, который не принимает непосредственного участия в отображении веб-страницы.

Плохая индексация поисковиками
За счет того, что текст располагается в отдельных ячейках таблицы, в коде он может находиться достаточно далеко друг от друга. Такая раздробленность информации, а также значительная вложенность тегов затрудняет правильное индексирование страницы поисковыми системами. Как результат документ не попадает в первую десятку выдачи запроса по ключевым словам, хотя вполне может и заслуживать это.

Нет разделения содержимого и оформления
В идеале HTML-код должен содержать только теги с указанием стилевого класса или идентификатора. А все оформление вроде цвета текста и положения элемента выносится в CSS и модифицируется отдельно. Такое разделение позволяет независимо править код страницы и менять вид отдельных ее элементов. Хотя к таблицам стиль легко добавляется, но обилие «лишних» тегов не позволяет действительно просто и удобно управлять видом отдельных компонентов страницы. К тому же не все параметры таблиц имеют свой стилевой синоним, поэтому в любом случае приходится обращаться к коду веб-страницы и править его.

Несоответствие стандартам
В последнее время стандарты HTML и CSS прочно засели в умах веб-разработчиков. Этому способствует развитие XHTML и XML, которые более «жестко» относятся к коду документа, появление новых версий браузеров, придерживающихся спецификации, и мода на верстку слоями.

Что же говорит спецификация относительно таблиц? А говорит она, что таблицы в первую и последнюю очередь нужны для размещения табличных данных. Все остальные способы использования таблиц осуждаются.

Применение таблиц для верстки
Разумеется, и плюсы и минусы таблиц не равнозначны между собой. То, что для одного сайта может быть простительно, для другого является грубейшей ошибкой. Поэтому опишем, в каком случае таблицы использовать для верстки логичнее, чем другие средства, в частности, слои. Итак, таблицы хорошо подходят в некоторых обстоятельствах, которые описаны далее.

Высота колонок должна быть одинаковой
Таблицы помогают установить колонки одинаковой высоты при разном объеме содержимого колонок. Разумеется, подобный эффект можно наблюдать только в том случае, если для колонок применяется фоновая заливка или добавляется рамка.

Макет должен занимать всю высоту окна браузера, независимо от объема информации
С помощью таблицы можно добиться эффекта, что нижняя часть страницы («подвал») выравнивается по нижнему краю окна браузера. Это имеет смысл в том случае, если объема данных не хватает для увеличения высоты документа. В противном случае часть страницы будет «висеть» в середине окна. Естественно, для документа достаточного объема его отображение происходит как обычно.

Нет времени на сложную верстку
Стоит признать, что табличная верстка если не легче, то гораздо привычнее, чем верстка с помощью слоев. Таблицы используют уже несколько лет и естественно, что приемы верстки с их помощью стали каноническими. Поэтому, в условиях лимита времени на создание сайта применение таблиц более чем оправдано. Кстати, многие дизайн-студии, занимающиеся разработкой сайтов, именно по этой причине отдают предпочтение табличной верстке. Результат получается планируемым и ожидаемым, а ошибок с отображением сайта в разных браузерах практически не возникает.

Если подходить критично к способам использования таблиц, то действительной причиной их популярности является консерватизм разработчиков, привычность и быстрота верстки сайтов с их помощью. Ясно одно — таблицы постепенно сдают свои позиции в пользу верстки слоями. Но пройдет еще несколько лет, прежде чем «табличные» сайты станут раритетом и исчезнут с простора Рунета.
Дмитрий Асмус (Bro)
Модератор
Сообщений: 198
Нет на сайте
    

 
Особенности таблиц

При верстке с помощью таблиц необходимо знать некоторые особенности, которые присущи таблицам. Это нужно для того, чтобы понимать, как построить макет в том или ином случае, создать эффективный код и не допустить откровенных ляпов в работе. Считается, что табличная верстка проще, чем другими методами, например, с помощью слоев. Однако таблицы тоже таят в себе множество хитростей, которые, так или иначе, влияют на отображение страницы.

Ширина таблицы
Ширина таблицы, если она явно не указана, устанавливается браузером автоматически исходя из содержимого ячеек. Когда таблица применяется для создания опорной сетки на странице, такой подход нежелателен, поскольку зависит от переменных данных. Поэтому ширину таблицы указывают всегда — в процентах, если используется «резиновый» макет или в пикселах для макета фиксированной ширины.

Ширина ячеек
Ширина ячеек определяется атрибутом width тега <td>, причем устанавливать это значение требуется в том случае, если ширина ячейки должна быть задана.

Рассмотрим на примере тот случай, когда размер ячеек нужно указать. Предположим, что нам требуется создать на веб-странице две колонки, одна из них должна иметь размер 200 пикселов, а вторая занимать оставшееся место. Создаем таблицу с двумя ячейками и для левой ячейки задаем параметр width="200" (пример 1). Единицы измерения ставить не нужно, браузер сам понимает, что если задано число, значит, используются пикселы.

Пример 1. Ширина ячеек
 
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
</head>
<body>
  <table width="100%" cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td width="200">Левая колонка</td><td>Правая колонка</td>
   </tr>
  </table>
</body>
</html>


Поскольку в данном примере ширина таблицы указана как 100%, таблица будет занимать всю свободную ширину окна браузера. При этом левая колонка берет под себя 200 пикселов, а правая — оставшееся свободное место.

Ширина ячейки иной раз может меняться, несмотря на то, что указана жестко. Это происходит, например, в том случае, если в ячейку добавили рисунок, размер которого превышает ширину ячейки. Чтобы вместить изображение, ячейка будет вынуждена раздаться. Также может повлиять на размер ячейки ее текстовое содержимое, которое содержит очень длинное слово.

Чтобы избежать указанной ситуации применяют несколько средств.

Не добавляют в ячейку фиксированной ширины те изображения, размер которых превышает ширину ячейки. Способ, конечно, звучит банально, тем не менее, зная особенности ячеек, можно избежать неприятностей с их отображением.
Для тега <table> используют стилевое свойство table-layout со значением fixed. Применение этого свойства позволяет обрезать рисунок, если он не помещается целиком в ячейку (пример 2).

Пример 2. Свойство table-layout
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    table-layout: fixed; /* Ячейки фиксированной ширины */
   }
  </style>
</head>
<body>
  <table width="100%" cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td width="200"><img src="images/dino.gif" width="289" height="120" alt="Динозаврик"></td>
    <td>...</td>
   </tr>
  </table>
</body>
</html>


Результат данного примера показан на рис. 1.


Рис. 1. Отображение рисунка при использовании свойства table-layout

Современные браузеры (Firefox 3+, Internet Explorer 8+, Chrome и Safari) несколько иначе показывают таблицу (рис. 2).


Рис. 2. Отображение рисунка в браузере Safari

Воспользоваться стилевым свойством overflow со значением scroll. Это свойство добавляет полосы прокрутки к содержимому, но из-за того, что он применяется к блочным элементам им нельзя воспользоваться для тега <td>. Поэтому приходится вкладывать внутрь ячейки тег <div> и устанавливать стилевое свойство для него (пример 3). Это конечно не совсем правильно и удобно, но зато может дать требуемый результат.

Пример 3. Полосы прокрутки в ячейках
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
   <style type="text/css">
    TD DIV {
     overflow: scroll; /* Добавляем полосы прокрутки */
     width: 200px; /* Ширина элемента */
    }
  </style>
</head>
<body>
  <table width="100%" cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td width="200"><div><img src="images/dino.gif"
    width="289" height="120" alt="Динозаврик"></div></td>
    <td>...</td>
   </tr>
  </table>
</body>
</html>


Результат данного примера показан на рис. 3.


Рис. 3. Отображение рисунка при использовании свойства overflow

Содержимое ячеек
Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причем пробел в расчет не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает.

Старые браузеры не отображали цвет фона пустых ячеек вида <td bgcolor="#ffcc00"></td>, поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел ( ). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил прозрачный рисунок размером в один пиксел. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.

К счастью эпоха однопиксельных рисунков и всяческих распорок на их основе прошла. Браузеры достаточно корректно работают с таблицами и без присутствия содержимого ячеек.

Объединение ячеек
Предположим, что нам потребовалось использовать объединение некоторых ячеек в таблице, как, например, показано ниже. Причем высота оранжевой и серой ячейки жестко задана и равна 30 пикселам.



Для наглядности код этой таблицы приведен в примере 4.

Пример 4. Таблица с объединенными ячейками
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
</head>
<body>
  <table width="300" border="1" align="center" cellpadding="4" cellspacing="0">
   <tr>
    <td width="94" height="30" bgcolor="#ffcc33">Ячейка 1</td>
    <td width="184" rowspan="2" valign="top">Ячейка 2</td>
   </tr>
   <tr>
    <td valign="top">Ячейка 3<br><br></td>
   </tr>
   <tr bgcolor="#cccccc">
    <td colspan="2" height="30">Ячейка 4</td>
   </tr>
  </table>
</body>
</html>


Хотя высота оранжевой ячейки вроде как указана фиксированной, она может произвольно меняться в зависимости от объема информации в других ячейках. Подобная неприятность замечена в некоторых браузерах.

При повышении сложности таблицы за счет увеличения числа ячеек и их объединений, растет вероятность и повышения ошибок при отображении документа. За счет этого объединение ячеек по вертикали применяют достаточно редко и в том случае, когда высота ячеек не оказывает существенного влияния на макет страницы.

Чтобы все-таки получить нужный результат, одну таблицу разбивают на несколько мелких таблиц или вкладывают таблицу внутрь ячейки другой таблицы. Вложенные таблицы получили свое распространение именно по той причине, что дают устойчивый и однообразный результат.

Скорость загрузки таблицы
Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.

Исходя из этого факта, таблицы не используют для хранения большой информации (от 100 кБ). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные таблицы или используют свойство table-layout, применение которого позволяет несколько повысить скорость отображения содержимого таблицы.
Дата: Понедельник, 11.01.2016. Сообщение # 3 Bro
Особенности таблиц

При верстке с помощью таблиц необходимо знать некоторые особенности, которые присущи таблицам. Это нужно для того, чтобы понимать, как построить макет в том или ином случае, создать эффективный код и не допустить откровенных ляпов в работе. Считается, что табличная верстка проще, чем другими методами, например, с помощью слоев. Однако таблицы тоже таят в себе множество хитростей, которые, так или иначе, влияют на отображение страницы.

Ширина таблицы
Ширина таблицы, если она явно не указана, устанавливается браузером автоматически исходя из содержимого ячеек. Когда таблица применяется для создания опорной сетки на странице, такой подход нежелателен, поскольку зависит от переменных данных. Поэтому ширину таблицы указывают всегда — в процентах, если используется «резиновый» макет или в пикселах для макета фиксированной ширины.

Ширина ячеек
Ширина ячеек определяется атрибутом width тега <td>, причем устанавливать это значение требуется в том случае, если ширина ячейки должна быть задана.

Рассмотрим на примере тот случай, когда размер ячеек нужно указать. Предположим, что нам требуется создать на веб-странице две колонки, одна из них должна иметь размер 200 пикселов, а вторая занимать оставшееся место. Создаем таблицу с двумя ячейками и для левой ячейки задаем параметр width="200" (пример 1). Единицы измерения ставить не нужно, браузер сам понимает, что если задано число, значит, используются пикселы.

Пример 1. Ширина ячеек
 
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
</head>
<body>
  <table width="100%" cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td width="200">Левая колонка</td><td>Правая колонка</td>
   </tr>
  </table>
</body>
</html>


Поскольку в данном примере ширина таблицы указана как 100%, таблица будет занимать всю свободную ширину окна браузера. При этом левая колонка берет под себя 200 пикселов, а правая — оставшееся свободное место.

Ширина ячейки иной раз может меняться, несмотря на то, что указана жестко. Это происходит, например, в том случае, если в ячейку добавили рисунок, размер которого превышает ширину ячейки. Чтобы вместить изображение, ячейка будет вынуждена раздаться. Также может повлиять на размер ячейки ее текстовое содержимое, которое содержит очень длинное слово.

Чтобы избежать указанной ситуации применяют несколько средств.

Не добавляют в ячейку фиксированной ширины те изображения, размер которых превышает ширину ячейки. Способ, конечно, звучит банально, тем не менее, зная особенности ячеек, можно избежать неприятностей с их отображением.
Для тега <table> используют стилевое свойство table-layout со значением fixed. Применение этого свойства позволяет обрезать рисунок, если он не помещается целиком в ячейку (пример 2).

Пример 2. Свойство table-layout
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    table-layout: fixed; /* Ячейки фиксированной ширины */
   }
  </style>
</head>
<body>
  <table width="100%" cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td width="200"><img src="images/dino.gif" width="289" height="120" alt="Динозаврик"></td>
    <td>...</td>
   </tr>
  </table>
</body>
</html>


Результат данного примера показан на рис. 1.


Рис. 1. Отображение рисунка при использовании свойства table-layout

Современные браузеры (Firefox 3+, Internet Explorer 8+, Chrome и Safari) несколько иначе показывают таблицу (рис. 2).


Рис. 2. Отображение рисунка в браузере Safari

Воспользоваться стилевым свойством overflow со значением scroll. Это свойство добавляет полосы прокрутки к содержимому, но из-за того, что он применяется к блочным элементам им нельзя воспользоваться для тега <td>. Поэтому приходится вкладывать внутрь ячейки тег <div> и устанавливать стилевое свойство для него (пример 3). Это конечно не совсем правильно и удобно, но зато может дать требуемый результат.

Пример 3. Полосы прокрутки в ячейках
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
   <style type="text/css">
    TD DIV {
     overflow: scroll; /* Добавляем полосы прокрутки */
     width: 200px; /* Ширина элемента */
    }
  </style>
</head>
<body>
  <table width="100%" cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td width="200"><div><img src="images/dino.gif"
    width="289" height="120" alt="Динозаврик"></div></td>
    <td>...</td>
   </tr>
  </table>
</body>
</html>


Результат данного примера показан на рис. 3.


Рис. 3. Отображение рисунка при использовании свойства overflow

Содержимое ячеек
Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причем пробел в расчет не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает.

Старые браузеры не отображали цвет фона пустых ячеек вида <td bgcolor="#ffcc00"></td>, поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел ( ). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил прозрачный рисунок размером в один пиксел. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.

К счастью эпоха однопиксельных рисунков и всяческих распорок на их основе прошла. Браузеры достаточно корректно работают с таблицами и без присутствия содержимого ячеек.

Объединение ячеек
Предположим, что нам потребовалось использовать объединение некоторых ячеек в таблице, как, например, показано ниже. Причем высота оранжевой и серой ячейки жестко задана и равна 30 пикселам.



Для наглядности код этой таблицы приведен в примере 4.

Пример 4. Таблица с объединенными ячейками
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
</head>
<body>
  <table width="300" border="1" align="center" cellpadding="4" cellspacing="0">
   <tr>
    <td width="94" height="30" bgcolor="#ffcc33">Ячейка 1</td>
    <td width="184" rowspan="2" valign="top">Ячейка 2</td>
   </tr>
   <tr>
    <td valign="top">Ячейка 3<br><br></td>
   </tr>
   <tr bgcolor="#cccccc">
    <td colspan="2" height="30">Ячейка 4</td>
   </tr>
  </table>
</body>
</html>


Хотя высота оранжевой ячейки вроде как указана фиксированной, она может произвольно меняться в зависимости от объема информации в других ячейках. Подобная неприятность замечена в некоторых браузерах.

При повышении сложности таблицы за счет увеличения числа ячеек и их объединений, растет вероятность и повышения ошибок при отображении документа. За счет этого объединение ячеек по вертикали применяют достаточно редко и в том случае, когда высота ячеек не оказывает существенного влияния на макет страницы.

Чтобы все-таки получить нужный результат, одну таблицу разбивают на несколько мелких таблиц или вкладывают таблицу внутрь ячейки другой таблицы. Вложенные таблицы получили свое распространение именно по той причине, что дают устойчивый и однообразный результат.

Скорость загрузки таблицы
Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.

Исходя из этого факта, таблицы не используют для хранения большой информации (от 100 кБ). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные таблицы или используют свойство table-layout, применение которого позволяет несколько повысить скорость отображения содержимого таблицы.
Прикрепления: 1842655.gif(12Kb) · 2884822.png(10Kb) · 3526039.png(10Kb) · 2876064.png(2Kb)
Дмитрий Асмус (Bro)
Модератор
Сообщений: 198
Нет на сайте
    

 
Макет из двух колонок

Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом, как правило, в одной колонке располагается основной материал (текст статьи, например), а во второй — ссылки на разделы сайта и другая информация. Для создания подобного макета таблицы достаточно удобны — каждая ячейка выступает в качестве отдельной колонки, что позволяет легко регулировать различные параметры отображения документа.

Ширина колонок
Для начала рассмотрим самый простой вариант, когда ширина левой колонки жестко задана в пикселах, а ширина правой колонки варьируется в зависимости от размеров окна браузера. Для этого требуется задать общую ширину всей таблицы в процентах через атрибут width тега <table> и для первой ячейки установить ее ширину в пикселах или процентах также с помощью атрибута width, но уже для тега <td> (пример 1).

Пример 1. Ширина колонки в пикселах
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Две колонки</title>
</head>
<body>
  <table width="100%" cellspacing="0" cellpadding="5">
   <tr>
    <td width="200" valign="top">Левая колонка</td><td valign="top">Правая колонка</td>
   </tr>
  </table>
</body>
</html>


В данном примере граница у таблицы не отображается, а вертикальное выравнивание содержимого ячеек по верхнему краю определяется атрибутом valign со значением top. Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались бы относительно друг друга, а начинались одинаково от верхнего края.

Атрибуты width и valign можно заменить стилевыми свойствами width и vertical-align с теми же значениями. Тогда данный код будет иметь следующий вид (пример 2).

Пример 2. Использование стилей
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Две колонки</title>
  <style type="text/css">
   #maket {
    width: 100%; /* Ширина всей таблицы в процентах */
   }
   #maket TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */
   }
   TD#leftcol {
    width: 200px; /* Ширина левой колонки в пикселах */
   }
  </style>
</head>
<body>
  <table cellspacing="0" cellpadding="0" id="maket">
   <tr>
    <td id="leftcol">Левая колонка</td><td>Правая колонка</td>
   </tr>
  </table>
</body>
</html>


Поля внутри колонок
Расстояние между колонками регулируется атрибутом cellpadding тега <table>. Поскольку cellpadding определяет расстояние от границы ячейки до края ее содержимого, то пространство между содержимым разных колонок будет равно удвоенному значению этого параметра. Используя стили, в частности, свойство padding, можно легко регулировать значение отступа для каждой колонки (пример 3).

Пример 3. Использование полей
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Две колонки</title>
  <style type="text/css">
   #leftcol {
    padding-right: 10px; /* Поле справа от текста */
    vertical-align: top; /* Выравнивание по верхнему краю ячеек */
    width: 200px; /* Ширина колонки */
   }
  </style>
</head>
<body>
  <table width="100%" cellspacing="0" cellpadding="0">
   <tr>
    <td id="leftcol">Левая колонка</td><td>Правая колонка</td>
   </tr>
  </table>
</body>
</html>


В данном примере значения атрибутов cellspacing и cellpadding равны нулю, а расстояние между содержимым колонок определяется свойством padding-right, который добавляется к левой ячейке через идентификатор с именем leftcol.

Аналогично отступы можно регулировать не только справа, но и с других сторон каждой ячейки. В примере 4 показано, как устанавливать поля для всех ячеек через стили.

Пример 4. Поля в ячейках
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Две колонки</title>
  <style type="text/css">
   #maket TD {
    padding: 5px; /* Поля вокруг содержимого ячеек */
    vertical-align: top; /* Выравнивание по верхнему краю ячеек */
    width: 200px; /* Ширина колонки */
   }
  </style>
</head>
<body>
  <table width="100%" cellspacing="0" id="maket">
   <tr>
    <td id="leftcol">Левая колонка</td>
    <td valign="top">Правая колонка</td>
   </tr>
  </table>
</body>
</html>


Цвет фона колонок
Чтобы визуально отделить одну колонку от другой используют разные приемы, самым распространенным из них, пожалуй, является использование фонового цвета. Лучше указывать цвет через стили, это позволяет вынести оформление страницы в отдельный файл. Для этого создаем новый стилевой класс, устанавливаем для него свойство background и применяем его к требуемой ячейке (пример 5).

Пример 5. Цвет фона
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Две колонки</title>
  <style type="text/css">
   #maket {
    width: 100%; /* Ширина всей таблицы */
   }
   TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */
    padding: 5px; /* Поля вокруг ячеек */
   }
   TD#leftcol {
    width: 200px; /* Ширина левой колонки */
    background: #ccc; /* Цвет фона левой колонки */
   }
   TD#rightcol {
    background: #fc3; /* Цвет фона правой колонки */
   }
  </style>
</head>
<body>
  <table cellspacing="0" id="maket">
   <tr>
    <td id="leftcol">Левая колонка</td>
    <td id="rightcol">Правая колонка</td>
   </tr>
  </table>
</body>
</html>


В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 1).


Рис. 1. Колонки разного цвета

Разделитель колонок
Использование полей не всегда подходит для установки нужного расстояния между колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу разных соображений. Тогда поможет добавление еще одной ячейки, которая выступает в качестве разделителя между колонками (пример 6).

Пример 6. Использование трех ячеек
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Две колонки</title>
  <style type="text/css">
   #maket {
    width: 100%; /* Ширина всей таблицы */
   }
   TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */
    padding: 5px; /* Поля вокруг ячеек */
   }
   TD#leftcol {
    width: 200px; /* Ширина левой колонки */
    background: #ccc; /* Цвет фона левой колонки */
    border: 1px solid #000; /* Параметры рамки */
   }
   TD#rightcol {
    background: #fc3; /* Цвет фона правой колонки */
    border: 1px solid #000; /* Параметры рамки */
   }
   #spacer {
    width: 10px; /* Расстояние между колонками */
   }
  </style>
</head>
<body>
  <table cellspacing="0" id="maket">
   <tr>
    <td id="leftcol">Левая колонка</td>
    <td id="spacer"></td>
    <td id="rightcol">Правая колонка</td>
   </tr>
  </table>
</body>
</html>


В данном примере вводится еще одна колонка со стилевым идентификатором spacer, это позволяет легко менять ширину между колонками. Внутрь этой ячейки можно ничего не вкладывать, браузеры достаточно корректно работают с подобными ячейками.

На рис. 2 показан результат примера. Для наглядности и «красоты» вокруг колонок добавлена граница.


Рис. 2. Расстояние между колонками

Линия между колонками
Разделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Опять же, здесь пригодятся стили, с помощью которых создание линий значительно упрощается. Следует только установить свойство border-left для правой колонки или border-right для левой (пример 7).

Пример 7. Добавление линии
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Две колонки</title>
  <style type="text/css">
   #maket {
    width: 100%; /* Ширина всей таблицы */
   }
   TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */
    padding: 5px; /* Поля вокруг ячеек */
   }
   TD#leftcol {
    width: 100px; /* Ширина левой колонки */
    background: #ccc; /* Цвет фона левой колонки */
    border-right: 1px dashed #000; /* Параметры линии */
   }
   TD#rightcol {
    background: #fc3; /* Цвет фона правой колонки */
   }
  </style>
</head>
<body>
  <table cellspacing="0" id="maket">
   <tr>
    <td id="leftcol">Левая колонка</td><td id="rightcol">Правая колонка</td>
   </tr>
  </table>
</body>
</html>


Результат данного примера показан ниже.


Рис. 3. Линия между колонок

Резюме
Создание колонок с помощью таблиц процесс достаточно простой и быстрый, следует только добавить таблицу с двумя ячейками и определить ее визуальные атрибуты. К тому же большинство параметров, определяющих вид таблицы, можно вынести в стили и таким образом ускорить процесс добавления однотипных таблиц и документов на их основе.

При двухколонном макете применяются разные средства по оформлению колонок. Например, используется фоновая заливка, добавляется рамка вокруг колонок, изменяется расстояние между ними или устанавливается вертикальная разделительная линия. Все эти вещи управляются с помощью стилей, что ведет к сокращению кода, расширяет варианты модификаций таблиц и удобству разработки сайта.
Дата: Понедельник, 11.01.2016. Сообщение # 4 Bro
Макет из двух колонок

Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом, как правило, в одной колонке располагается основной материал (текст статьи, например), а во второй — ссылки на разделы сайта и другая информация. Для создания подобного макета таблицы достаточно удобны — каждая ячейка выступает в качестве отдельной колонки, что позволяет легко регулировать различные параметры отображения документа.

Ширина колонок
Для начала рассмотрим самый простой вариант, когда ширина левой колонки жестко задана в пикселах, а ширина правой колонки варьируется в зависимости от размеров окна браузера. Для этого требуется задать общую ширину всей таблицы в процентах через атрибут width тега <table> и для первой ячейки установить ее ширину в пикселах или процентах также с помощью атрибута width, но уже для тега <td> (пример 1).

Пример 1. Ширина колонки в пикселах
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Две колонки</title>
</head>
<body>
  <table width="100%" cellspacing="0" cellpadding="5">
   <tr>
    <td width="200" valign="top">Левая колонка</td><td valign="top">Правая колонка</td>
   </tr>
  </table>
</body>
</html>


В данном примере граница у таблицы не отображается, а вертикальное выравнивание содержимого ячеек по верхнему краю определяется атрибутом valign со значением top. Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались бы относительно друг друга, а начинались одинаково от верхнего края.

Атрибуты width и valign можно заменить стилевыми свойствами width и vertical-align с теми же значениями. Тогда данный код будет иметь следующий вид (пример 2).

Пример 2. Использование стилей
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Две колонки</title>
  <style type="text/css">
   #maket {
    width: 100%; /* Ширина всей таблицы в процентах */
   }
   #maket TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */
   }
   TD#leftcol {
    width: 200px; /* Ширина левой колонки в пикселах */
   }
  </style>
</head>
<body>
  <table cellspacing="0" cellpadding="0" id="maket">
   <tr>
    <td id="leftcol">Левая колонка</td><td>Правая колонка</td>
   </tr>
  </table>
</body>
</html>


Поля внутри колонок
Расстояние между колонками регулируется атрибутом cellpadding тега <table>. Поскольку cellpadding определяет расстояние от границы ячейки до края ее содержимого, то пространство между содержимым разных колонок будет равно удвоенному значению этого параметра. Используя стили, в частности, свойство padding, можно легко регулировать значение отступа для каждой колонки (пример 3).

Пример 3. Использование полей
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Две колонки</title>
  <style type="text/css">
   #leftcol {
    padding-right: 10px; /* Поле справа от текста */
    vertical-align: top; /* Выравнивание по верхнему краю ячеек */
    width: 200px; /* Ширина колонки */
   }
  </style>
</head>
<body>
  <table width="100%" cellspacing="0" cellpadding="0">
   <tr>
    <td id="leftcol">Левая колонка</td><td>Правая колонка</td>
   </tr>
  </table>
</body>
</html>


В данном примере значения атрибутов cellspacing и cellpadding равны нулю, а расстояние между содержимым колонок определяется свойством padding-right, который добавляется к левой ячейке через идентификатор с именем leftcol.

Аналогично отступы можно регулировать не только справа, но и с других сторон каждой ячейки. В примере 4 показано, как устанавливать поля для всех ячеек через стили.

Пример 4. Поля в ячейках
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Две колонки</title>
  <style type="text/css">
   #maket TD {
    padding: 5px; /* Поля вокруг содержимого ячеек */
    vertical-align: top; /* Выравнивание по верхнему краю ячеек */
    width: 200px; /* Ширина колонки */
   }
  </style>
</head>
<body>
  <table width="100%" cellspacing="0" id="maket">
   <tr>
    <td id="leftcol">Левая колонка</td>
    <td valign="top">Правая колонка</td>
   </tr>
  </table>
</body>
</html>


Цвет фона колонок
Чтобы визуально отделить одну колонку от другой используют разные приемы, самым распространенным из них, пожалуй, является использование фонового цвета. Лучше указывать цвет через стили, это позволяет вынести оформление страницы в отдельный файл. Для этого создаем новый стилевой класс, устанавливаем для него свойство background и применяем его к требуемой ячейке (пример 5).

Пример 5. Цвет фона
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Две колонки</title>
  <style type="text/css">
   #maket {
    width: 100%; /* Ширина всей таблицы */
   }
   TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */
    padding: 5px; /* Поля вокруг ячеек */
   }
   TD#leftcol {
    width: 200px; /* Ширина левой колонки */
    background: #ccc; /* Цвет фона левой колонки */
   }
   TD#rightcol {
    background: #fc3; /* Цвет фона правой колонки */
   }
  </style>
</head>
<body>
  <table cellspacing="0" id="maket">
   <tr>
    <td id="leftcol">Левая колонка</td>
    <td id="rightcol">Правая колонка</td>
   </tr>
  </table>
</body>
</html>


В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 1).


Рис. 1. Колонки разного цвета

Разделитель колонок
Использование полей не всегда подходит для установки нужного расстояния между колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу разных соображений. Тогда поможет добавление еще одной ячейки, которая выступает в качестве разделителя между колонками (пример 6).

Пример 6. Использование трех ячеек
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Две колонки</title>
  <style type="text/css">
   #maket {
    width: 100%; /* Ширина всей таблицы */
   }
   TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */
    padding: 5px; /* Поля вокруг ячеек */
   }
   TD#leftcol {
    width: 200px; /* Ширина левой колонки */
    background: #ccc; /* Цвет фона левой колонки */
    border: 1px solid #000; /* Параметры рамки */
   }
   TD#rightcol {
    background: #fc3; /* Цвет фона правой колонки */
    border: 1px solid #000; /* Параметры рамки */
   }
   #spacer {
    width: 10px; /* Расстояние между колонками */
   }
  </style>
</head>
<body>
  <table cellspacing="0" id="maket">
   <tr>
    <td id="leftcol">Левая колонка</td>
    <td id="spacer"></td>
    <td id="rightcol">Правая колонка</td>
   </tr>
  </table>
</body>
</html>


В данном примере вводится еще одна колонка со стилевым идентификатором spacer, это позволяет легко менять ширину между колонками. Внутрь этой ячейки можно ничего не вкладывать, браузеры достаточно корректно работают с подобными ячейками.

На рис. 2 показан результат примера. Для наглядности и «красоты» вокруг колонок добавлена граница.


Рис. 2. Расстояние между колонками

Линия между колонками
Разделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Опять же, здесь пригодятся стили, с помощью которых создание линий значительно упрощается. Следует только установить свойство border-left для правой колонки или border-right для левой (пример 7).

Пример 7. Добавление линии
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Две колонки</title>
  <style type="text/css">
   #maket {
    width: 100%; /* Ширина всей таблицы */
   }
   TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */
    padding: 5px; /* Поля вокруг ячеек */
   }
   TD#leftcol {
    width: 100px; /* Ширина левой колонки */
    background: #ccc; /* Цвет фона левой колонки */
    border-right: 1px dashed #000; /* Параметры линии */
   }
   TD#rightcol {
    background: #fc3; /* Цвет фона правой колонки */
   }
  </style>
</head>
<body>
  <table cellspacing="0" id="maket">
   <tr>
    <td id="leftcol">Левая колонка</td><td id="rightcol">Правая колонка</td>
   </tr>
  </table>
</body>
</html>


Результат данного примера показан ниже.


Рис. 3. Линия между колонок

Резюме
Создание колонок с помощью таблиц процесс достаточно простой и быстрый, следует только добавить таблицу с двумя ячейками и определить ее визуальные атрибуты. К тому же большинство параметров, определяющих вид таблицы, можно вынести в стили и таким образом ускорить процесс добавления однотипных таблиц и документов на их основе.

При двухколонном макете применяются разные средства по оформлению колонок. Например, используется фоновая заливка, добавляется рамка вокруг колонок, изменяется расстояние между ними или устанавливается вертикальная разделительная линия. Все эти вещи управляются с помощью стилей, что ведет к сокращению кода, расширяет варианты модификаций таблиц и удобству разработки сайта.
Прикрепления: 8379926.gif(1Kb) · 5712927.gif(1Kb) · 6766716.gif(1Kb)
Дмитрий Асмус (Bro)
Модератор
Сообщений: 198
Нет на сайте
    

 
Макет из трех колонок

Использование трех колонок на страницах сайта обусловлено широтой информации, которую требуется показать посетителю. Обычно одна колонка, самая широкая, отдается под текст основного материала, статьи, например, а остальные колонки применяются для ссылок, рекламы, анонсов и т.д.

Принцип создания трехколонной модульной сетки с помощью таблицы аналогичен созданию двухколонной сетки, поэтому остановимся лишь на некоторых моментах.

Ширина колонок в пикселах
Ширина разных колонок зависит от используемого макета — фиксированного или «резинового». При макете фиксированной ширины общая ширина таблицы задается в пикселах и остается постоянной независимо от разрешения монитора и размера окна браузера. При этом ширину отдельных колонок также имеет смысл установить в пикселах. В примере 1 ширина макета задана как 750 пикселов, а колонки соответственно 150, 400 и 200 пикселов.

Пример 1. Фиксированная ширина колонок
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Три колонки</title>
  <style type="text/css">
   TD {
    vertical-align: top; /* Выравнивание по верхнему краю ячейки */
   }
  </style>
</head>
<body>
  <table width="750" cellpadding="5" cellspacing="0">
   <tr>
    <td width="150">Колонка 1</td>
    <td width="400">Колонка 2</td>
    <td width="200">Колонка 3</td>
   </tr>
  </table>
</body>
</html>


При определении ширины колонок следует принимать во внимание значение атрибута cellpadding. На ширину ячеек этот аргумент не влияет, но зато уменьшает область, которая отводится под содержимое ячеек.

Ширину всех ячеек в подобном случае задавать не обязательно. Так, если не указать ширину одной ячейки, то она будет вычислена автоматически исходя из общей ширины таблицы и ширины остальных ячеек. В других случаях, например, когда не установлена ширина двух ячеек, их размер определяется по содержимому. Поскольку содержимое ячеек варьируется от страницы к странице, то ширина также будет «плавать». Это, по-английски говоря, not good (для тех, кто не понял, нехорошо), поскольку вид документов должен оставаться единым. Так что ширину колонок лучше все-таки задавать.

Ширина колонок в процентах
При «резиновом» макете ширина таблицы устанавливается в процентах от ширины окна браузера и, таким образом, напрямую зависит от нее. Здесь возможны два варианта:

ширина всех ячеек задана в процентах;
сочетание процентов и пикселов, когда ширина одних ячеек устанавливается в процентах, а других — в пикселах.
В первом случае вначале устанавливается ширина всей таблицы в процентах, а затем ширина отдельных ячеек (пример 2). Причем в сумме ширина ячеек должна получиться 100%, несмотря на то, что размер таблицы может быть иным. Дело в том, что ширина таблицы вычисляется относительно доступного пространства веб-страницы, а размер ячеек устанавливается относительно всей таблицы в целом.

Пример 2. Ширина колонок в процентах
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Три колонки</title>
  <style type="text/css">
   TD {
    vertical-align: top; /* Выравнивание по верхнему краю ячейки */
   }
   #col1 {
    width: 20%; /* Ширина первой колонки */
    background: #fc0; /* Цвет фона первой колонки */
   }
   #col2 {
    width: 40%; /* Ширина второй колонки */
    background: #f0f0f0; /* Цвет фона второй колонки */
   }
   #col3 {
    width: 40%; /* Ширина третьей колонки */
    background: #fc0; /* Цвет фона третьей колонки */
   }
  </style>
</head>
<body>
  <table width="90%" cellpadding="5" cellspacing="0">
   <tr>
    <td id="col1">Колонка 1</td>
    <td id="col2">Колонка 2</td>
    <td id="col3">Колонка 3</td>
   </tr>
  </table>
</body>
</html>


Для удобства изменения вида колонок параметры в данном примере перенесены в стили.

Процентная запись для таблиц имеет ряд преимуществ — используется все свободное пространство веб-страницы, а сам макет подстраивается под ширину окна браузера. Вместе с тем каждая таблица имеет некоторый минимальный размер, при достижении которого таблица уже не уменьшается и начинает отображаться горизонтальная полоса прокрутки. Такой минимальный размер зависит от содержимого таблицы. Если, например, в каждую из трех ячеек поместить по рисунку шириной 200 пикселов, то общая ширина таблицы не может быть меньше 600 пикселов плюс значения полей вокруг изображений.

Сочетание процентов и пикселов
Рассмотрим два основных варианта, когда для задания ширины колонок одновременно применяются проценты и пикселы. Первый вариант состоит в том, что размер крайних колонок устанавливается в пикселах, а ширина средней колонки вычисляется автоматически, исходя из заданной ширины таблицы (рис. 1).


Рис. 1. Ширина средней колонки определяется браузером

Для создания подобного макета понадобится таблица с тремя ячейками. Ширину первой и третьей ячейки устанавливаем в пикселах, а ширину средней ячейки намеренно не задаем (пример 3). При этом обязательно следует определить общую ширину всей таблицы.

Пример 3. Ширина колонок в процентах и пикселах
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Три колонки</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблицы */
   }
   TD {
    vertical-align: top; /* Выравнивание по верхнему краю ячейки */
   }
   #col1 {
    width: 150px; /* Ширина первой колонки */
    background: #fc0; /* Цвет фона первой колонки */
   }
   #col2 {
    background: #afccdb; /* Цвет фона второй колонки */
   }
   #col3 {
    width: 200px; /* Ширина третьей колонки */
    background: #fc0; /* Цвет фона третьей колонки */
   }
  </style>
</head>
<body>
  <table cellpadding="5" cellspacing="0">
  <tr>
   <td id="col1">Колонка 1</td>
   <td id="col2">Колонка 2</td>
   <td id="col3">Колонка 3</td>
  </tr>
  </table>
</body>
</html>


Во втором варианте ширина двух колонок устанавливается в процентах, а третьей — в пикселах. В подобном случае обойтись одной таблицей не удастся. Сами посудите, если ширина всей таблицы равна 100%, первой колонки — 200 пикселов, а оставшихся колонок по 20%, то простое вычисление показывает, что размер первой колонки получается равным 60%. Поэтому заданное значение в пикселах браузером будет проигнорировано, а размер установлен в процентах.

На рис. 2 показана схема расположения вложенных таблиц относительно друг друга.


Рис. 2. Применение вложенных таблиц

Вначале создаем таблицу заданного размера и с двумя ячейками. Левая ячейка будет выступать в роли первой колонки, и для нее устанавливаем требуемую ширину в пикселах. Ширину для правой ячейки не определяем, поэтому она будет занимать оставшееся пространство, а также служить каркасом для других колонок. Внутрь этой ячейки добавляем вторую таблицу, тоже состоящую из двух ячеек. И уже для них определяем ширину в процентах (пример 4).

Пример 4. Вложенные таблицы
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Три колонки</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблиц */
   }
   TD {
    vertical-align: top; /* Выравнивание по верхнему краю ячейки */
   }
   #col1 {
    width: 150px; /* Ширина первой колонки */
    background: #fc0; /* Цвет фона первой колонки */
   }
   #col2 {
    width: 60%;
    background: #afccdb; /* Цвет фона второй колонки */
   }
   #col3 {
    width: 40%; /* Ширина третьей колонки */
    background: #fc0; /* Цвет фона третьей колонки */
   }
   #col1, #col2, #col3 {
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
</head>
<body>
  <table cellpadding="0" cellspacing="0">
   <tr>
    <td id="col1">Колонка 1</td>
    <td>
     <table cellpadding="0" cellspacing="0">
      <tr>
       <td id="col2">Колонка 2</td>
       <td id="col3">Колонка 3</td>
      </tr>
     </table>
    </td>
   </tr>
  </table>
</body>
</html>


При создании подобного макета следует принимать во внимание следующие моменты.

Ширина внутренней таблицы должна быть задана как 100%, чтобы эта таблица занимала все свободное пространство.
Для того чтобы ячейки плотно прилегали друг к другу, для внешней таблицы необходимо обнулить значение атрибутов cellpadding и cellspacing. Поля можно устанавливать через свойство padding, как показано в данном примере.
Ширина второй и третьей колонки вычисляется относительно ширины ячейки, а не внешней таблицы в целом. Поэтому значение 60% в примере следует расценивать не как ширину колонки относительно всего макета, а лишь как ширину относительно внутренней таблицы.
Дата: Понедельник, 11.01.2016. Сообщение # 5 Bro
Макет из трех колонок

Использование трех колонок на страницах сайта обусловлено широтой информации, которую требуется показать посетителю. Обычно одна колонка, самая широкая, отдается под текст основного материала, статьи, например, а остальные колонки применяются для ссылок, рекламы, анонсов и т.д.

Принцип создания трехколонной модульной сетки с помощью таблицы аналогичен созданию двухколонной сетки, поэтому остановимся лишь на некоторых моментах.

Ширина колонок в пикселах
Ширина разных колонок зависит от используемого макета — фиксированного или «резинового». При макете фиксированной ширины общая ширина таблицы задается в пикселах и остается постоянной независимо от разрешения монитора и размера окна браузера. При этом ширину отдельных колонок также имеет смысл установить в пикселах. В примере 1 ширина макета задана как 750 пикселов, а колонки соответственно 150, 400 и 200 пикселов.

Пример 1. Фиксированная ширина колонок
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Три колонки</title>
  <style type="text/css">
   TD {
    vertical-align: top; /* Выравнивание по верхнему краю ячейки */
   }
  </style>
</head>
<body>
  <table width="750" cellpadding="5" cellspacing="0">
   <tr>
    <td width="150">Колонка 1</td>
    <td width="400">Колонка 2</td>
    <td width="200">Колонка 3</td>
   </tr>
  </table>
</body>
</html>


При определении ширины колонок следует принимать во внимание значение атрибута cellpadding. На ширину ячеек этот аргумент не влияет, но зато уменьшает область, которая отводится под содержимое ячеек.

Ширину всех ячеек в подобном случае задавать не обязательно. Так, если не указать ширину одной ячейки, то она будет вычислена автоматически исходя из общей ширины таблицы и ширины остальных ячеек. В других случаях, например, когда не установлена ширина двух ячеек, их размер определяется по содержимому. Поскольку содержимое ячеек варьируется от страницы к странице, то ширина также будет «плавать». Это, по-английски говоря, not good (для тех, кто не понял, нехорошо), поскольку вид документов должен оставаться единым. Так что ширину колонок лучше все-таки задавать.

Ширина колонок в процентах
При «резиновом» макете ширина таблицы устанавливается в процентах от ширины окна браузера и, таким образом, напрямую зависит от нее. Здесь возможны два варианта:

ширина всех ячеек задана в процентах;
сочетание процентов и пикселов, когда ширина одних ячеек устанавливается в процентах, а других — в пикселах.
В первом случае вначале устанавливается ширина всей таблицы в процентах, а затем ширина отдельных ячеек (пример 2). Причем в сумме ширина ячеек должна получиться 100%, несмотря на то, что размер таблицы может быть иным. Дело в том, что ширина таблицы вычисляется относительно доступного пространства веб-страницы, а размер ячеек устанавливается относительно всей таблицы в целом.

Пример 2. Ширина колонок в процентах
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Три колонки</title>
  <style type="text/css">
   TD {
    vertical-align: top; /* Выравнивание по верхнему краю ячейки */
   }
   #col1 {
    width: 20%; /* Ширина первой колонки */
    background: #fc0; /* Цвет фона первой колонки */
   }
   #col2 {
    width: 40%; /* Ширина второй колонки */
    background: #f0f0f0; /* Цвет фона второй колонки */
   }
   #col3 {
    width: 40%; /* Ширина третьей колонки */
    background: #fc0; /* Цвет фона третьей колонки */
   }
  </style>
</head>
<body>
  <table width="90%" cellpadding="5" cellspacing="0">
   <tr>
    <td id="col1">Колонка 1</td>
    <td id="col2">Колонка 2</td>
    <td id="col3">Колонка 3</td>
   </tr>
  </table>
</body>
</html>


Для удобства изменения вида колонок параметры в данном примере перенесены в стили.

Процентная запись для таблиц имеет ряд преимуществ — используется все свободное пространство веб-страницы, а сам макет подстраивается под ширину окна браузера. Вместе с тем каждая таблица имеет некоторый минимальный размер, при достижении которого таблица уже не уменьшается и начинает отображаться горизонтальная полоса прокрутки. Такой минимальный размер зависит от содержимого таблицы. Если, например, в каждую из трех ячеек поместить по рисунку шириной 200 пикселов, то общая ширина таблицы не может быть меньше 600 пикселов плюс значения полей вокруг изображений.

Сочетание процентов и пикселов
Рассмотрим два основных варианта, когда для задания ширины колонок одновременно применяются проценты и пикселы. Первый вариант состоит в том, что размер крайних колонок устанавливается в пикселах, а ширина средней колонки вычисляется автоматически, исходя из заданной ширины таблицы (рис. 1).


Рис. 1. Ширина средней колонки определяется браузером

Для создания подобного макета понадобится таблица с тремя ячейками. Ширину первой и третьей ячейки устанавливаем в пикселах, а ширину средней ячейки намеренно не задаем (пример 3). При этом обязательно следует определить общую ширину всей таблицы.

Пример 3. Ширина колонок в процентах и пикселах
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Три колонки</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблицы */
   }
   TD {
    vertical-align: top; /* Выравнивание по верхнему краю ячейки */
   }
   #col1 {
    width: 150px; /* Ширина первой колонки */
    background: #fc0; /* Цвет фона первой колонки */
   }
   #col2 {
    background: #afccdb; /* Цвет фона второй колонки */
   }
   #col3 {
    width: 200px; /* Ширина третьей колонки */
    background: #fc0; /* Цвет фона третьей колонки */
   }
  </style>
</head>
<body>
  <table cellpadding="5" cellspacing="0">
  <tr>
   <td id="col1">Колонка 1</td>
   <td id="col2">Колонка 2</td>
   <td id="col3">Колонка 3</td>
  </tr>
  </table>
</body>
</html>


Во втором варианте ширина двух колонок устанавливается в процентах, а третьей — в пикселах. В подобном случае обойтись одной таблицей не удастся. Сами посудите, если ширина всей таблицы равна 100%, первой колонки — 200 пикселов, а оставшихся колонок по 20%, то простое вычисление показывает, что размер первой колонки получается равным 60%. Поэтому заданное значение в пикселах браузером будет проигнорировано, а размер установлен в процентах.

На рис. 2 показана схема расположения вложенных таблиц относительно друг друга.


Рис. 2. Применение вложенных таблиц

Вначале создаем таблицу заданного размера и с двумя ячейками. Левая ячейка будет выступать в роли первой колонки, и для нее устанавливаем требуемую ширину в пикселах. Ширину для правой ячейки не определяем, поэтому она будет занимать оставшееся пространство, а также служить каркасом для других колонок. Внутрь этой ячейки добавляем вторую таблицу, тоже состоящую из двух ячеек. И уже для них определяем ширину в процентах (пример 4).

Пример 4. Вложенные таблицы
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Три колонки</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблиц */
   }
   TD {
    vertical-align: top; /* Выравнивание по верхнему краю ячейки */
   }
   #col1 {
    width: 150px; /* Ширина первой колонки */
    background: #fc0; /* Цвет фона первой колонки */
   }
   #col2 {
    width: 60%;
    background: #afccdb; /* Цвет фона второй колонки */
   }
   #col3 {
    width: 40%; /* Ширина третьей колонки */
    background: #fc0; /* Цвет фона третьей колонки */
   }
   #col1, #col2, #col3 {
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
</head>
<body>
  <table cellpadding="0" cellspacing="0">
   <tr>
    <td id="col1">Колонка 1</td>
    <td>
     <table cellpadding="0" cellspacing="0">
      <tr>
       <td id="col2">Колонка 2</td>
       <td id="col3">Колонка 3</td>
      </tr>
     </table>
    </td>
   </tr>
  </table>
</body>
</html>


При создании подобного макета следует принимать во внимание следующие моменты.

Ширина внутренней таблицы должна быть задана как 100%, чтобы эта таблица занимала все свободное пространство.
Для того чтобы ячейки плотно прилегали друг к другу, для внешней таблицы необходимо обнулить значение атрибутов cellpadding и cellspacing. Поля можно устанавливать через свойство padding, как показано в данном примере.
Ширина второй и третьей колонки вычисляется относительно ширины ячейки, а не внешней таблицы в целом. Поэтому значение 60% в примере следует расценивать не как ширину колонки относительно всего макета, а лишь как ширину относительно внутренней таблицы.
Прикрепления: 5720292.gif(1Kb) · 9271483.gif(1Kb)
Дмитрий Асмус (Bro)
Модератор
Сообщений: 198
Нет на сайте
    

 
Выравнивание элементов

За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.

Центрирование по вертикали
Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).

Пример 1. Центрирование рисунка
Код
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблицы */
    height: 100%; /* Высота таблицы */   
   }
  </style>
</head>
<body>
  <table>
   <tr>
    <td align="center"><img src="images/recipe.png" width="414" height="58"
     alt="Рецепты HTML">
    </td>
   </tr>
  </table>
</body>
</html>

В данном примере выравнивание по горизонтали устанавливается с помощью параметра align="center" тега <td>, а по вертикали содержимое ячейки можно не центрировать, поскольку это положение задано по умолчанию.

Чтобы высота таблицы устанавливалась как 100%, необходимо убрать <!DOCTYPE>, код при этом перестает быть валидным.

Использование ширины и высоты на всю доступную область веб-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.

Выравнивание по горизонтали
За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега <td>, допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали.


Рис. 1. Выравнивание элементов по горизонтали

Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

Выравнивание по верхнему краю
Для указания выравнивания содержимого ячеек по верхнему краю, для тега <td> требуется установить атрибут valign со значением top (пример 2).

Пример 2. Использование valign
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
</head>
<body>
  <table width="100%" cellpadding="5">
   <tr>
    <td valign="top" width="75%" bgcolor="#f0f0f0">Колонка 1</td>
    <td valign="top" width="25%" bgcolor="#ffcc00">Колонка 2</td>
   </tr>
  </table>
</body>
</html>

В данном примере характеристики ячеек управляются с помощью параметров тега <td>, но тоже удобнее изменять через стили. В частности, выравнивание в ячейках указывается свойствами vertical-align и text-align (пример 3).

Пример 3. Применение стилей для выравнивания
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблицы */
   }
   #col1 {
    width: 75%; /* Ширина первой колонки */
    background: #f0f0f0; /* Цвет фона первой колонки */
   }
   #col2 {
    width: 25%; /* Ширина второй колонки */
    background: #fc5; /* Цвет фона второй колонки */
    text-align: right; /* Выравнивание по правому краю */
   }
   #col1, #col2 {
    vertical-align: top; /* Выравнивание по верхнему краю */
    padding: 5px; /* Поля вокруг содержимого ячеек */
   }
  </style>
</head>
<body>
  <table>
   <tr>
    <td id="col1">Колонка 1</td>
    <td id="col2">Колонка 2</td>
   </tr>
  </table>
</body>
</html>

Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.

Выравнивание по нижнему краю делается аналогично, только вместо значения top используется bottom.

Выравнивание по центру
По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому в случае разной высоты колонок требуется задавать выравнивание по верхнему краю. Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении формул, как показано на рис. 2.


Рис. 2. Добавление формулы в документ

В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.

Пример 4. Выравнивание формулы
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
</head>
<body>
  <table width="100%">
   <tr>
    <td width="100"></td>
    <td align="center"><img src="images/formula.png" width="289" height="158"
      alt="Формула 18.6"></td>
    <td width="100" align="right">(18.6)</td>
   </tr>
  </table>
</body>
</html>


В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для создания отступа, который, кстати, может быть установлен и с помощью стилей.

Выравнивание элементов формы
С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.


Рис 3. Расположение полей формы и текста

Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).

Пример 5. Выравнивание полей формы
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
</head>
<body>
  <form method="post" action="handler.php">
   <table width="100%" cellspacing="0" cellpadding="4">
    <tr>
     <td align="right" width="100">Имя</td>
     <td><input type="text" name="nickname" maxlength="50" size="20"></td>
    </tr>
    <tr>
     <td align="right">E-mail</td>
     <td><input type="text" name="email" maxlength="50" size="20"></td>
    </tr>
    <tr>
     <td align="right" valign="top">Комментарий</td>
     <td><textarea name="text" cols="35" rows="10"></textarea></td>
    </tr>
    <tr>
     <td></td>
     <td><input type="submit" value="Добавить комментарий"></td>
    </tr>
   </table>
  </form>
</body>
</html>

В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align="right". Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign.
Дата: Понедельник, 11.01.2016. Сообщение # 6 Bro
Выравнивание элементов

За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.

Центрирование по вертикали
Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).

Пример 1. Центрирование рисунка
Код
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблицы */
    height: 100%; /* Высота таблицы */   
   }
  </style>
</head>
<body>
  <table>
   <tr>
    <td align="center"><img src="images/recipe.png" width="414" height="58"
     alt="Рецепты HTML">
    </td>
   </tr>
  </table>
</body>
</html>

В данном примере выравнивание по горизонтали устанавливается с помощью параметра align="center" тега <td>, а по вертикали содержимое ячейки можно не центрировать, поскольку это положение задано по умолчанию.

Чтобы высота таблицы устанавливалась как 100%, необходимо убрать <!DOCTYPE>, код при этом перестает быть валидным.

Использование ширины и высоты на всю доступную область веб-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.

Выравнивание по горизонтали
За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега <td>, допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали.


Рис. 1. Выравнивание элементов по горизонтали

Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

Выравнивание по верхнему краю
Для указания выравнивания содержимого ячеек по верхнему краю, для тега <td> требуется установить атрибут valign со значением top (пример 2).

Пример 2. Использование valign
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
</head>
<body>
  <table width="100%" cellpadding="5">
   <tr>
    <td valign="top" width="75%" bgcolor="#f0f0f0">Колонка 1</td>
    <td valign="top" width="25%" bgcolor="#ffcc00">Колонка 2</td>
   </tr>
  </table>
</body>
</html>

В данном примере характеристики ячеек управляются с помощью параметров тега <td>, но тоже удобнее изменять через стили. В частности, выравнивание в ячейках указывается свойствами vertical-align и text-align (пример 3).

Пример 3. Применение стилей для выравнивания
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблицы */
   }
   #col1 {
    width: 75%; /* Ширина первой колонки */
    background: #f0f0f0; /* Цвет фона первой колонки */
   }
   #col2 {
    width: 25%; /* Ширина второй колонки */
    background: #fc5; /* Цвет фона второй колонки */
    text-align: right; /* Выравнивание по правому краю */
   }
   #col1, #col2 {
    vertical-align: top; /* Выравнивание по верхнему краю */
    padding: 5px; /* Поля вокруг содержимого ячеек */
   }
  </style>
</head>
<body>
  <table>
   <tr>
    <td id="col1">Колонка 1</td>
    <td id="col2">Колонка 2</td>
   </tr>
  </table>
</body>
</html>

Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.

Выравнивание по нижнему краю делается аналогично, только вместо значения top используется bottom.

Выравнивание по центру
По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому в случае разной высоты колонок требуется задавать выравнивание по верхнему краю. Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении формул, как показано на рис. 2.


Рис. 2. Добавление формулы в документ

В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.

Пример 4. Выравнивание формулы
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
</head>
<body>
  <table width="100%">
   <tr>
    <td width="100"></td>
    <td align="center"><img src="images/formula.png" width="289" height="158"
      alt="Формула 18.6"></td>
    <td width="100" align="right">(18.6)</td>
   </tr>
  </table>
</body>
</html>


В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для создания отступа, который, кстати, может быть установлен и с помощью стилей.

Выравнивание элементов формы
С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.


Рис 3. Расположение полей формы и текста

Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).

Пример 5. Выравнивание полей формы
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
</head>
<body>
  <form method="post" action="handler.php">
   <table width="100%" cellspacing="0" cellpadding="4">
    <tr>
     <td align="right" width="100">Имя</td>
     <td><input type="text" name="nickname" maxlength="50" size="20"></td>
    </tr>
    <tr>
     <td align="right">E-mail</td>
     <td><input type="text" name="email" maxlength="50" size="20"></td>
    </tr>
    <tr>
     <td align="right" valign="top">Комментарий</td>
     <td><textarea name="text" cols="35" rows="10"></textarea></td>
    </tr>
    <tr>
     <td></td>
     <td><input type="submit" value="Добавить комментарий"></td>
    </tr>
   </table>
  </form>
</body>
</html>

В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align="right". Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign.
Прикрепления: 1350245.gif(4Kb) · 9829201.png(10Kb) · 0294963.png(10Kb)
Дмитрий Асмус (Bro)
Модератор
Сообщений: 198
Нет на сайте
    

 
Разрезание и склейка изображений

Разрезание изображения на фрагменты с последующим их объединением в одну целую картинку — давний прием, вошедший в арсенал верстки веб-страниц. Предварительно подготовленный рисунок разрезают на части в графическом редакторе, сохраняют их как отдельные графические изображения, а затем соединяют их вместе с помощью таблицы.

Рассмотрим вначале, зачем применяется разрезание изображений, и какие преимущества это в итоге дает, а затем, как использовать таблицу на практике.

Плюсы разрезания изображений

Создание ссылок
Отдельные рисунки при необходимости можно превращать в ссылки, причем для них можно назначать свое описание (атрибут title) и альтернативный текст (атрибут alt), который виден при отключении показа картинок в браузере или при наведении курсора мыши на изображение.

Эффект перекатывания
Набор отдельных фрагментов позволяет создавать rollover или эффект перекатывания — динамическое изменение одного рисунка на другой при наведении на него курсора мыши, и обратно на прежний, когда курсор уводится прочь.

Уменьшение объема файлов
Отдельными частями изображения удобней манипулировать, подбирая для них графический формат и его параметры таким образом, чтобы объем файла был минимален при сохранении приемлемого качества изображения. В итоге набор графических файлов будет занимать меньше места, и загружаться быстрее, чем один файл, содержащий целый рисунок.

Анимированный GIF
Использование анимированного GIFa для изображений большого размера чревато существенным увеличением объема файла. Но можно пойти на хитрость и заменить лишь часть изображения анимацией, а остальные фрагменты оставить статичными. При этом общий объем нескольких файлов будет гораздо меньше, чем анимирование одного изображения.

Особенности верстки
Изображения на веб-странице по своей природе прямоугольны, но, разрезав один рисунок на составляющие элементы, получим конструктор, из которого можно сложить другую фигуру. Это напоминает детские кубики, на одну из сторон которых наклеена картинка. Складывать подобные фигуры на веб-странице требуется в силу разных причин, например, вместо фрагмента изображения требуется добавить текст. Кроме того, некоторые рисунки можно заменить их фоновым аналогом и тогда конечное изображения, сохраняя свою целостность, будет занимать всю доступную область документа.

Психологический аспект
Когда один рисунок состоит из множества фрагментов, то браузер скачивает их в несколько потоков и показывает те, которые загрузились в первую очередь. Поэтому изображение появляется как элементы мозаики. А это сразу привлекает внимание и кажется, что загрузка происходит быстрее. Так что с технической стороны один рисунок грузится быстрее, а с позиции человеческого восприятия кажется, что набор маленьких рисунков быстрее появляется.

Подготовка изображения

В качестве примера изображения, где требуется разрезание, возьмем рис. 1. Каждая из пяти иконок является ссылкой на соответствующий раздел, кроме того, ссылкой на главную страницу служит рисунок с названием сайта.



Теоретически, в данном случае можно обойтись и без разрезания, если использовать изображение-карту (теги <map> и <area>). Однако этот вариант неприемлем в силу следующих соображений. По задумке разработчиков при открытии любого раздела, иконка ему соответствующая, трансформируется, что в целом меняет изображение целиком (рис. 2). Если применять изображение-карту, то придется заготовить шесть различных изображений (одну для главной страницы и еще пять для каждого раздела), а это скажется в итоге на объеме пересылаемых данных, скорости отображения сайта и качестве рисунков. Следует еще учесть, что представленное на рис. 1 изображение дано в уменьшенном масштабе, чем оно используется в действительности, поэтому объем одного файла получится достаточно большим.



Теперь требуется решить, как разрезать изображение. Вариантов здесь может быть несколько — в конечном итоге это зависит от воли автора, предназначения рисунка и его содержимого.

Разрезание изображения
Разрезание и «сборку» рисунка лучше доверить специализированной программе, в частности, это умеет делать Adobe Photoshop, Adobe ImageReady, Macromedia FireWorks и др. В дальнейшем, для этой будем цели использовать Photoshop, так что все упоминания об инструментах и меню относятся именно к этой программе.

Для удобства разрезания изображения вначале следует добавить направляющие линии, по которым затем и будет происходить разделение на фрагменты (рис. 3).



Теперь используем инструмент Slice (, активация клавишей K) и по направляющим обводим требуемую прямоугольную область. Обозначенная область отмечается синей рамкой с номером фрагмента в левом верхнем углу. Размер областей можно изменять через специальный инструмент Slice Select — . Щелкаем мышью с этим инструментом по желаемому фрагменту — цвет рамки вокруг области становится желтым, а также изменяется тональность рисунка. После чего курсором мыши можно перемещать границы фрагмента за специальные маркеры по бокам и в углах области (рис. 4).



Для быстрого переключения между инструментами Slice и Slice Select нажмите и удерживайте клавишу Ctrl.

Во время изменения размеров фрагментов, следите за тем, чтобы области не пересекались друг с другом, и между ними не возникало промежутков. Хотя Photoshop сам отмечает подобные недочеты и принимает меры к их устранению, лучше держать все под своим контролем.

После предварительного анализа и применения инструмента Slice, получим 18 фрагментов (рис. 5).



Опасаться того, что получилось много рисунков, не стоит из-за того, что часть фрагментов содержит пустое изображение (14, 16 и 15), а часть фрагментов, за исключением ширины, идентичны (3, 5, 7 и 9). Таким образом, число картинок сокращается, поскольку часть из них можно заменить одним прозрачным однопиксельным рисунком, устанавливая у него такие же размеры, как у исходного фрагмента.

Использование однопиксельного прозрачного рисунка в формате GIF достаточно распространенный прием при верстке веб-страниц. Действительно, объем файла минимален (всего 43 байта), картинку при этом можно масштабировать до любого размера, и сквозь нее виден фон.

Использование таблицы для склейки фрагментов
После того, как фрагменты обозначены, требуется сохранить все изображения на диск. Для этого выбираем пункт меню File > Save for Web... (<Alt>+<Shift>+<Ctrl>+<S>) чтобы открыть панель оптимизации графики (рис. 6).



С помощью инструмента Slice Select можно выбирать требуемый фрагмент и устанавливать для него персональные параметры вроде количества цветов, значение потерь качества, прозрачность и т.д. Допускается выделять сразу несколько фрагментов, удерживая клавишу Shift, что позволяет устанавливать для них одинаковые параметры.

По окончанию работы с фрагментами нажимаем кнопку Save и указываем место на диске, куда будет сохранен HTML-документ. Рисунки сохраняются автоматически в папку images, а их имя образуется от имени HTML-файла с добавлением номера фрагмента. Например, сохраняемое имя будет splash.html, тогда первый фрагмент называется splash_01.gif, а последний — splash_18.gif. Кроме того, создается файл spacer.gif, который представляет собой уже упоминаемый прозрачный рисунок размером 1х1 пиксел. Он используется для правильного формирования изображений в таблице.

Настройки, по которым строится HTML-код и формируются имена изображений можно изменить, если при сохранении файла в разделе Settings выбрать пункт Other... (рис. 7).



В окне параметров можно выбирать папку, куда сохранять рисунки, способ формирования имен файлов, а также HTML-кода (рис. 8).



Полученный в результате сохранения файлов HTML-код, после небольшого редактирования представлен в примере 1.

Пример 1. Таблица для склейки изображений
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Нортландские байки</title>
</head>
<body>
  <table width="670" border="0" cellpadding="0" cellspacing="0" align="center">
   <tr>
    <td colspan="9"><img src="images/splash_01.gif" width="670" height="85" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="85" alt=""></td>
   </tr>
   <tr>
    <td rowspan="3"><img src="images/splash_02.gif" width="111" height="104" alt=""></td>
    <td rowspan="5"><img src="images/splash_03.gif" width="45" height="150" alt=""></td>
    <td><img src="images/splash_04.gif" width="84" height="28" alt=""></td>
    <td rowspan="5"><img src="images/splash_05.gif" width="47" height="150" alt=""></td>
    <td><img src="images/splash_06.gif" width="87" height="28" alt=""></td>
    <td rowspan="5"><img src="images/splash_07.gif" width="45" height="150" alt=""></td>
    <td rowspan="2"><img src="images/splash_08.gif" width="135" height="41" alt=""></td>
    <td rowspan="5"><img src="images/splash_09.gif" width="25" height="150" alt=""></td>
    <td rowspan="3"><img src="images/splash_10.gif" width="91" height="104" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="28" alt=""></td>
   </tr>
   <tr>
    <td rowspan="4"><img src="images/splash_11.gif" width="84" height="122" alt=""></td>
    <td rowspan="3"><img src="images/splash_12.gif" width="87" height="93" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="13" alt=""></td>
   </tr>
   <tr>
    <td rowspan="3"><img src="images/splash_13.gif" width="135" height="109" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="63" alt=""></td>
   </tr>
   <tr>
    <td rowspan="2"><img src="images/splash_14.gif" width="111" height="46" alt=""></td>
    <td rowspan="2"><img src="images/splash_15.gif" width="91" height="46" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="17" alt=""></td>
   </tr>
   <tr>
    <td><img src="images/splash_16.gif" width="87" height="29" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="29" alt=""></td>
   </tr>
   <tr>
    <td colspan="9"><img src="images/splash_17.gif" width="670" height="2" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="2" alt=""></td>
   </tr>
   <tr>
    <td colspan="9"><img src="images/splash_18.gif" width="670" height="32" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="32" alt=""></td>
   </tr>
  </table>
</body>
</html>

Данный код еще требует доработки, поскольку требуется, чтобы горизонтальная серая и белая полоса занимали всю доступную ширину веб-страницы. Кроме того, часть фрагментов повторяется и от них можно избавиться.

Чтобы получить требуемый результат, введем слой с фоновым рисунком и нашу таблицу наложим поверх него. Такое изображение представлено на рис. 9.



Теперь создаем нужный слой, назовем его toplayer, и в стилях указываем его параметры (пример 2).

Пример 2. Слой для формирования полос
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Нортландские байки</title>
  <style type="text/css">
   #toplayer {
    background: #aeae9b url("images/bgtop.gif") repeat-x; /* Параметры фона */
    height: 235px; /* Высота слоя */
    border-bottom: 2px solid #8f8f8f; /* Линия внизу */
   }
  </style>
</head>
<body>
  <div id="toplayer">
  ...
  </div>
</body>
</html>

В данном примере параметры фона устанавливаются через универсальное свойство background, которое определяет путь к графическому файлу, цвет заливки и повторяемость рисунка. Хотя цвет фона в таких случаях можно не указывать раз есть фоновый рисунок, но на случай того, что пользователь отключил загрузку изображений, лучше это сделать. Высота слоя также не является обязательным параметром из-за того, что таблица внутри слоя имеет заданную высоту.

Остается заменить фрагменты с номерами 3, 4, 5, 6, 7, 8, 9 14, 15 и 16 на рисунок spacer.gif, сохранив исходные размеры изображений и удалить нижнюю строку таблицы, которая для главной страницы является лишней (пример 3). Использование файла spacer.gif позволяет сократить конечный код и уменьшить требуемое число графических файлов.

Пример 3. Окончательный код
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Нортландские байки</title>
  <style type="text/css">
   #toplayer {
    background: #aeae9b url("images/bgtop.gif") repeat-x;
    height: 235px;
    border-bottom: 2px solid #8f8f8f;
   }
  </style>
</head>
<body>
  <div id="toplayer">
   <table width="670" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
     <td colspan="9"><img src="images/splash_01.gif" width="670" height="85" alt=""></td>
     <td><img src="images/spacer.gif" width="1" height="85" alt=""></td>
    </tr>
    <tr>
     <td rowspan="3"><img src="images/splash_02.gif" width="111" height="104" alt="Нортландия"></td>
     <td rowspan="5"><img src="images/spacer.gif" width="45" height="150" alt=""></td>
     <td><img src="images/spacer.gif" width="84" height="28" alt=""></td>
     <td rowspan="5"><img src="images/spacer.gif" width="47" height="150" alt=""></td>
     <td><img src="images/spacer.gif" width="87" height="28" alt=""></td>
     <td rowspan="5"><img src="images/spacer.gif" width="45" height="150" alt=""></td>
     <td rowspan="2"><img src="images/spacer.gif" width="135" height="41" alt=""></td>
     <td rowspan="5"><img src="images/spacer.gif" width="25" height="150" alt=""></td>
     <td rowspan="3"><img src="images/splash_10.gif" width="91" height="104" alt="Форум"></td>
     <td><img src="images/spacer.gif" width="1" height="28" alt=""></td>
    </tr>
    <tr>
     <td rowspan="4"><img src="images/splash_11.gif" width="84" height="122" alt="Байки"></td>
     <td rowspan="3"><img src="images/splash_12.gif" width="87" height="93" alt="Люди"></td>
     <td><img src="images/spacer.gif" width="1" height="13" alt=""></td>
    </tr>
    <tr>
     <td rowspan="3"><img src="images/splash_13.gif" width="135" height="109" alt=""></td>
     <td><img src="images/spacer.gif" width="1" height="63" alt=""></td>
    </tr>
    <tr>
     <td rowspan="2"><img src="images/spacer.gif" width="111" height="46" alt=""></td>
     <td rowspan="2"><img src="images/spacer.gif" width="91" height="46" alt=""></td>
     <td><img src="images/spacer.gif" width="1" height="17" alt=""></td>
    </tr>
    <tr>
     <td><img src="images/spacer.gif" width="87" height="29" alt=""></td>
     <td><img src="images/spacer.gif" width="1" height="29" alt=""></td>
    </tr>
   </table>
  </div>
</body>
</html>
Дата: Понедельник, 11.01.2016. Сообщение # 7 Bro
Разрезание и склейка изображений

Разрезание изображения на фрагменты с последующим их объединением в одну целую картинку — давний прием, вошедший в арсенал верстки веб-страниц. Предварительно подготовленный рисунок разрезают на части в графическом редакторе, сохраняют их как отдельные графические изображения, а затем соединяют их вместе с помощью таблицы.

Рассмотрим вначале, зачем применяется разрезание изображений, и какие преимущества это в итоге дает, а затем, как использовать таблицу на практике.

Плюсы разрезания изображений

Создание ссылок
Отдельные рисунки при необходимости можно превращать в ссылки, причем для них можно назначать свое описание (атрибут title) и альтернативный текст (атрибут alt), который виден при отключении показа картинок в браузере или при наведении курсора мыши на изображение.

Эффект перекатывания
Набор отдельных фрагментов позволяет создавать rollover или эффект перекатывания — динамическое изменение одного рисунка на другой при наведении на него курсора мыши, и обратно на прежний, когда курсор уводится прочь.

Уменьшение объема файлов
Отдельными частями изображения удобней манипулировать, подбирая для них графический формат и его параметры таким образом, чтобы объем файла был минимален при сохранении приемлемого качества изображения. В итоге набор графических файлов будет занимать меньше места, и загружаться быстрее, чем один файл, содержащий целый рисунок.

Анимированный GIF
Использование анимированного GIFa для изображений большого размера чревато существенным увеличением объема файла. Но можно пойти на хитрость и заменить лишь часть изображения анимацией, а остальные фрагменты оставить статичными. При этом общий объем нескольких файлов будет гораздо меньше, чем анимирование одного изображения.

Особенности верстки
Изображения на веб-странице по своей природе прямоугольны, но, разрезав один рисунок на составляющие элементы, получим конструктор, из которого можно сложить другую фигуру. Это напоминает детские кубики, на одну из сторон которых наклеена картинка. Складывать подобные фигуры на веб-странице требуется в силу разных причин, например, вместо фрагмента изображения требуется добавить текст. Кроме того, некоторые рисунки можно заменить их фоновым аналогом и тогда конечное изображения, сохраняя свою целостность, будет занимать всю доступную область документа.

Психологический аспект
Когда один рисунок состоит из множества фрагментов, то браузер скачивает их в несколько потоков и показывает те, которые загрузились в первую очередь. Поэтому изображение появляется как элементы мозаики. А это сразу привлекает внимание и кажется, что загрузка происходит быстрее. Так что с технической стороны один рисунок грузится быстрее, а с позиции человеческого восприятия кажется, что набор маленьких рисунков быстрее появляется.

Подготовка изображения

В качестве примера изображения, где требуется разрезание, возьмем рис. 1. Каждая из пяти иконок является ссылкой на соответствующий раздел, кроме того, ссылкой на главную страницу служит рисунок с названием сайта.



Теоретически, в данном случае можно обойтись и без разрезания, если использовать изображение-карту (теги <map> и <area>). Однако этот вариант неприемлем в силу следующих соображений. По задумке разработчиков при открытии любого раздела, иконка ему соответствующая, трансформируется, что в целом меняет изображение целиком (рис. 2). Если применять изображение-карту, то придется заготовить шесть различных изображений (одну для главной страницы и еще пять для каждого раздела), а это скажется в итоге на объеме пересылаемых данных, скорости отображения сайта и качестве рисунков. Следует еще учесть, что представленное на рис. 1 изображение дано в уменьшенном масштабе, чем оно используется в действительности, поэтому объем одного файла получится достаточно большим.



Теперь требуется решить, как разрезать изображение. Вариантов здесь может быть несколько — в конечном итоге это зависит от воли автора, предназначения рисунка и его содержимого.

Разрезание изображения
Разрезание и «сборку» рисунка лучше доверить специализированной программе, в частности, это умеет делать Adobe Photoshop, Adobe ImageReady, Macromedia FireWorks и др. В дальнейшем, для этой будем цели использовать Photoshop, так что все упоминания об инструментах и меню относятся именно к этой программе.

Для удобства разрезания изображения вначале следует добавить направляющие линии, по которым затем и будет происходить разделение на фрагменты (рис. 3).



Теперь используем инструмент Slice (, активация клавишей K) и по направляющим обводим требуемую прямоугольную область. Обозначенная область отмечается синей рамкой с номером фрагмента в левом верхнем углу. Размер областей можно изменять через специальный инструмент Slice Select — . Щелкаем мышью с этим инструментом по желаемому фрагменту — цвет рамки вокруг области становится желтым, а также изменяется тональность рисунка. После чего курсором мыши можно перемещать границы фрагмента за специальные маркеры по бокам и в углах области (рис. 4).



Для быстрого переключения между инструментами Slice и Slice Select нажмите и удерживайте клавишу Ctrl.

Во время изменения размеров фрагментов, следите за тем, чтобы области не пересекались друг с другом, и между ними не возникало промежутков. Хотя Photoshop сам отмечает подобные недочеты и принимает меры к их устранению, лучше держать все под своим контролем.

После предварительного анализа и применения инструмента Slice, получим 18 фрагментов (рис. 5).



Опасаться того, что получилось много рисунков, не стоит из-за того, что часть фрагментов содержит пустое изображение (14, 16 и 15), а часть фрагментов, за исключением ширины, идентичны (3, 5, 7 и 9). Таким образом, число картинок сокращается, поскольку часть из них можно заменить одним прозрачным однопиксельным рисунком, устанавливая у него такие же размеры, как у исходного фрагмента.

Использование однопиксельного прозрачного рисунка в формате GIF достаточно распространенный прием при верстке веб-страниц. Действительно, объем файла минимален (всего 43 байта), картинку при этом можно масштабировать до любого размера, и сквозь нее виден фон.

Использование таблицы для склейки фрагментов
После того, как фрагменты обозначены, требуется сохранить все изображения на диск. Для этого выбираем пункт меню File > Save for Web... (<Alt>+<Shift>+<Ctrl>+<S>) чтобы открыть панель оптимизации графики (рис. 6).



С помощью инструмента Slice Select можно выбирать требуемый фрагмент и устанавливать для него персональные параметры вроде количества цветов, значение потерь качества, прозрачность и т.д. Допускается выделять сразу несколько фрагментов, удерживая клавишу Shift, что позволяет устанавливать для них одинаковые параметры.

По окончанию работы с фрагментами нажимаем кнопку Save и указываем место на диске, куда будет сохранен HTML-документ. Рисунки сохраняются автоматически в папку images, а их имя образуется от имени HTML-файла с добавлением номера фрагмента. Например, сохраняемое имя будет splash.html, тогда первый фрагмент называется splash_01.gif, а последний — splash_18.gif. Кроме того, создается файл spacer.gif, который представляет собой уже упоминаемый прозрачный рисунок размером 1х1 пиксел. Он используется для правильного формирования изображений в таблице.

Настройки, по которым строится HTML-код и формируются имена изображений можно изменить, если при сохранении файла в разделе Settings выбрать пункт Other... (рис. 7).



В окне параметров можно выбирать папку, куда сохранять рисунки, способ формирования имен файлов, а также HTML-кода (рис. 8).



Полученный в результате сохранения файлов HTML-код, после небольшого редактирования представлен в примере 1.

Пример 1. Таблица для склейки изображений
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Нортландские байки</title>
</head>
<body>
  <table width="670" border="0" cellpadding="0" cellspacing="0" align="center">
   <tr>
    <td colspan="9"><img src="images/splash_01.gif" width="670" height="85" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="85" alt=""></td>
   </tr>
   <tr>
    <td rowspan="3"><img src="images/splash_02.gif" width="111" height="104" alt=""></td>
    <td rowspan="5"><img src="images/splash_03.gif" width="45" height="150" alt=""></td>
    <td><img src="images/splash_04.gif" width="84" height="28" alt=""></td>
    <td rowspan="5"><img src="images/splash_05.gif" width="47" height="150" alt=""></td>
    <td><img src="images/splash_06.gif" width="87" height="28" alt=""></td>
    <td rowspan="5"><img src="images/splash_07.gif" width="45" height="150" alt=""></td>
    <td rowspan="2"><img src="images/splash_08.gif" width="135" height="41" alt=""></td>
    <td rowspan="5"><img src="images/splash_09.gif" width="25" height="150" alt=""></td>
    <td rowspan="3"><img src="images/splash_10.gif" width="91" height="104" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="28" alt=""></td>
   </tr>
   <tr>
    <td rowspan="4"><img src="images/splash_11.gif" width="84" height="122" alt=""></td>
    <td rowspan="3"><img src="images/splash_12.gif" width="87" height="93" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="13" alt=""></td>
   </tr>
   <tr>
    <td rowspan="3"><img src="images/splash_13.gif" width="135" height="109" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="63" alt=""></td>
   </tr>
   <tr>
    <td rowspan="2"><img src="images/splash_14.gif" width="111" height="46" alt=""></td>
    <td rowspan="2"><img src="images/splash_15.gif" width="91" height="46" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="17" alt=""></td>
   </tr>
   <tr>
    <td><img src="images/splash_16.gif" width="87" height="29" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="29" alt=""></td>
   </tr>
   <tr>
    <td colspan="9"><img src="images/splash_17.gif" width="670" height="2" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="2" alt=""></td>
   </tr>
   <tr>
    <td colspan="9"><img src="images/splash_18.gif" width="670" height="32" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="32" alt=""></td>
   </tr>
  </table>
</body>
</html>

Данный код еще требует доработки, поскольку требуется, чтобы горизонтальная серая и белая полоса занимали всю доступную ширину веб-страницы. Кроме того, часть фрагментов повторяется и от них можно избавиться.

Чтобы получить требуемый результат, введем слой с фоновым рисунком и нашу таблицу наложим поверх него. Такое изображение представлено на рис. 9.



Теперь создаем нужный слой, назовем его toplayer, и в стилях указываем его параметры (пример 2).

Пример 2. Слой для формирования полос
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Нортландские байки</title>
  <style type="text/css">
   #toplayer {
    background: #aeae9b url("images/bgtop.gif") repeat-x; /* Параметры фона */
    height: 235px; /* Высота слоя */
    border-bottom: 2px solid #8f8f8f; /* Линия внизу */
   }
  </style>
</head>
<body>
  <div id="toplayer">
  ...
  </div>
</body>
</html>

В данном примере параметры фона устанавливаются через универсальное свойство background, которое определяет путь к графическому файлу, цвет заливки и повторяемость рисунка. Хотя цвет фона в таких случаях можно не указывать раз есть фоновый рисунок, но на случай того, что пользователь отключил загрузку изображений, лучше это сделать. Высота слоя также не является обязательным параметром из-за того, что таблица внутри слоя имеет заданную высоту.

Остается заменить фрагменты с номерами 3, 4, 5, 6, 7, 8, 9 14, 15 и 16 на рисунок spacer.gif, сохранив исходные размеры изображений и удалить нижнюю строку таблицы, которая для главной страницы является лишней (пример 3). Использование файла spacer.gif позволяет сократить конечный код и уменьшить требуемое число графических файлов.

Пример 3. Окончательный код
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Нортландские байки</title>
  <style type="text/css">
   #toplayer {
    background: #aeae9b url("images/bgtop.gif") repeat-x;
    height: 235px;
    border-bottom: 2px solid #8f8f8f;
   }
  </style>
</head>
<body>
  <div id="toplayer">
   <table width="670" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
     <td colspan="9"><img src="images/splash_01.gif" width="670" height="85" alt=""></td>
     <td><img src="images/spacer.gif" width="1" height="85" alt=""></td>
    </tr>
    <tr>
     <td rowspan="3"><img src="images/splash_02.gif" width="111" height="104" alt="Нортландия"></td>
     <td rowspan="5"><img src="images/spacer.gif" width="45" height="150" alt=""></td>
     <td><img src="images/spacer.gif" width="84" height="28" alt=""></td>
     <td rowspan="5"><img src="images/spacer.gif" width="47" height="150" alt=""></td>
     <td><img src="images/spacer.gif" width="87" height="28" alt=""></td>
     <td rowspan="5"><img src="images/spacer.gif" width="45" height="150" alt=""></td>
     <td rowspan="2"><img src="images/spacer.gif" width="135" height="41" alt=""></td>
     <td rowspan="5"><img src="images/spacer.gif" width="25" height="150" alt=""></td>
     <td rowspan="3"><img src="images/splash_10.gif" width="91" height="104" alt="Форум"></td>
     <td><img src="images/spacer.gif" width="1" height="28" alt=""></td>
    </tr>
    <tr>
     <td rowspan="4"><img src="images/splash_11.gif" width="84" height="122" alt="Байки"></td>
     <td rowspan="3"><img src="images/splash_12.gif" width="87" height="93" alt="Люди"></td>
     <td><img src="images/spacer.gif" width="1" height="13" alt=""></td>
    </tr>
    <tr>
     <td rowspan="3"><img src="images/splash_13.gif" width="135" height="109" alt=""></td>
     <td><img src="images/spacer.gif" width="1" height="63" alt=""></td>
    </tr>
    <tr>
     <td rowspan="2"><img src="images/spacer.gif" width="111" height="46" alt=""></td>
     <td rowspan="2"><img src="images/spacer.gif" width="91" height="46" alt=""></td>
     <td><img src="images/spacer.gif" width="1" height="17" alt=""></td>
    </tr>
    <tr>
     <td><img src="images/spacer.gif" width="87" height="29" alt=""></td>
     <td><img src="images/spacer.gif" width="1" height="29" alt=""></td>
    </tr>
   </table>
  </div>
</body>
</html>
Прикрепления: 4339878.gif(11Kb) · 2325146.gif(12Kb) · 2107180.gif(12Kb) · 7824242.gif(2Kb) · 1484484.gif(12Kb) · 0085645.gif(31Kb) · 4936970.gif(3Kb) · 2091651.gif(11Kb) · 3371037.gif(0Kb)
Дмитрий Асмус (Bro)
Модератор
Сообщений: 198
Нет на сайте
    

 
Применение таблиц

Таблицы могут использоваться не только для добавления колонок или выравнивания элементов веб-страницы, но и для создания различных дизайнерских изысков вроде декоративной рамки или тени. Благодаря наличию множества параметров, как у самой таблицы, так и у ее ячеек, с помощью сочетания таблиц и рисунков можно формировать практически любые декоративные элементы. Причем их легко можно приспосабливать под любой макет, поскольку ширину таблицы можно устанавливать и в процентах и в пикселах.

Создание декоративной рамки
Для создания желаемой рамки ее вначале следует нарисовать в каком-нибудь графическом редакторе. Хотя конечная ширина рамки на веб-странице может варьироваться в больших пределах, например, в случае использования резинового макета, размер уголков остается постоянным. Поэтому при создании изображения следует в первую очередь ориентироваться именно на уголки. Так, на рис. 1 показана рамка со скругленными углами.



Теперь изображение рамки разрезаем на девять фрагментов, которые помечены на рис. 2 оранжевыми линиями и номерами. Для разрезания рисунка существуют специализированные программы вроде Adobe ImageReady или Photoshop. Ширину и высоту фрагментов надо брать с тем прицелом, чтобы учесть отступы от нарисованной границы до содержимого рамки. Представьте на месте пятого фрагмента любой текст и решите для себя, насколько близко располагается он к границе.

Отступы от текста до рамки не обязательно регулировать с помощью ширины рисунков, можно воспользоваться стилевым свойством padding, применяя его к ячейке с содержимым.



После разрезания рисунка на части получим девять фрагментов, но в итоге нам понадобится из них только восемь из-за того, что средняя часть с номером 5 не нужна, поскольку ее заменит содержимое рамки, текст, например.

Фрагменты 2 и 8 имеют слишком большую ширину, поэтому их можно несколько обрезать. Аналогично дело обстоит и с фрагментами 4 и 6, только их сокращаем по высоте. В результате получим восемь графических изображений представленных в табл. 1.



После создания нужных фрагментов формируем таблицу размером 3х3 ячейки, как показано на рис. 3.



Ширина самой таблицы может задаваться как в пикселах, так и процентах, от этого в итоге зависит размер рамки. А вот ширина и высота крайних ячеек должна совпадать с размерами соответствующих рисунков — уголков, вертикальных и горизонтальных линий и устанавливаться в пикселах. Также в этой таблице атрибуты border, cellspacing и cellpadding должны быть равны нулю, иначе линии не будут состыковываться между собой (пример 1).

Пример 1. Создание декоративной рамки
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Рамка</title>
  <style type="text/css">
   #content {
    padding: 5px; /* Поля вокруг содержимого */
   }
  </style>
</head>
<body>
  <table width="400" border="0" cellspacing="0" cellpadding="0">
   <tr>
    <td height="13" width="12"><img src="images/01.gif" width="12" height="13" alt=""></td>
    <td style="background: url(images/02.gif)" height="13"></td>
    <td height="13" width="14"><img src="images/03.gif" width="14" height="13" alt=""></td>
   </tr>
   <tr>
    <td style="background: url(images/04.gif)"></td>
    <td id="content">Содержимое</td>
    <td style="background: url(images/06.gif)"></td>
   </tr>
   <tr>
    <td height="13"><img src="images/07.gif" height="13" alt=""></td>
    <td style="background: url(images/08.gif)"></td>
    <td height="13"><img src="images/09.gif" height="13" alt=""></td>
   </tr>
  </table>
</body>
</html>


В данном примере ширина всей таблицы составляет 400 пикселов, а ширина и высота отдельных ячеек равна высоте расположенных в них рисунков. Уголки вставляются как обычные рисунки с помощью тега <img>, а вот горизонтальные и вертикальные линии задаются с помощью фона (стилевое свойство background). Это позволяет делать нашу рамку масштабируемой, тогда ее размер будет меняться в зависимости от содержимого. Иными словами, при замене width="400" на width="100%", рамка будет отображаться по-прежнему корректно.

Не обязательно указывать ширину всех ячеек в колонке, достаточно задать ширину первой ячейки и нижерасположенные ячейки будут подстраиваться под нее.

Приведенный способ позволяет создавать рамки практически любого вида.

Добавление тени
Добавление тени к изображению или блоку текста происходит практически аналогично созданию декоративной рамки. Вначале готовим исходную картинку с тенью (рис. 4), а затем посредством разрезания превращаем ее в набор фрагментов, которые необходимо распределить по ячейкам таблицы.



В конечном итоге понадобится пять изображений, которые представлены в табл. 2.



аглушки необходимы для того, чтобы тень имела сглаженные края и выглядела законченной.

Теперь создаем таблицу размером 2х2 ячейки (рис. 5), общая ширина у нее устанавливается по желанию, а ширина правой колонки должна равняться ширине рисунка с тенью (s01.gif). Высота нижних ячеек таблицы также должна совпадать с высотой рисунка тени (s02.gif).



Чтобы легко масштабировать блок с тенью, рисунки устанавливаются в виде фона с помощью атрибута background тега <td> (пример 2).

Пример 2. Создание тени
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тень</title>
  <style type="text/css">
   #content {
    padding: 5px; /* Поля вокруг текста */
    background: #dd9; /* Цвет фона */
   }
  </style>
</head>
<body>
  <table width="200" cellspacing="0" cellpadding="0">
   <tr>
    <td id="content">Великаны должны быть или большие,
     или их должно быть много, если они маленькие.</td>
    <td width="9" valign="top" style="background: url(images/s01.gif)">
      <img src="images/s04.gif" width="9" height="10" alt=""></td>
   </tr>
   <tr>
    <td height="9" style="background: url(images/s02.gif)">
     <img src="images/s05.gif" width="10" height="9" alt=""></td>
    <td><img src="images/s03.gif" width="9" height="9" alt=""></td>
   </tr>
  </table>
</body>
</html>


Обратите внимание, что в данном примере выравнивание в правой верхней ячейке задается по верхнему краю через атрибут valign. Без этого действия соответствующая заглушка для тени не будет располагаться в нужном месте.
Дата: Понедельник, 11.01.2016. Сообщение # 8 Bro
Применение таблиц

Таблицы могут использоваться не только для добавления колонок или выравнивания элементов веб-страницы, но и для создания различных дизайнерских изысков вроде декоративной рамки или тени. Благодаря наличию множества параметров, как у самой таблицы, так и у ее ячеек, с помощью сочетания таблиц и рисунков можно формировать практически любые декоративные элементы. Причем их легко можно приспосабливать под любой макет, поскольку ширину таблицы можно устанавливать и в процентах и в пикселах.

Создание декоративной рамки
Для создания желаемой рамки ее вначале следует нарисовать в каком-нибудь графическом редакторе. Хотя конечная ширина рамки на веб-странице может варьироваться в больших пределах, например, в случае использования резинового макета, размер уголков остается постоянным. Поэтому при создании изображения следует в первую очередь ориентироваться именно на уголки. Так, на рис. 1 показана рамка со скругленными углами.



Теперь изображение рамки разрезаем на девять фрагментов, которые помечены на рис. 2 оранжевыми линиями и номерами. Для разрезания рисунка существуют специализированные программы вроде Adobe ImageReady или Photoshop. Ширину и высоту фрагментов надо брать с тем прицелом, чтобы учесть отступы от нарисованной границы до содержимого рамки. Представьте на месте пятого фрагмента любой текст и решите для себя, насколько близко располагается он к границе.

Отступы от текста до рамки не обязательно регулировать с помощью ширины рисунков, можно воспользоваться стилевым свойством padding, применяя его к ячейке с содержимым.



После разрезания рисунка на части получим девять фрагментов, но в итоге нам понадобится из них только восемь из-за того, что средняя часть с номером 5 не нужна, поскольку ее заменит содержимое рамки, текст, например.

Фрагменты 2 и 8 имеют слишком большую ширину, поэтому их можно несколько обрезать. Аналогично дело обстоит и с фрагментами 4 и 6, только их сокращаем по высоте. В результате получим восемь графических изображений представленных в табл. 1.



После создания нужных фрагментов формируем таблицу размером 3х3 ячейки, как показано на рис. 3.



Ширина самой таблицы может задаваться как в пикселах, так и процентах, от этого в итоге зависит размер рамки. А вот ширина и высота крайних ячеек должна совпадать с размерами соответствующих рисунков — уголков, вертикальных и горизонтальных линий и устанавливаться в пикселах. Также в этой таблице атрибуты border, cellspacing и cellpadding должны быть равны нулю, иначе линии не будут состыковываться между собой (пример 1).

Пример 1. Создание декоративной рамки
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Рамка</title>
  <style type="text/css">
   #content {
    padding: 5px; /* Поля вокруг содержимого */
   }
  </style>
</head>
<body>
  <table width="400" border="0" cellspacing="0" cellpadding="0">
   <tr>
    <td height="13" width="12"><img src="images/01.gif" width="12" height="13" alt=""></td>
    <td style="background: url(images/02.gif)" height="13"></td>
    <td height="13" width="14"><img src="images/03.gif" width="14" height="13" alt=""></td>
   </tr>
   <tr>
    <td style="background: url(images/04.gif)"></td>
    <td id="content">Содержимое</td>
    <td style="background: url(images/06.gif)"></td>
   </tr>
   <tr>
    <td height="13"><img src="images/07.gif" height="13" alt=""></td>
    <td style="background: url(images/08.gif)"></td>
    <td height="13"><img src="images/09.gif" height="13" alt=""></td>
   </tr>
  </table>
</body>
</html>


В данном примере ширина всей таблицы составляет 400 пикселов, а ширина и высота отдельных ячеек равна высоте расположенных в них рисунков. Уголки вставляются как обычные рисунки с помощью тега <img>, а вот горизонтальные и вертикальные линии задаются с помощью фона (стилевое свойство background). Это позволяет делать нашу рамку масштабируемой, тогда ее размер будет меняться в зависимости от содержимого. Иными словами, при замене width="400" на width="100%", рамка будет отображаться по-прежнему корректно.

Не обязательно указывать ширину всех ячеек в колонке, достаточно задать ширину первой ячейки и нижерасположенные ячейки будут подстраиваться под нее.

Приведенный способ позволяет создавать рамки практически любого вида.

Добавление тени
Добавление тени к изображению или блоку текста происходит практически аналогично созданию декоративной рамки. Вначале готовим исходную картинку с тенью (рис. 4), а затем посредством разрезания превращаем ее в набор фрагментов, которые необходимо распределить по ячейкам таблицы.



В конечном итоге понадобится пять изображений, которые представлены в табл. 2.



аглушки необходимы для того, чтобы тень имела сглаженные края и выглядела законченной.

Теперь создаем таблицу размером 2х2 ячейки (рис. 5), общая ширина у нее устанавливается по желанию, а ширина правой колонки должна равняться ширине рисунка с тенью (s01.gif). Высота нижних ячеек таблицы также должна совпадать с высотой рисунка тени (s02.gif).



Чтобы легко масштабировать блок с тенью, рисунки устанавливаются в виде фона с помощью атрибута background тега <td> (пример 2).

Пример 2. Создание тени
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тень</title>
  <style type="text/css">
   #content {
    padding: 5px; /* Поля вокруг текста */
    background: #dd9; /* Цвет фона */
   }
  </style>
</head>
<body>
  <table width="200" cellspacing="0" cellpadding="0">
   <tr>
    <td id="content">Великаны должны быть или большие,
     или их должно быть много, если они маленькие.</td>
    <td width="9" valign="top" style="background: url(images/s01.gif)">
      <img src="images/s04.gif" width="9" height="10" alt=""></td>
   </tr>
   <tr>
    <td height="9" style="background: url(images/s02.gif)">
     <img src="images/s05.gif" width="10" height="9" alt=""></td>
    <td><img src="images/s03.gif" width="9" height="9" alt=""></td>
   </tr>
  </table>
</body>
</html>


Обратите внимание, что в данном примере выравнивание в правой верхней ячейке задается по верхнему краю через атрибут valign. Без этого действия соответствующая заглушка для тени не будет располагаться в нужном месте.
Прикрепления: 2739449.gif(1Kb) · 8361700.gif(1Kb) · 4906271.png(7Kb) · 4551288.gif(1Kb) · 0134781.gif(1Kb) · 5711634.png(7Kb) · 0107013.gif(0Kb)
Дмитрий Асмус (Bro)
Модератор
Сообщений: 198
Нет на сайте
    

 
Компьютерный форум » Web-Мастер » Справочник по HTML » Вёрстка веб-страниц: Табличная верстка (Известный способ верстки с использование таблиц)
Страница 1 из 11
Поиск: