Тема: Таблицы.
Цели урока:
- дать представление о создании таблиц на веб странице;
- развития у учащихся интереса к созданию Веб- сайтов
- воспитание у учащихся внимательности, аккуратности, дисциплинированности, усидчивости.
- развитие познавательных интересов, навыков работы в сети Интернет и на компьютере.
Ход урока:
I. Орг. момент.
Приветствие, проверка присутствующих. Объяснение хода урока.
II.
Теоретическая
часть.
1. Мотивация.
Рассказ учителя
Таблицы
Таблицы позволяют располагать данные не только по
строкам, но и по столбцам. У вас появляется гибкость двухмерной структуры для
вывода информации на веб-страницу.
Важно использовать таблицы так, чтобы они не
занимали попусту место на веб-странице. Благодаря наличию строк и столбцов
таблицы удобно для сравнения и противопоставления информации. Каждые строку и
столбец можно озаглавить, чтобы информация выглядела подобно электронной
таблице.
Хорошая таблица делает веб-страницу информативной, аккуратной и
организованной, а неудачная разбивает ее и запутывает то, что вы хотели
сообщить. Давайте взглянем на удачную таблицу.
|
Имя |
Команда |
Победы/поражения |
Очки |
Ауты |
|
Пит Шурек |
Цинциннати |
16-2 |
2,73 |
194 |
|
Гидео Немо |
Лос-Анджелес |
19-8 |
2,94 |
399 |
|
Грег Энгриус |
Атланта |
24-6 |
2,21 |
275 |
2.
Изучение новой темы. Как построить таблицу.
Задание таблицы может показаться сложным, поскольку для этого
применяется целый ряд тегов. Теги <table> и </table> обрамляют
таблицу целиком, а ряд других тегов определяет, каким образом будет выводиться
информация. В следующей таблице я приведу полное описание всех тегов таблиц.
|
Теги |
Описание |
|
<table> и </table> |
Эти теги охватывают таблицу. Тег <table> сообщает
браузеру, что далее следует описание таблицы. Если вы хотите, чтобы была
видна сетка, разделяющая строки и столбцы, добавьте ключевое слово BORDER
(получится <table border>), но подробней об этом позже. |
|
<caption> и </caption> |
Текст, отмеченный этими тегами, выводится в виде заголовка. Для
задания заголовка можно также применять теги <tc> и </tc>. |
|
<th> и </th> |
Теги отображают текст заголовка или строки столбца немного более
крупным полужирным шрифтом. |
|
<tr> и </tr> |
Теги, определяющие каждую строку таблицы. Тег </tr>
необязателен, но делает html-код более красивым и понятным. |
|
<td> и </td> |
Эта пара тегов определяет текст каждой ячейки таблицы. |
При использовании этих тегов следует быть очень аккуратным, иначе
создание таблицы, состоящей из нескольких строк, может оказаться сложным делом.
Чтобы создать даже такую простую таблицу, как была приведена в качестве примера
чуть выше (по бейсбол), понадобится довольно много строк html-кода. Теперь я
покажу, в качестве примера правильной таблицы, код той самой таблицы:
|
<table border="1"> <td align="center"><b>Имя</b></td> <td align="center"><b>Команда</b></td> <td align="center"><b>Победы/поражения</b></td> <td align="center"><b>Очки</b></td> <td align="center"><b>Ауты</b></td> <td>Пит Шурек</td> <td>Цинциннати</td> <td>16-2</td> <td>2,73</td> <td>194</td> <td>Гидео Немо</td> <td>Лос-Анджелес</td> <td>19-8</td> <td>2,94</td> <td>399</td> <td>Грег Энгриус</td> <td>Атланта</td> <td>24-6</td> <td>2,21</td> <td>275</td> |
Уф! И это все для маленькой таблички! На самом
деле, если вы терпеливо и аккуратно вводите теги, создаете таблицу,
оказывается, весь процесс не так уж и сложен. Теперь давайте все по порядку.
Первый шаг - ввод инициализационного тега таблицы:
|
<table> |
Чтобы ячейки таблицы были разделены тонкими линиями, добавим тег border.
Без этого слова ячейки будут автоматически выровнены, но сетки в таблице не
будет. Теперь начнем создавать ячейки, одну за другой. Сначала зададим строку:
|
<table border="1"> |
После этого зададим ячейки. Их у нас 5, соответственно 5 открытий
и закрытий тегов <td> и </td>
|
<table border="1"> <td>Имя</td> <td>Команда</td> <td>Победы/поражения</td> <td>Очки</td> <td>Ауты</td> |
В итоге мы получим это:
|
Не очень-то и смотрится без центрирования таблицы. Давайте
исправимся?
|
<table align="center"
border="1"> <td>Имя</td> <td>Команда</td> <td>Победы/поражения</td> <td>Очки</td> <td>Ауты</td> |
В итоге мы получим это:
|
Теперь таблица по-середине, но было-бы лучше если-бы были и другие
строки, а верхняя, в качестве озаглавляющей, была выделена тегами <th> и
</th> (чуть более жирнее):
|
<table align="center"
border="1"> <th>Имя</th> <th>Команда</th> <th>Победы/поражения</th> <th>Очки</th> <th>Ауты</th> <td>Пит Шурек</td> <td>Цинциннати</td> <td>16-2</td> <td>2,73</td> <td>194</td> |
В итоге мы получим это:
|
В принципе все, основные команды управления
таблицами вы уже знаете.
Расширенные возможности форматирования таблиц
Теперь, когда вы умеете создавать простую
красивую таблицу, попробуем ее слегка оживить. Современные браузеры предлагают
несколько впечатляющих способов настройки таблиц.
При использовании каждого из этих методов
подразумевается, что вы аккуратно сосчитали количество строк и столбцов. В
каждом из разделов вы увидите измененную версию простой нашей
"бейсбольной" таблицы.
Объединение нескольких строк в одну ячейку
Если вы будете часто применять таблицы, то непременно столкнетесь
с ситуацией, когда какая-либо ячейка должна занимать несколько строк таблицы.
Здесь вам пригодится ключевое слово ROWSPAN, которое добавляется в тег
<td> заданной ячейки. Чтобы ячейка занимала две строки вместо одной,
замените ваш код, например <td>текст вашей простой
ячейки</td> на <td rowspan=2>Вас расширеный
текст</td>. Теперь при отображении таблицы ячейка с ключевым
словом ROWSPAN займет две строки. Так можно изменить бейсбольную таблицу:
|
<table align="center"
border="1"> <th>Имя</th> <th>Команда</th> <th>Победы/поражения</th> <th>Очки</th> <th>Ауты</th> <td>Пит Шурек</td> <td rowspan=2>Цинциннати</td> <td>16-2</td> <td>2,73</td> <td>194</td> <td>Хосе Рио</td> <td>28-2</td> <td>1,92</td> <td>199</td> |
В итоге мы получим это:
|
Мы видим что 2 ячейки с параметром
"Команда" объеденились в одну.
Объединение нескольких столбцов в одну ячейку
Подобно тому, как ROWSPAN распространяет ячейку на несколько
строк, COLSPAN "раздвигает" ее на несколько столбцов. С помощью
ключевого слова COLSPAN вы можете распространить ячейку на любое количество
столбцов. Обратите внимание на следующий код:
|
<table align="center"
border="1"> <th colspan=2>Личная
информация</th> <th colspan=3>Статистика</th> <th>Имя</th> <th>Команда</th> <th>Победы/поражения</th> <th>Очки</th> <th>Ауты</th> <td>Пит Шурек</td> <td>Цинциннати</td> <td>16-2</td> <td>2,73</td> <td>194</td> <td>Гидео Немо</td> <td>Лос-Анджелес</td> <td>19-8</td> <td>2,94</td> <td>399</td> <td>Грег Энгриус</td> <td>Атланта</td> <td>24-6</td> <td>2,21</td> <td>275</td> |
В итоге мы получим это:
|
|||||||||||||||||||||||||
Я думаю здесь тоже без проблем...
Включение списка в таблицу
Таблицы можно комбинировать с другими элементами HTML. Так, они
могут содержать списки любого из описанных на прошлом занятии типов. Строго
следите за тем, чтобы всегда использовались закрывающие теги, иначе коды
списков трудно отслеживать. Давайте попробуем включить маркированный список в
нашу таблицу:
|
<table align="center"
border="1"> <th>Имя</th> <th>Команда</th> <th>Победы/поражения</th> <th>Очки</th> <th>Ауты</th> <td>Пит Шурек</td> <td>Цинциннати</td> <td>16-2</td> <td>2,73</td> <td>194</td> <td> <li>команда "All-Star
Team" <li>Награда MVP <li>Серебряная летучая мышь </td> <td>Гидео Немо</td> <td>Лос-Анджелес</td> <td>19-8</td> <td>2,94</td> <td>399</td> <td>Грег Энгриус</td> <td>Атланта</td> <td>24-6</td> <td>2,21</td> <td>275</td> |
В итоге мы получим это:
|
Итак, сегодня мы начали знакомиться с таблицами.
Мы изучили элементарные функции построения таблицы, изучили возможности
объединения нескольких строк в одну ячейку и нескольких столбцов в одну ячейку.
Выравнивание текста в таблице
Для каждой ячейки вы можете задать способ
выравнивания текста как по вертикали, так и по горизонтали. Способы
выравнивания задаются специальными ключевыми словами align и valign.
Вы можете задать также способ выравнивания для всей таблицы полностью или для
заданной строки. Но, как правило, это выполняется только для одной ячейки, хотя
и остальные способы имеют место применения.
Каждое
из ключевых слов align и valign имеет четыре возможных значения.
Они используются так же, как и описанные выше ключевые слова объединения в теге
<td>,. Сейчас я приведу вам таблицу, в которой даны эти значения:
|
Значение ключевого слова |
Описание |
|
ALIGN=LEFT |
Выравнивает текст в ячейке (таблице, строке) по левому краю
(идет по умолчанию) |
|
ALIGN=CENTER |
Выравнивает текст в ячейке (таблице, строке) по центру |
|
ALIGN=RIGHT |
Выравнивает текст в ячейке (таблице, строке) по правому краю |
|
ALIGN=JUSTIFY |
Растягивает текст в ячейке (таблице, строке) на всю строку
(проверено на MSIE 4.0+) |
|
VALIGN=TOP |
Растягивает текст в от самого верха ячейки (полезно, когда
информация в строке состоит из нескольких строк) |
|
VALIGN=MIDDLE |
Выравнивает текст в ячейке в ячейке вертикально по центру (идет
по умолчанию) |
|
VALIGN=BOTTOM |
Выравнивает текст в ячейке по нижнему краю |
Продолжая
работать с бейсбольной таблицей (та, в которой есть список), введем ключевое
слово VALIGN=TOP для всей строки, стодержащей список, чтобы текст не
"плава" в центре ячейки. Изменим тег этой строки таким образом:
|
<table align="center"
border="1"> <th>Имя</th> <th>Команда</th> <th>Победы/поражения</th> <th>Очки</th> <th>Ауты</th> <td>Пит Шурек</td> <td>Цинциннати</td> <td>16-2</td> <td>2,73</td> <td>194</td> <td> <li>команда "All-Star
Team" <li>Награда MVP <li>Серебряная летучая мышь </td> <td>Гидео Немо</td> <td>Лос-Анджелес</td> <td>19-8</td> <td>2,94</td> <td>399</td> <td>Грег Энгриус</td> <td>Атланта</td> <td>24-6</td> <td>2,21</td> <td>275</td> |
И
посмотрим что получилось:
|
Цвета в таблице
До недавнего времени не было возможности
управлять цветами в таблице на веб-страницах. Сетка таблицы была черной, фон
совпадал по цвету с фоном самой страницы. Было очень трудно выделить какую-то
ячейку другим цветом.
Теперь
существует ряд новых тегов, позволяющих задать цвета фона и сетки таблицы. В
первом случае ключевое слово bgcolor вставляется в тег <table>
следующим образом:
|
<table bgcolor="yellow"> |
Мы
изучали цвета на втором уроке. Кроме bgcolor, существуют
другие способы управления цветом:
|
Значение ключевого слова |
Описание |
|
BORDERCOLOR="..." |
Изменяет цвет сетки таблицы |
|
BORDERCOLORDARK="..." /
BORDERCOLORLIGHT="..." |
Используется для изменения цвета сетки с дополнительным эффектом
трехмерности. Если установлены эти аттрибуты, ваша таблица выглядет
трехмерной. |
|
Такого
вида таблицы мы добились лишь с помощью этих самых ключевых тегов:
|
<table align="center" bordercolordark=navy
bordercolorlight=blue border="1"> <th>Имя</th> <th>Команда</th> <th>Победы/поражения</th> <th>Очки</th> <th>Ауты</th> <td>Пит Шурек</td> <td>Цинциннати</td> <td>16-2</td> <td>2,73</td> <td>194</td> <td bgcolor="#bcdefa"> <li>команда "All-Star
Team" <li>награда MVP <li>Серебряная летучая мышь </td> <td>Гидео Немо</td> <td>Лос-Анджелес</td> <td>19-8</td> <td>2,94</td> <td>399</td> <td>Грег Энгриус</td> <td>Атланта</td> <td>24-6</td> <td>2,21</td> <td>275</td> |
Вместо таблицы используем список
Несмотря
на то что списки "одномерны", парой списков при надлежащем
использовании можно заменить практически любую таблицу. Например, вы можете
замеить бейсбольную таблицу несколькими списками. Конечно, эти списки не так
легко читать, как таблицу, и они заставляют пользователя перемещаться по
экрану. В общем случае списки менее компактны, чем таблицы. Кроме того,
информацию в списках труднее сравнивать. Посмотрите на список, заменяющий нам
бейсбольную таблицу:
|
Предварительное форматирование
При
использовании тегов <pre> и </pre> информация отображается
браузером точно в таком виде, в каком вы ее напечатаете, без всякой
интерпритации. Вы можете воспользоваться этими тегами для эмуляции таблицы.
Результат не так эффектен, как таблица, и здесь невозможно ввести сетку
таблицы, но большинство людей не заметит особой разницы. Предварительно
отформатировав текст с использованием возвратов каретки, пробелов и табуляций
так представит все ту же бейсбольную информацию:
<PRE><B>Имя Команда Победы/поражения Очки Ауты</B>Джон Хеппи Цинциннати 16-2 2.73 194Гидео Немо Лос-Анджелес 19-8 2.94 399Грег Энгриус Атланта 24-6 2.21 275</PRE> |
Что
получится:
Имя Команда Победы/поражения Очки Ауты Джон Хеппи Цинциннати 16-2 2.73 194Гидео Немо Лос-Анджелес 19-8 2.94 399Грег Энгриус Атланта 24-6 2.21 275 |
Итак, подводя итоги пройденного сегодня
материала, хочу сказать что мы изучили сегодня: способы выравнивания текста в
таблице, цвета в таблице, нашли способы замены таблиц списками и
предварительным форматированием.
3. Итог урока. Выставление оценок.
Мы сегодня научились строить таблицы
4. Домашнее задание.
В Блокноте создать аналогичную веб стр.