Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Лекция 6:

Работа с таблицами и средства навигации

< Лекция 5 || Лекция 6: 12 || Лекция 7 >
Аннотация: Создание html-таблиц. Создание гиперссылок. Графические гиперссылки.

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

Работа с таблицами

В html работа с таблицами может оказаться как простой, так и не очень. С одной стороны тег всего один – <table>, и составить простую таблицу, к примеру, 2*2, не составит труда. С другой стороны, как только потребуется что-то не совсем стандартное, с объединением ячеек, размещением изображений в ячейках и т.п., могут возникнуть сложности.

Создание простых таблиц

Тег <table> является парным, таблица состоит из строк и ячеек, соответственно задаваемых парными тегами <tr> и <td>.

Атрибуты <table>:

  • align – задает тип выравнивания таблицы;
  • background – задает фоновый рисунок таблицы;
  • border – задает толщину рамки таблицы (в пикселях);
  • bordercolor –задает цвет рамки;
  • cellpadding – задает величину отступа от рамки до содержимого ячейки;
  • cellspacing – задает величину расстояния между ячейками;
  • cols – задает число колонок в таблице;
  • frame – задает отображение границ вокруг таблицы, может принимать значения:
    • void – не отображать границы;
    • border – отображать границу вокруг таблицы;
    • above – провести границу только по верхнему краю таблицы;
    • below – провести границу только по нижнему краю таблицы;
    • hsides – отрисовать только горизонтальные границы;
    • vsides – отрисовать только вертикальные границы;
    • rhs – провести границу только по правой стороне таблицы;
    • lhs – провести границу только по левой стороне таблицы;
  • height – задает высоту таблицы;
  • rules – задает отображение границ между ячейками, может принимать значения:
    • all – отображать границы вокруг каждой ячейки таблицы;
    • groups – отображать границы между группами, задаваемыми тегами <thead>, <tfoot>, <tbody>, <colgroup>, <col>;
    • cols - отображать границы между колонками;
    • none – скрыть все границы;
    • rows – отображать границы между строками таблицы;
  • summary – задает краткое описание таблицы;
  • width – задает ширину таблицы.

Пример создания таблицы 2*2:

<table border = 1> 
        <tr> 
            <td> Строка 1. Ячейка 1.</td>
            <td> Строка 1. Ячейка 2.</td>
        </tr>
        <tr>
            <td> Строка 2. Ячейка 1.</td>
            <td> Строка 2. Ячейка 2.</td>
        </tr>
      </table>

Результат:

 Простейшая html-таблица

Рис. 5.1. Простейшая html-таблица

Внутри тега <table> , помимо <tr> и <td> допускается использование тегов:

  • <caption> – задает заголовок таблицы;
  • <col> – задает характеристики одной, или нескольких колонок таблицы;
  • <colgroup> – задает стиль для группы колонок таблиц;
  • <tbody> – хранит одну, или несколько строк таблицы, допустимо применение только одного такого тега в рамках <table>;
  • <tfoot> – хранит одну, или несколько строк, отображаемых внизу таблицы;
  • <th> – задание ячейки таблицы, которая является заголовочной, т.е. текст ячейки отображает полужирным шрифтом с выравниванием по центру;
  • <thead> –хранит одну, или несколько строк, отображаемых вверху таблицы;

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

<table border = 1 cellspacing = 2> 
  <caption> <b> <i>План лекций курса "HTML5. Основы клиентской разработки" </i></b></caption>
  <thead>
   <tr> 
   <th> № </th>
   <th> Наименование лекции </th>
   <th> Содержание лекции</th>
   </tr>
  </thead>
  
  <tbody>
   <tr>
   <td align = center> 1 </td>
   <td> Web 2.0, как методика проектирования систем </td>
   <td> Возникновение термина "Web 2.0", 
     основы концепции, особенности проектирования современных веб-решений. </td>
  </tr>
  
  <tr>
   <td align = center> 2 </td>
   <td> Основы HTML. Особенности HTML5. </td>
   <td> Сущность гипертекста, развитие стандартов HTML, уровни и версии HTML. 
     Обзор HTML5, инструменты Microsoft, поддерживающие работу с HTML5. </td>
  </tr>
  
  <tr>
   <td align = center> 3 </td>
   <td> HTML5. Работа с текстом. </td>
   <td> Описание и характеристики основных тегов для разметки и оформления текста.
     Заголовки, списки, абзацы, фрагментирование, разрыв строк, вставка символов. 
      Глобальные атрибуты.</td>
  </tr>
   
   <tr>
   <td> ... </td>
   <td> .................. </td>
   <td> ...................</td>
   </tr>  
  </tbody>  
  <tfoot>
   <tr>
    <th>Всего лекций</th>
    <th>Объем лекций (часов)</th>
    <th>Объем практикумов (часов)</th>
   </tr>
   <tr align = center>
    <td>18</td>
    <td>40 часов</td>
    <td>24</td>
   </tr>
   </tfoot>
  </table>

Результат:

 Пример html-таблицы

Рис. 5.2. Пример html-таблицы
< Лекция 5 || Лекция 6: 12 || Лекция 7 >
Сергей Крупко
Сергей Крупко

Добрый день.

Я сейчас прохожу курс  повышения квалификации  - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?

 

Галина Башкирова
Галина Башкирова

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

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Алексей Бегунов
Алексей Бегунов
Беларусь
Виктор Лабутин
Виктор Лабутин
Россия