На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » Web-дизайн
Стандартными параметрами для строки являются ALIGN и VALIGN, отвечающие за выравнивание ячеек внутри строки по горизонтали и по вертикали. Последняя пара тегов - это теги самих ячеек: . С теми же параметрами, что и у строки. Кроме того, существуют еще и теги, позволяющие в самом коде делить таблицу на соответствующие разделы: THEAD, TH, TBODY и TFOOT. При этом, ТН уже содержит в себе форматирование, позволяющее выделять жирным и выравнивать по центру текст заголовка таблицы. Правда, всё это имеет смысл, если таблица создается с целью именно показать таблицу в HTML-документе. В самом простом варианте (с учётом всех вышеуказанных тегов) табличный код выглядит вот так:

               

Все в своих рамках

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

               1. Таблицы как таковые.

               Для начала, напомню самое простое: как создается каркас таблицы. Все начинается с пары тегов TABLE:
. Они имеют свои стандартные параметры ALIGN, BORDER, CELLSPACING, CELLPADDING, WIDTH, которые отвечают за выравнивание таблицы относительно окна браузера, за наличие рамки у таблицы, за расстояние между ячейками таблицы и отступы внутри ячеек, за ширину таблицы (как в процентах, так и в пикселях). Далее следует пара тегов, определяющих строку таблицы:


               

               

               

               

               

               

               

               

               

               

               

               

               
               

               

               

               
               
Заголовок
Ячейка 1 Ячейка 2 Ячейка 3
Заключение
.

               Всё это проще простого, скажете Вы. И что здесь сложного и опасного?
               Во-первых, опасность в параметрах. Не все параметры стоит применять, так же, как и не все параметры из тех, что следовало бы, мы применяем. Так, например, для тега TR не обязательно применение параметров выравнивания. Однако они обязательны (!) для применения с тегом TD. Также типичная ошибка, с тегами TR, TD и TH может не применяться параметр WIDTH, однако он очень важен, так влияет на соответствие расположения ячеек в таблице относительно друг друга и таблицы в целом.
               Таким образом, создавая таблицу, необходимо указать ширину самой таблицы (а иногда и её высоту - для "благозвучности" дизайна), ширину строки и ячейки/ячеек, горизонтальное выравнивание таблицы и ячейки, а также расстояние между ячейками и внутри-ячеечные отступы. При этом ширина каждой ячейки в строке, если их несколько, должна соответственно быть указанна так, чтобы их сумма соответствовала ширине строки. Однако если указать ширину ячеек, но опустить ширину строки, то может появиться неприятный эффект - "съедание" объектов (например, кнопок HTML), расположенных в ячейках.
               Прошу обратить внимание на параметр COLSPAN, присутствующий в ячейках заголовка и заключения таблицы. Он применяется, когда ячеек в строках больше одной и указывает, на ширину скольких колонок растянется данная ячейка. Параметр, аналогичный ему и касающийся количества "перекрываемых" строк, называется ROWSPAN. Пропуск этих параметров, там, где они необходимы, является очень частой ошибкой и приводит к искажению получаемого в браузере изображения.
               Кроме основных параметров, в табличных тегах могут применяться дополнительные, которые особенно не влияют на правильное форматирование таблицы. Это стандартные HTML-параметры фонового цвета, цвета рамки (основной, "светлой" и "темной"), параметры STYLE и CLASS каскадных таблиц стилей. Здесь важно не ошибиться с использованием цветов и стилей, чтобы ваша таблица выглядела гармонично и не колола глаза пестротой и неопрятностью дизайна. Также, нужно учитывать, что Netscape Navigator по умолчанию использует для оформления рамки таблицы объемную линию. Он может частично "покрасить" её в указанный вами цвет, но не признает "светло-темного" варианта.
               Во-вторых, опасность скрывается в самих таблицах. Нередко, создавая дизайн страницы с помощью таблицы, мы забываем, что ячейки намертво связаны друг с другом. Даже COLSPAN/ROWSPAN не позволяют нам освободиться полностью от тех рамок, в которые нас загоняют столбцы и строки таблицы. А ведь дизайн требует, чаще всего, "вольного" расположения элементов на странице.
               В этом случае необходимо прибегнуть к "методу Матрёшки", при котором основная таблица является всего лишь носителем других, функционально значимых таблиц, в которых и располагаются элементы дизайна. На примере это выглядит следующим образом:

               
               
               
               
               
               
               
               

               
               
Ячейка 2 Ячейка 3

               

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100