Вам нужен сайт?
Купить готовый сайт на bravesite.ru
Это не реклама. Стас.
   Здравствуйте. Все ниже описанное не является рекламой (сам пользовался и пользуюсь), просто хочу поделиться хорошей информацией для тех, кто собирается делать сайт или уже сделал его и перед ним стал выбор качественного и дешевого хостинга!
Hosting Ukraine
Дешевый хостинг


Рекомендуется к ознакомлению перед покупкой сайта!

Купить сайт по безопасной сделке только QIWI Кошелек

Заработай на своем сайте!!!
купить сайт дешево
Контакт Инфо
an image
Есть вопросы? Что-то не получается?
Свяжитесь со мной
Email: stas.busko@mail.ru

Добро пожаловать на сайт!

     Как я Вам и обещал, в этом разделе мы научимся создавать таблицы, аж двумя способами.
      Не забываем об объяснениях к картинкам, маркерам: красный маркер сокращенно (К.М.), синий маркер - (С.М.), зеленый маркер - (З.М.) и т. д.
     В содержании находится краткое описание всего, что мы рассмотрим в данном разделе.

Содержание:

1.Tables. Теги для создания таблицы.

2.Valign. Cellpadding. Cellspacing. Их применение.

3.Объединение ячеек таблицы. Colspan и Rowspan.

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

Tables. Теги для создания таблицы:

     В macromedia создана специальная вкладка (Tables К.М.) для создании таблиц:

      Нажимая на нее мы увидим все команды (теги)С.М. которые мы будем использовать при создании таблиц. Здесь же, у нас, обозначено два способа, какими мы можем воспользоваться К.М.-1,2.
     Для того, чтобы Вам было более удобно во всем разобраться, поначалу, мы используем способ номер два.
      Кликаем по данной команде К.М.-2.(курсор должен находиться между откр. и закр. тегом body). В открывшемся окне:

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

     Где открывающий тег table К.М.- О и тот же, закрывающий К.М.- З, информирует нас о том, что мы создаем таблицу (ее границы). Внутри О и З К.М. тега table, находится тег tr О(откр.) и З(закр.) C.М., который отвечает за горизонтальное размещение ячеек и их количество. Далее (можно догадаться) оставшийся тег td О и З З.М., отвечает за создание самой ячейки. В которой будет находится наш произвольный текст: Первая Ч.М..
     Открыв просмотр в браузере (в самой программе, или в Вашем) мы увидим только наш текст: Первая. Почему? Мы ведь только-что создали самую простейшую таблицу. Ответ: Таблица есть, только мы ее не видим (не задан ни один из параметров: ширина, высота, фон и т.д.).
      Давайте пропишем (чтоб увидеть) параметры для нашей таблицы в откр. теге table К.М.- О. Размещаем наш курсор в теге table К.М.:

и нажимаем пробел. В выпадающем окне выбираем (стрелками на клавиатуре, или ползунком) команду:
height
height (высота) и ставим значение (между кавычек) например: 500, разместив курсор после кавычек, обратно нажимаем пробел, выбрав:
width
width (ширина), ставим тоже значение: 500. Далее, тем-же способом, выбираем размещение:
align
данной ячейки (центр, слева, справа,). Для примера поставим:
center
Так же, здесь устанавливаем толщину, ширину бортика:
border
например:10 и его цвет:
bordercolor
например:
Green
С помощью:
bgcolor
(фон)зададим цвет:
Silver

      Так-же, в каждой таблице (отдельной ячейке), можно использовать любую картинку как фон (Как? Рассматривали выше.). Задав параметры нашей таблицы, просматриваем результат в рабочей области:

Где мы увидим созданные нами, наши параметры, которые можно изменить (между кавычек) на Ваш вкус.
      В браузере, мы должны, уже увидеть нашу таблицу:

      Глядя на таблицу в браузере мы видим, что наша ячейка:Первая заняла все свободное пространство, в пределах самой таблицы (500 на 500). Если мы в теге table удалим высоту (500) и ширину (500) и установим эти параметры в тег нашей ячейки td (откр.), мы увидим, что наша таблица не изменилась. Ячейка: Первая растянула нашу таблицу (как-бы изнутри).
     Следует запомнить следующее: Если у Вас есть фиксированная ширина таблицы в теге table (например:500), то все ячейки, находящиеся в данной таблице, в горизонтальном ряде (тег tr) не должны превышать ширину таблицы (500). Например ширина трех ячеек может быть любой (150+200+150=500). Если у Вас задана ширина одной ячейки(150), то освободившееся место (ширину), две оставшиеся ячейки займут на двоих (пополам: 175+175). Если у Вас будет одна ячейка, с заданой шириной (например:200 или 1200), она (ячейка),все равно займет всю ширину (фиксированную) таблицы. Все выше изложенное, касается и высоты таблицы. Если у Вас, фиксированная высота и ширина таблицы, то любые ячейки (с большими параметрами) не смогут ее растянуть. Если фиксированной ширины и высоты в таблице нет, то ячейки разместятся в ней с любыми параметрами. Помните об этом, что-бы избежать путаницы.
      К содержанию.
купить сайт дешево

Valign. Cellpadding. Cellspacing. Их применение:

     Давайте, так-же, поговорим об размещении текста в таблице, вернее в ячейках таблицы. Ведь, сама таблица состоит из ячеек, и только в них можно писать содержимое (контент). К тексту, в ячейках таблицы, можно применять все выше изученные теги, для того-же текста (отдельных слов).
      Особое внимание, хочется уделить тегу (команде), которая отвечает за размещение текста: сверху - вниз, в данной ячейке. Для этого размещаем наш курсор в откр. теге ячейки td и нажимаем клавишу пробел. В открывшемся окне выбираем:
valign
в следующем:
top

      Смотрим результат в рабочей области:

      Где К.М., наша команда, отвечающая за размещение текста: сверху - вниз.
      В браузере, должно быть следующее:

Не забываем обновлять браузер К.М.. Как мы видим (в браузере), наш текст: Первая, разместился в самом верху (сверху-вниз), и между нашим текстом (Первая) и границей таблицы (ячейки) нету никакого пространства (расстояния). В открывающем теге таблицы table, с помощью курсора, можно задать команду:
Cellpadding
К.М. которая отвечает за расстояние (пространство) между всем текстом и границей (бортиками)ячейки, зададим этой команде значение:50. Нажимая пробел, выбираем следующую команду:
Cellspacing
С.М. которая задает пространство между всеми ячейками и границей (бортиками) данной таблицы, зададим этой команде значение:30 Смотрим на наши команды в рабочей обл.:

     А в браузере, у нас, должно отразится следующее:

      Где, К.М.: результат команды Cellpading, а С.М.: результат команды Cellspacing.
     Вернемся к нашей вкладке Tables С.М.:

      Где мы сможем (вручную) добавить в нашу таблицу определенное количество ячеек td К.М.-3, или целый горизонтальный ряд tr К.М.-2 с определенным количеством ячеек (td К.М.-3) в нем. Включая К.М.-1, можно создать целую таблицу (добавив в нее нужные ряды и ячейки).
      Так-же, здесь, все это можно сделать с помощью З.М.. Это расширенный режим (сразу прописывается: высота, ширина, местоположение таблицы, или ячейки).
      Давайте, в нашу таблицу добавим еще одну ячейку (td) с текстом: Вторая. Для этого, за закрывающим тегом td (ячейка: Первая) размещаем наш курсор и нажимаем Enter. Размещаем курсор в освободившееся место, и нажимаем td К.М.-3. Между откр. и закр. тегом td, вносим наш текст: Вторая.
     Для того, что-бы ячейки были одинаковые, заберем (скопировав) ширину и высоту из ячейки: Первая, и зададим (вставив) нашей таблице (внутри откр. тега table). Ячейке с текстом: Вторая, зададим параметры для размещения текста в ней (valign).
      Смотрим на наши изменения К.М. в рабочей области:

     В браузере должно быть следующее:

      А теперь, в нашу таблицу добавим еще один ряд с теми-же ячейками, просто изменим их содержание (текст):Первая на Третья, а Вторая на Четвертая.
      Для этого, размещаем наш курсор за закрывающим тегом tr и нажимаем Enter. После того, как наш курсор оказался в освободившемся месте, нажимаем мышкой на tr К.М.-2 (вкладка Tables). Используя клавишу Enter, зададим нашему тегу (откр. и закр. тег tr) удобное для нас расположение. Далее копируем К.М. (выделив их, синий фон) ячейки: Первая и Вторая, и размещаем между откр. и закр. тегом tr С.М., изменив при этом их текст З.М., как описано выше:

      Смотрим в браузер:

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

Объединение ячеек таблицы. Colspan и Rowspan:

      Далее разберемся, с помощью каких команд (внутри тега td) можно объединить (горизонтально и вертикально)те, или иные ячейки.
      Для этого, размещаем наш курсор внутри тега td (ячейка: Первая) и нажимаем клавишу пробел. В выпавшем окне выбираем команду:
colspan
colspan (горизонтальное объединение ячеек) и задаем ему значение:2 (так как в нашем случае есть только две ячейки, которые мы и объединим). Смотрим в рабочую область, на расположение нашей команды К.М.:

      В браузере, мы должны увидеть следующее:

      Где К.М. обозначен результат команды colspan=2 и так-же мы здесь видим еще одну ячейку: Вторая. Откуда? Ведь мы их объединили. Все верно, но в рабочей области (С.М.) у нас осталась ячейка с текстом: Вторая, это она и отображается.
      При объединении ячеек следует не забывать об этом, и удалять не нужную ячейку (рабочая обл. С.М.) после объединения.
      В данном случае, ячейку с текстом: Вторая, мы удаляем. Смотрим результат в браузере:

      Выше описанным способом (с помощью команды colspan), объединяем ячейки: Третья и Четвертая. Ячейку с текстом: Четвертая (рабочая область) удаляем.
      Если все сделано правильно, в браузере должно отображаться следующее:

     Как мы видим из браузера, у нас остались две ячейки: Первая и Третья. Давайте и их объединим используя вертикальный способ.
     Для этого размещаем курсор в откр. теге td (ячейка: Первая) и нажимаем пробел. В открывшемся окне выбираем команду:
rowspan
rowspan (вертикальное объединение ячеек К.М.) и задаем ему значение:2 (так как у нас осталось две ячейки):

     Ячейку с текстом: Третья - удаляем. В браузере у нас должна остаться одна ячейка: Первая, объединив все остальные в себе с помощью команд - colspan и rowspan:

      Для закрепления навыков, попробуйте самостоятельно создать какую нибудь таблицу, на Ваш выбор (например: 4 на 4 ячейки), и использовать в этой таблице все, выше описанное.

P.S.: Вся ширина и высота, которую мы применяли в данном разделе, в пикселях (px). Ширину и высоту, можно задать и в процентах (%). В следующем разделе, мы рассмотрим этот вопрос.

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