Отправляет 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 Выпуск 11 от 15/05/2006 Основы HTML - Урок-4 - Часть-1


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

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

В этом уроке я хочу немножечко рассказать об одних из самых распространенных тегах в HTML, о тегах <table></table>, <tr></tr>, <td></td>. Данные теги широко применяются для формирования внешнего вида страниц html-документов (так называемый способ табличной верстки), и предназначены, прежде всего, для вставки в документ различных по сложности таблиц. Несмотря на то, что табличная верстка на сегодняшний день считается устаревшей, и ей на смену постепенно приходит другой способ верстки (так называемый «дивный дизайн», - о нем в последующих уроках), практически большинством web-дизайнеров, до сих пор, применяется именно табличный способ верстки. Не надо думать, что здесь сказывается консерватизм или косность мышления. Это не так. У обоих способов есть свои минусы и плюсы. Табличный способ верстки позволяет формировать внешний вид страниц без особ ых усилий, и, при этом, всеми браузерами такие страницы будут отображаться практически одинаково. Напротив, при «дивном дизайне» добиться того, чтобы ваш документ выглядел одинаково во всех браузерах намного сложнее. Зато, «дивный дизайн» позволяет создавать оформление ничуть не хуже, чем при табличной верстке, но кода, при этом, будет написано намного меньше. На самом деле плюсов и минусов несколько больше, но это не тема нашего урока и об этом вы лучше будете судить сами, когда ознакомитесь со всем самостоятельно. Итак, таблицы и табличный способ верстки…


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


Таблицы. Табличная верстка страниц. Часть 1:
Общие сведения. Теги <table></table>, <tr></tr>, <td></td>

Теги <table></table>, <tr></tr>, <td></td> всегда применяются вместе и поотдельности не имеют смысла. Кроме них также могут применяться еще несколько тегов, предназначенных для формирования некоторых полей таблиц, но именно при верстке их применяют достаточно редко, а вот при вставке таблиц, наоборот, применяют достаточно часто. Но это дело вкуса, дело в том, что с помощью стилей (да и без них тоже) можно оставшиеся теги заменить. По этой причине я не буду долго останавливаться на них, а сосредоточусь лучше на тегах <table></table>, <tr></tr>, <td></td> и их атрибутах. Остальные теги я лишь вкратце опишу после основного текста.


Итак, что же это за теги такие, и почему их так много? Все просто. Теги таблиц - это теги контейнерного типа, и потому у них есть парный им вариант с именем, предваренным слэшем. Тег <table></table>, указывает браузеру, что надо будет отобразить таблицу. Тег <tr></tr> создает строку таблицы, а тег <td></td> создает столбец или ячейку таблицы. Любая таблица всегда состоит хотя бы из одной строки и одной ячейки. Вспомните Word или другой редактор текста. Там вы просто создаете таблицу рисуя ее или вставляя в документ с помощью шаблона. В простейшем виде вы можете создать таблицу из одной строки, которая в свою очередь будет являться столбцом или ячейкой. Для примера нарисуем такую простую таблицу:


<?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>
   <tr>
      <td>Ваш текст внутри ячейки</td>
   </tr>
</table>
</body>
</html>

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


Если теперь этот код сохранить в файле с расширением .htm или .html, а потом этот файл открыть в браузере, то мы увидим примерно следующее:


Ваш текст внутри ячейки

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


<?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>
   <tr>
      <td>Ячейка-1 (Столбец-1) в Строке-1</td>
      <td>Ячейка-2 (Столбец-2) в Строке-1</td>
      <td>Ячейка-3 (Столбец-3) в Строке-1</td>
   </tr>
   <tr>
      <td>Ячейка-1 (Столбец-1) в Строке-2</td>
      <td>Ячейка-2 (Столбец-2) в Строке-2</td>
      <td>Ячейка-3 (Столбец-3) в Строке-2</td>
   </tr>
</table>
</body>
</html>

Снова сохраним наш код в файле с расширением .htm или .html, а потом этот файл откроем в браузере и вот таким будет результат:


Ячейка-1 (Столбец-1) в Строке-1 Ячейка-2 (Столбец-2) в Строке-1 Ячейка-3 (Столбец-3) в Строке-1
Ячейка-1 (Столбец-1) в Строке-2 Ячейка-2 (Столбец-2) в Строке-2 Ячейка-3 (Столбец-3) в Строке-2

Теперь вы знаете как создавать таблицы. Такую таблицу вы легко можете использовать для создания именно таблиц. Но для формирования дизайна страницы этой простоты может быть недостаточно. Вам может понадобится сформировать внутри одной таблицы несколько других, например. Это легко сделать, так как число вложенных таблиц может быть сколь угодно большой. Главное, чтобы вы сами не запутались и не перегрузили излишним кодом страницу. Заметьте, допускается именно вложенность, пересечение тегов не допустимо, а также, при множестве вложенных таблиц не забывайте закрывать теги, иначе внешний вид таблиц может быть непредсказуемым. Вложенность конечно хорошо, но и этого мало для дизайна. И вот тогда на сцену выходят различные атрибуты тегов <table></table>, <tr></tr>, <td></td>.


Атрибут «width»

Данный атрибут применяется в тегах <table> и <td>, но не в теге <tr>. В теге <table> он показывает браузеру какой должна быть общая ширина таблицы, а в теге <td> - какой должна быть ширина данного конкретного столбца (ячейки), и имеет смысл только в том случае, когда в таблице несколько столбцов, если же в таблице всего один столбец, то использовать этот атрибут внутри тега <td> будет излишним. Ширина выражается в единицах измерения. Это могут быть проценты (относительная ширина) или пикселы (точки) - абсолютная ширина. Выражение ширины в процентах дает возможность строить «резиновые» таблицы, которые будут практически независимы от разрешения экрана. При этом, в некоторых браузерах, относительная ширина в тегах столбцов может интерпретироваться по разному и не всегда таблица будет отображаться так, как вам бы этого хотел ось. На мой взгляд, лучше всех с таблицами работают браузеры IE и Mozilla, в браузере Opera наблюдается несколько неправильное отображение правого крайнего столбца, а точнее его ширины. При использовании абсолютных единиц измерения страница, при различных разрешениях экрана, будет отображаться по разному, например, если страница версталась опираясь на разрешение 800х600 точек, то при разрешении, например, 1024х768 справа и слева будут оставаться большие пустые поля, а при разрешении 640х480 появится горизонтальная полоса прокрутки, так как страница не будет умещаться на экране полностью. Эти единицы измерения можно и комбинировать, то есть, например, ширину одного столбца указать в процентах, а ширину другого в пикселах. Вот как мог бы выглядеть наш предыдущий код:.


<?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%">
   <tr>
      <td width="20%">Ячейка-1 (Столбец-1) в Строке-1</td>
      <td width="50%">Ячейка-2 (Столбец-2) в Строке-1</td>
      <td width="30%">Ячейка-3 (Столбец-3) в Строке-1</td>
   </tr>
   <tr>
      <td width="20%">Ячейка-1 (Столбец-1) в Строке-2</td>
      <td width="50%">Ячейка-2 (Столбец-2) в Строке-2</td>
      <td width="30%">Ячейка-3 (Столбец-3) в Строке-2</td>
   </tr>
</table>
</body>
</html>

И вот как эта таблица будет выглядеть в браузере IE:


Ячейка-1 (Столбец-1) в Строке-1 Ячейка-2 (Столбец-2) в Строке-1 Ячейка-3 (Столбец-3) в Строке-1
Ячейка-1 (Столбец-1) в Строке-2 Ячейка-2 (Столбец-2) в Строке-2 Ячейка-3 (Столбец-3) в Строке-2

Примечание: Все значения атрибутов должны указываться в кавычках, либо в апострофах. Это касается не только данного атрибута и не только в данных тегах, но и во всех остальных атрибутах любых тегов. И еще, во второй строке в столбцах ширину можно было бы уже и не указывать, ячейки, если не задано специальным атрибутом, всегда создаются связанными, то есть, указав ширину ячейки в первой строке, мы автоматически задаем ширину всего столбца. И обратите внимание на то, что ширина внутри тега </table> задает общую ширину таблицы относительно страницы, но общая сумарная ширина всех столбцов таблицы будет 100 процентов, так как она задается по отношению самой таблицы, если же суммарную ширину всех столбцов задать менее 100 процентов, то один из столбцов (обычно крайний справа) либо будет расширен на недостающую величину, либо таблица может принять искаженный вид.


Атрибут «align»

Об этом атрибуте много говорить не буду. Он применяется и в теге <table>, и в теге <tr>, и в теге <td>. Внутри тега <table> он служит для выравнивания самой таблицы относительно страницы. Внутри тега <tr> задает выравнивание текста внутри всей строки, а внутри тега <td> - выравнивание только в данной конкретной ячейке, причем, распространяется это именно на ячейку, а не на весь столбец. Атрибут «align» внутри тега <table> может принимать следующие три значения - «left» - выравнивание по левому краю страницы, «center» - выравнивание по центру страницы и «right» - выравнивание по правому краю страницы. Внутри тегов <tr> и <td> атрибут «align» может принимать пять значений: «left» - выр авнивание по левому краю ячейки, «center» - выравнивание по центру ячейки, «right» - выравнивание по правому краю ячейки, «justify» - выравнивание по всей ширине ячейки и «char» - по идее, должно выравнивать посимвольно по всей ширине ячейки с одинаковым интервалом между символами (вероятно применяется достаточно редко, во всяком случае я не встречал). Последние два значения поддерживаются не всеми браузерами, например IE не поддерживает ни char, ни justify в атрибутах align таблиц. Внесем изменения в код наших примеров и посмотрим, что из этого выйдет:


<?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">
   <tr>
      <td align="left">Ячейка-1 (Столбец-1) в Строке-1</td>
      <td align="center">Ячейка-2 (Столбец-2) в Строке-1</td>
      <td align="right">Ячейка-3 (Столбец-3) в Строке-1</td>
   </tr>
   <tr>
      <td align="right">Ячейка-1 (Столбец-1) в Строке-2</td>
      <td align="center">Ячейка-2 (Столбец-2) в Строке-2</td>
      <td align="left">Ячейка-3 (Столбец-3) в Строке-2</td>
   </tr>
</table>
</body>
</html>

И вот как эта таблица будет выглядеть в браузере IE:


Ячейка-1 (Столбец-1) в Строке-1 Ячейка-2 (Столбец-2) в Строке-1 Ячейка-3 (Столбец-3) в Строке-1
Ячейка-1 (Столбец-1) в Строке-2 Ячейка-2 (Столбец-2) в Строке-2 Ячейка-3 (Столбец-3) в Строке-2

Примечание: Обратите внимание на выравнивание и на то, какую ширину получили столбцы, когда мы убрали атрибут width. Столбцы автоматически стали одинаковой ширины.


Атрибут «border»

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


Атрибут «cellpadding»

Задает размеры отступов границ таблицы. То есть, если нам надо, чтобы наш текст внутри ячеек таблицы отображался на расстоянии 5 пикселей от границ, то значение этого атрибута и должно быть равно пяти. Данный атрибут, также как и предыдущий, используется исключительно внутри тега <table>.


Атрибут «cellspacing»

Данный атрибут также применяется только внутри тега <table>. Он задает расстояние между ячейками таблицы. А интересен он тем, что если мы зададим атрибуту border значение 0, а атрибуту cellspacing - значение 1, то получим толщину границы таблицы как раз ровно в один пиксель, то есть именно таким образом мы, не используя стилей, можем получить толщину границы таблицы ровно такой, какой зададим.


Вот пример таблицы с невидимыми границами без промежутков между ячейками и с отступом от границ в 5 пикселей:


<?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="0" cellpadding="5">
   <tr>
      <td align="left">Ячейка-1 (Столбец-1) в Строке-1</td>
      <td align="center">Ячейка-2 (Столбец-2) в Строке-1</td>
      <td align="right">Ячейка-3 (Столбец-3) в Строке-1</td>
   </tr>
   <tr>
      <td align="right">Ячейка-1 (Столбец-1) в Строке-2</td>
      <td align="center">Ячейка-2 (Столбец-2) в Строке-2</td>
      <td align="left">Ячейка-3 (Столбец-3) в Строке-2</td>
   </tr>
</table>
</body>
</html>

В браузере IE мы увидим следующее:


Ячейка-1 (Столбец-1) в Строке-1 Ячейка-2 (Столбец-2) в Строке-1 Ячейка-3 (Столбец-3) в Строке-1
Ячейка-1 (Столбец-1) в Строке-2 Ячейка-2 (Столбец-2) в Строке-2 Ячейка-3 (Столбец-3) в Строке-2

А вот пример таблицы с границей толщиной в 1 пиксель и с отступом от границ в 5 пикселей:


<?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 align="left">Ячейка-1 (Столбец-1) в Строке-1</td>
      <td align="center">Ячейка-2 (Столбец-2) в Строке-1</td>
      <td align="right">Ячейка-3 (Столбец-3) в Строке-1</td>
   </tr>
   <tr>
      <td align="right">Ячейка-1 (Столбец-1) в Строке-2</td>
      <td align="center">Ячейка-2 (Столбец-2) в Строке-2</td>
      <td align="left">Ячейка-3 (Столбец-3) в Строке-2</td>
   </tr>
</table>
</body>
</html>

Браузер IE нам покажет такую табличку:


Ячейка-1 (Столбец-1) в Строке-1 Ячейка-2 (Столбец-2) в Строке-1 Ячейка-3 (Столбец-3) в Строке-1
Ячейка-1 (Столбец-1) в Строке-2 Ячейка-2 (Столбец-2) в Строке-2 Ячейка-3 (Столбец-3) в Строке-2

Примечание: В некоторых почтовых программах, а также в рассылке полученной с сервиса мэйллист.ру внешний вид примеров может несколько отличаться, поэтому приношу заранее за это свои извинения. Достаточно трудно оптимизировать код рассылки под три разных рассыльных сервиса и под разные почтовые программы. Поэтому рекомендую копировать примеры в любой редактор текста (можно просто блокнот), за исключением Word, Write и им подобных (подойдет только текстовый редактор), сохраните в каком-либо файле с расширением .htm или .html и откройте полученный файл в своем любимом браузере. Только так вы сможете увидеть более точные результаты. А лучше всего попробуйте открывать эти файлы примеров в браузерах на различных движках (IE, Mozilla, Opera), так вы сможете сами увидеть различия в отображении тех или иных вариантов и уже будете знать что и как учитывать. В web-дизайне считается дурным тоном, когда какая-либо страница или какой-либо сайт отлично отображается в одном бразуере и отвратительно отображается в другом (то есть код адаптирован под один конкретный браузер). Приучайте себя всегда проверять полученный дизайн на различных браузерных движках (их всего три на сегодняшний момент). Я думаю, вам не составит труда пользоваться в блужданиях по Интернету своим любимым браузером, а создавая дизайн, проверять его на других, пусть даже не любимых вами. Иначе, вы просто лишите многих потенциальных посетителей возможности нормально лицезреть ваш проект, а возможно и потеряете на этом потенциальных клиентов. Так что приучайтесь заранее.


Вот и все на сегодня. В следующем уроке по основам 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
 
В избранное