Среда, 13.12.2017, 12:29
Приветствую Вас Гость | RSS

Информационный блог

Создаем таблицу

  До сих пор мы создавали документы, в которых текст располагался в одной колонке.  На практике иногда бывает необходимо расположить текст в двух или трех колонках. Помочь в  этом может таблица. Кроме того, таблица, состоящая из одной ячейки, может эффективно выделить фрагмент текста, на который вы хотите обратить внимание читателя. Очень удобно чередовать в ячейках таблицы рисунки и текст. Ну и конечно же, таблица нужна для отображения информации в табличном виде. Часто таблица используется для представления меню.
  Создадим в новом файле таблицу из одной колонки, в ячейках которой, как в меню, представим ссылки на имеющиеся и другие, еще не созданные страницы сайта. Ведь сайт может содержать десятки страниц. Поэтому очень важно иметь возможность быстро выбирать нужную страницу из меню. Это меню мы затем поместим у левого края экрана так, чтобы оно постоянно оставалось в поле зрения пользователя.
    Создайте новый текстовый файл, выбрав в меню программы Блокнот команду Файл/Создать (File/New)
    Введите основные тэги, создающие структуру документа. В заголовке документа укажите Меню. Цвет фона и текста документа самостоятельно выберите такими, чтобы ссылки были хорошо видны:
    <html>
    <head>
    <title>меню</title>
    </head>
    <body bgcolor=silver>
    </body>
    </html>
  Каждая таблица начинается тэгом <table> и заканчивается тэгом </table>. Строки таблицы образуются парой тэгов <tr></tr>, между которыми располагаются пары тэгов <td></td>. Каждая пара этих тэгов образует один столбец. Между открывающим <td> и закрывающим</td>  тэгами помещается текст или любое другое содержимое ячейки.
  Учитывая сказанное, код HTML, описывающий нашу таблицу, состоящую из одного столбца и содержащую пункты меню с названиями страниц сайта, должен иметь следующий вид:
     <table>
     <tr><td>Главная страница</td></tr>
     <tr><td>Чем мы занимаемся?</td></tr>
     <tr><td>О нашей компании</td></tr>
     <tr><td>Связь с компанией</td></tr>
     </table>
    Вставьте пустую строку между <body> u </body> тэгами и, начиная с нее, введите указательный код.
    Сохраните документ в папке Web под именем menu.html выбрав из меню программы Блокнот команду Файл/Сохранить (File/Save)
    Откройте в окне браузера файл menu.html.
  Как видите, созданная нами таблица располагается у левого края экрана. Это положение можно изменить, использовав в открывающем тэге <table> атрибут align=center для выравнивая таблицы по центру или атрибут aling=right - для выравнивания по правому краю окна браузера. Пункты  меню расположены один под другим, а края таблицы и ячеек не видны. Это связано с тем, что по умолчанию рамка и ячейки таблицы не показываются. Чтобы включить их отображение, следует использовать в тэге <table> атрибут border, указав в качестве его значения толщину рамки в пикселах.
    Добавьте в тэг <table> атрибут  border=1, чтобы показать рамку и ячейки таблицы толщиной 1 пиксель: <table border=1>
    Размер таблицы обычно устанавливается браузером автоматически так, чтобы отображалось все ее содержимое. Однако вы можете установить фиксированную ширину таблицы в пикселах с помощью атрибута widht.
    Установите для таблицы ширину 140 пикселов, добавив атрибут widht=140 в открывающий тэг <table> так, чтобы он принял вид: <table border=1 widht=140>
  В окне браузера ширина таблицы уменьшится так, что в большинстве ячеек текст будет отображаться в двух строках.
  При использовании для форматирования столбцов таблицы тэгов <td></td>  данные в ячейках представляются шрифтом нормального текста и по умолчанию выравниваются по левому краю ячеек. Если же требуется выделить данные в ячейках, например,заголовки столбцов или строк таблицы, то вместо тэгов <td></td> удобно использовать тэги <th></th>.Текст в элементах <th></th> обычно выделяется полужирным начертанием и выравнивается по центру ячеек.
  Наше меню будет выглядеть лучше, если его пункты будут центрированы в ячейках и выделены полужирным шрифтом. Поэтому заменим в HTML-коде элементы <td></td> элементами <th></th>.
    Отредактируйте файл menu.html заменив тэги <td></td> соответственно тэгами <th></th>.
  В тэгах <td> u <th>вы можете использовать следующие атрибуты:
          align - для горизонтального выравнивания содержимого ячеек по центру (center), по левому (left) и по правому (right) краям ячейки;
          width - для указания ширины ячейки в пикселах;
          height - для определения высоты ячейки;
          valign - для вертикального выравнивания данных в ячейке по верхнему (top) и нижнему (bottom) краям и середине (middle) ячейки; по умолчанию valign=middle.
    Проверьте, как работают эти атрибуты, после чего верните таблицу в прежнее состояние.
  Вы можете также изменить цвет любой ячейки, столбца, строки или всей таблицы, вставив атрибут  bgcolor соответственно в тэг <th>, <tr>, <table>.
    Поэкспериментируйте с цветами и подберите подходящие, с вашей точки зрения, цвета для таблицы.
  Нам осталось теперь создать ссылки двух первых пунктов меню на соответствующие страницы сайта. Так как остальные страницы еще не созданы, то ограничимся этими двумя ссылками. Как и прежде, воспользуемся тэгами <а></а> с атрибутом href. В качестве значения этого атрибута для первого пункта меню - Главная страница - следует указать файл geoton.html, т.е. href=  "geoton.html", а для второго - Чем мы занимаемся? - файл spisok.html т.е. href=  "spisok.html".
   В следующем опыте мы разделим экран по вертикали на два окна так, чтобы у левого края экрана постоянно отображалась таблица с меню, а справа от нее - страницы нашего сайта, которые пользователь сможет выбирать из меню. Обычно при переходе по ссылке новый документ отображается в том же окне, что и исходный, в котором была ссылка. Чтобы отобразить его в другом окне, необходимо в открывающем тэге  <а> использовать атрибут target, параметром которого должно быть имя того окна, в которое будет загружен документ. В следующем опыте мы подробнее поговорим об этом и присвоим соответствующему окну имя "frame", а сейчас укажем это имя как значение атрибута target в ссылке : target="frame". Еще раз подчеркнем, что в этом опыте Web-страница будет загружаться в то же окно браузера, в котором находится ссылка, а атрибут target позволит загружать документ в другое окно, которое мы создадим в следующем опыте.
    Отредактируйте в файле menu.html строки кода, содержащие названия пунктов меню Главная страница и Чем мы занимаемся?, вставив вышеуказанные ссылки соответственно на файлы geoton.html и spisok.html так, чтобы эти строки приняли следующий вид:
        <tr><th><a  href="geoton.html" target="frame"> Главная страница </а></th></tr>
        <tr><th><a  href="spisok.html" target="frame">Чем мы занимаемся? </а></th></tr>
    Щелкните мышью на первой ссылке -  Главная страница. В окно браузера будет загружен файл geoton.html.
    Нажмите кнопку Назад  (Back) на панели инструментов браузера. На экране снова отобразится файл menu.html.
    Щелкните мышью на второй ссылке - Чем мы занимаемся? В окне браузера появится файл spisok.html.
  Итак мы создали меню и убедились, что ссылки в нем работают. 
Меню сайта
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Поиск
Календарь
«  Декабрь 2017  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Архив записей
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Все о сетевом бизнесе
  • Copyright MyCorp © 2017