Отправляет email-рассылки с помощью сервиса Sendsay

Программирование в Web

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Май 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

599 подписчиков
-1 за неделю
←   Все выпуски   →

Программирование в Web Выпуск 12 от 16/05/2006 Основы HTML - Урок-5


 
Программирование в web

ОСНОВЫ HTML
 
 
Внимание!!!
Все материалы уроков, публикуемых в этом и во всех последующих выпусках рассылки «Программирование в web», являются интеллектуальной собственностью авторов и ведущих рассылки. По всем вопросам размещения или публикации данных материалов на собственных ресурсах или где-либо еще, или иного использования, не связанного с личным ознакомлением и самостоятельным обучением, - обращайтесь на адрес автора. Любое использование этих материалов в коммерческих или иных целях, явно не разрешенное автором, является незаконным.
 
 
У Р О К    5
Здравствуйте уважаемые подписчики!

В этом уроке продолжим изучать таблицы и табличный способ верстки страниц. В выпуске поговорим еще о нескольких наиболее часто используемых атрибутах тегов<table></table>, <tr></tr>, <td></td>. Итак продолжаем…


Примечание: Данный урок, также как и предыдущий, никак не претендует на то, что изучив его вы станете профессионалами web-дизайна. Я пытаюсь дать лишь начальные сведения. Дело остается лишь за вашими фантазией и вкусом.


Таблицы. Табличная верстка страниц. Часть 2:
Атрибут «colspan»:

C помощью данного атрибута мы можем несколько усложнить представление таблицы. Допустим, у нас есть таблица, состоящая из трех строк. Первая и последняя строки этой таблицы состоят из одного столбца, а вторая строка содержит три столбца. Ради интереса, попробуйте это реализовать, исходя из того, что я рассказывал в прошлом уроке. Вы получите искаженную таблицу, не совсем пригодную для отображения задуманного вами. Чтобы добиться правильного отображения таблицы, нужно впрямую указать браузеру, что первая и последние строки должны быть растянуты на всю ширину таблицы и не зависеть от количества столбцов во второй строке. Воспользуемся для этого атрибутом colspan, который принимает числовое значение, равное числу столбцов, на которое мы хотим растянуть всю строку. Данный атрибут применяется внутри тегов <td>, и только в них. Вот пример:


<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Страница html с простой табличкой</title>
</head>
<body>
<table width="90%" align="center" border="0" cellspacing="1" cellpadding="5">
   <tr>
      <td colspan="3" align="center">Строка-1 - один столбец.</td>
   </tr>
   <tr>
      <td align="center">Строка-2 - Ячейка-1</td>
      <td align="center">Строка-2 - Ячейка-2</td>
      <td align="center">Строка-2 - Ячейка-3</td>
   </tr>
   <tr>
      <td colspan="3" align="center">Строка-3 - тоже один столбец.</td>
   </tr>
</table>
</body>
</html>

Вот как будет отображаться наша таблица, например, в браузере IE:


Строка-1 - один столбец.
Строка-2 - Ячейка-1 Строка-2 - Ячейка-2 Строка-2 - Ячейка-3
Строка-3 - тоже один столбец.

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


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


Атрибут «rowspan»:

Атрибут «rowspan» применяется, также как и предыдущий, только внутри тегов <td>, и делает примерно такой же финт, как и «colspan», но по отношению к строкам, а не столбцам. Рассмотрим пример таблицы, состоящей из трех столбцов, в которой второй и третий столбцы состоят из трех строк, а первый - из одной:


<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Страница html с простой табличкой</title>
</head>
<body>
<table width="90%" align="center" border="0" cellspacing="1" cellpadding="5">
   <tr>
      <td rowspan="3" align="center">
         Строки-1, 2, 3 - Объединены в одну Ячейку-1
      </td>
      <td align="center">Строка-1 - Ячейка-2</td>
      <td align="center">Строка-1 - Ячейка-3</td>
   </tr>
   <tr>
      <td align="center">Строка-2 - Ячейка-2</td>
      <td align="center">Строка-2 - Ячейка-3</td>
   </tr>
   <tr>
      <td align="center">Строка-3 - Ячейка-2</td>
      <td align="center">Строка-3 - Ячейка-3</td>
   </tr>
</table>
</body>
</html>

Вот как будет отображаться наша таблица, например, в браузере IE:


Строки-1, 2, 3 - Объединены в одну Ячейку-1 Строка-1 - Ячейка-2 Строка-1 - Ячейка-3
Строка-2 - Ячейка-2 Строка-2 - Ячейка-3
Строка-3 - Ячейка-2 Строка-3 - Ячейка-3

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


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


Атрибут «valign»:

Применяется во всех трех тегах: и в <table>, и в <tr>, и в <td>. Может принимать следующие три значения: top - выравнивание по верхней части, middle - выравнивание по центру (относительно верхнего и нижнего края), bottom - выравнивание по нижнему краю. Внутри тега <table> применяется для выравнивания всей таблицы относительно высоты страницы. Внутри тега <tr> применяется для выравнивания содержимого всех ячеек строки по высоте, а внутри тега <td> - для выравнивания содержимого конкретной ячейки по высоте. Пример, в целях уменьшения размера выпуска, приводить не буду, вы, лучше, поиграйте этим атрибутом самостоятельно.



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


Атрибут «background»:

Данный атрибут используется внутри тега <table> и определяет фоновый рисунок всей таблицы. В качестве значения этого атрибута используется относительный или абсолютный путь к файлу с картинкой. Надо помнить, что картинка будет либо растянута, либо сжата до размеров таблицы, поэтому, если вы решите использовать какое-то изображение (рожицу, фотографию, пейзаж…) и при этом не подгоните размеры изображения под размеры страницы, - изображение будет искажено. Так что лучше использовать какие-либо абстрактные или однотонные фоны.


Атрибут «bgcolor»:

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


Тег <col />:

Применяется не очень часто. Его назначение - группировать по свойствам столбцы таблицы.


Атрибут «title»:

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


Тег <thead></thead>:

Задает заголовок таблицы. Обычно содежржит в себе теги строк и столбцов. Как я уже говорил - применяется редко и легко может быть заменен основными тремя тегами.


Тег <th></th>:

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



Примечание: Последние два тега, как я уже говорил, легко эмулируются основными тегами, и потому, останавливаться на них не буду.


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


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


Я в уроках часто ссылаюсь на стили оформления - это стили CSS. О них мы поговорим после того, как изучим основные теги HTML. Так нам будет легче ориентироваться.


 
 
Объявления!!!

Если у вас возникли какие-то вопросы, не стесняйтесь, задавайте. Для этого всего лишь пошлите на мой адрес письмо с вопросом и с темой, в которой обязательно укажите какого урока и какого языка касатеся вопрос. Например, тема может быть такой - «Основы HTML. Урок 4. Вопрос». Также, с такой же темой и на этот же адрес вы можете прислать и свои дополнения к уроку. Если дополнения будут существенными, то в последующих уроках они обязательно будут учтены.

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

Маленькая просьба. Многие из вас присылают мне запросы на отправку им того или иного, не полученного ранее, выпуска рассылки. У меня не всегда есть возможность это сделать. Поэтому предлагаю вам для начала посмотреть нужный выпуск в архиве рассылки. Рассылка выходит сразу на трех рассыльных сервисах, и по некоторым причинам (мне не известным) некоторые сервисы не принимают адресов, в которых встречаются именя конкурирующих рассыльных сервисов, по этой причине я опубликую только одну ссылку на архив рассылки только одного рассыльного сервиса, а именно Content.mail.ru. Вот ссылка на на этот архив рассылки - http://content.mail.ru/pages/p_21931.html. В обще м-то это объявление наверное лишнее, ведь в каждом выпуске каждой рассылки, вне зависимости от того, на каком сервисе она выходит, всегда указан этот самый адрес архива рассылки. На сабскрайб.ру и на контент.мэйл.ру этот адрес указывается в самом низу выпуска, а на мэйллист.ру - в самом верху выпуска. Так что, при достаточном внимании, вы сами легко сможете найти нужную ссылку на архив рассылки.

 
 
Внимание!!!
Все материалы уроков, публикуемых в этом и во всех последующих выпусках рассылки «Программирование в web», являются интеллектуальной собственностью авторов и ведущих рассылки. По всем вопросам размещения или публикации данных материалов на собственных ресурсах или где-либо еще, или иного использования, не связанного с личным ознакомлением и самостоятельным обучением, - обращайтесь на адрес автора. Любое использование этих материалов в коммерческих или иных целях, явно не разрешенное автором, является незаконным.
 
 
Наш проект
Автор рассылки — Anatolick
Архив рассылки — http://content.mail.ru/pages/p_21931.html
Сайт проекта — «Russian discussions Zone»
Движок для сайтов — «Tanat-Engine»
Дискуссионный лист — «Все для Всех о РС»
Дискуссионный лист — «File Info Masters»
Дискуссионный лист — «Напряги мозги»
Дискуссионный лист — «Ищем все…»
Дискуссионный лист — «Все обо Всем по Email»
Дискуссионный лист — «Внимание! Розыск…»
Дискуссионный лист — «Английский для Всех и каждого»
Группа стандартизации в Web — W3C.org
 
В избранное