Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17542 / 1636 | Оценка: 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 >
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

При дальнейшем просмотре результатов доступны только функции просмотра треков по выбранному альбому и предварительного прослушивания трека. 

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Валентина Зубарева
Валентина Зубарева
Россия, Рязань, РГРТУ, 2011
Роман Васильев
Роман Васильев
Россия