Главная

Новости

Статьи и обзоры
  Горожанин
  Обнинск в Internet
  Web Design
  Hardware
  Software
  Безопасность
  Серфинг
  Игродром
  Relax
  Технологии
  Web-обзор
  Интернет-ликбез
  Опросник
  УП-Технологии
  ART.net

Ссылки

Архив

О нас

Контакты

Форумы

POPULAR.RU

la_serg

HTML: Основные теги. Часть 3 - Заключение

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

Итак, от слов - к делу. Давайте рассмотрим теги, которые создают таблицу. Тег <table></table>- это основной тег, который указывает начало и конец таблицы. Он может содержать следующие параметры: align, background, bgcolor, bordercolor, border, cellpadding, cellspacing, height и width. И, как обычно рассмотрим параметры. Align выравнивает таблицу - возможные значения: left, center, right. Background указывает путь к рисунку, который будет фоновым для таблицы. Если у странички есть фоновый рисунок, то фон таблицы будет поверх него. Bgcolor указывает фоновый цвет для таблицы, значение в стандарте #rrggbb (см. "Свет в Internet" #38(38) - HTML: Основные теги. Часть 3). Bordercolor задает цвет рамки таблицы- аналогичен bgcolor'у. Border задает толщину рамки, возможные значения - положительные числа. Если Вы поставите 0, то рамка будет невидимой. Cellpadding указывает отступ от рамки, т.е. максимальное приближение элементов таблицы к ее рамке. Возможные значения - любое неотрицательное число. Cellspaсing указывает расстояние между ячейками таблицы, аналогичен cellpadding. Height и width указывают высоту и ширину таблицы соответственно. Возможные значения - пиксели и проценты (здесь и далее: если значением являются проценты, то для указания этого делается так param="50%", пиксели идут как значение по умолчанию т.е. param="50"). Как всегда, не рекомендую Вам использовать проценты поскольку при изменении размеров окна возникают неприятные эффекты.

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

Тег <table></table> обязан иметь внутри себя хотя бы один тег <tr></tr> (т.е. количество тегов <tr></tr> внутри тега <table></table> 1 и больше). Тег <tr></tr> обозначает полосу (горизонтальную колонку) в таблице. Данный тег может быть вложен лишь в <table></table>. Если это правило не соблюдено, то есть вероятность, что он не будет интерпретирован, либо будет интерпретирован некорректно. Возможные параметры: align, bgcolor, bordercolor, nowrap, valign. Align, bgcolor и bordercolor полностью аналогичны описанным выше. Nowrap - логический параметр, если он присутствует, то внутри полосы игнорируются переносы строки. Тег valign определяет выравнивание по вертикали, возможные значения - bottom, middle и top.

Тег <tr></tr> обязан иметь внутри себя хотя бы один тег <td></td> (т.е. количество тегов <td></td> внутри тега <table></table> 1 и больше). Тег <td></td> обозначает столбец (вертикальную колонку) в таблице. Данный тег может быть вложен лишь в <tr></tr>. Если и это правило не соблюдено, то снова есть вероятность, что он не будет интерпретирован, либо будет интерпретирован некорректно. Итак, мы получили строгую иерархию табличных тегов: table -> tr -> td. Нарушение последней приводит к некорректной работе Вашего браузера - будьте внимательны работая с таблицами. Рассмотрим возможные свойства этого тега. Вот список возможных параметров тега: align, background, bgcolor, height, nowrap, title, valign и width. Все эти параметры - типовые, и уже были рассмотрены нами.

Ну, хватит сухой информации. Давайте рассмотрим какой-нибудь пример, от дела к словам :)). Возвращаемся к нашим баранам :)). Итак, нам надо поместить картинку в строго определенное место, пусть это будет точка с координатами 100, 250. Идем к тегу <body> и ставим параметры margintop="0" и marginleft="0" (напомню, что эти параметры отвечают за отступ элементов от краев окна, сверху и снизу соответственно). Теперь создаем таблицу с 2 полосами и 2 колонками в каждой полосе. Нам не нужно, чтобы пользователь видел нашу таблицу, поэтому делаем так: border="0". Этот параметр сделает рамку невидимой. Напомню Вам: начало координат (точка 0) находится в левом верхнем углу окна, ось ОХ идет из этой точки направо, ось ОУ идет вниз. Итак как же поместить картинку в точку 100, 250? Очень просто присваиваем параметр height="250" первому тегу <tr>. Таким образом, мы задаем высоту первой полосы 250 пикселей. Теперь идем во второй тег <tr> в нем видим два <td> это наши колонки. Вставляем в первый <td> параметр wigth="100" - этим самым мы задаем смещение вправо (по оси ОХ), а во второй тег <td> вставляем картинку. Картинку в таблицу можно вставить двумя способами - вставить параметр background="pic.jpg" в тег <td> так мы сделаем картинку pic.jpg фоном 4ой ячейки, а можно непосредственно вставить тег <img> [см. "Свет в Internet" #38]. Последний вариант - предпочтительней.

Вуаля! Картинка в точке 100, 250. Вот и разобрались мы с основами HTML. Но веб-дизайн на этом не заканчивается! Это были только основы. Теперь мы с Вами люди грамотные :)) и начнем разбирать технические детали и навороты, которыми пользуются профессионалы.

До скорых встреч!

#40/17.12.2000