Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 19801 / 2044 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Лекция 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 >
Галина Башкирова
Галина Башкирова

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

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

 

Константин Моренко
Константин Моренко
Таня Михайлова
Таня Михайлова
Россия
Игорь Хан
Игорь Хан
Узбекистан, Ташкент, Ташкентский педагогический институт иностранных языков, 1990