Лабораторная работа №7: Таблицы
Цель работы: Научиться создавать таблицы в HTML-странице.
Теория
Теория. Таблицы в HTML-страницах имеют более широкое применение, чем в обычных текстовых документах. Таблицы используют как для демонстрации данных, организованных в столбцы и ячейки, так и для разметки структуры web-страницы на функциональные блоки: панель управления, панель заголовка, верхний и нижний колонтитулы, основной раздел, иллюстрации и т. д.
Создание таблицы с помощью тегов языка HTML требует предварительного планирования, особенно если таблица используется для разметки документа. В коде HTML каждая строка и ячейка таблицы создаются индивидуально.
Внимание! До того как приступите к вводу кода таблицы, нарисуйте макет таблицы на листе бумаги. Подсчитайте количество столбцов и строк, число ячеек в каждой строке и их размеры. Определите ячейки, которые необходимо объединить. После этого набирайте код HTML.
Дескрипторы:
<table> - создает таблицу,
<tr> - создает строку таблицы,
<caption> - создает заголовок таблицы,
<td> и <th> - создают ячейку данных или ячейку заголовка таблицы. Оба тега имеют атрибуты:
· COLSPAN - объединение нескольких столбцов в одной ячейке,
· ROWSPAN - объединение нескольких строк в одной ячейке.
Пример создания таблицы[1]:
<!-- Начало таблицы --> <table>
<!-- Начало 1-й строки --> <tr>
<!-- Ячейка 1 (Строка 1, Столбец 1) --> <td>Строка 1, Столбец 1</td>
<!-- Ячейка 2 (Строка 1, Столбец 2) --> <td>Строка 1, Столбец 2</td>
<!-- Конец 1-й строки --> </tr>
<!-- Начало 2-й строки --> <tr>
<!-- Ячейка 3 (Строка 2, Столбец 1) --> <td>Строка 2, Столбец 1</td>
<!-- Ячейка 4 (Строка 2, Столбец 2) --> <td>Строка 2, Столбец 2</td>
<!-- Конец 2-й строки --> </tr>
<!-- Конец таблицы --> </table>
Отображение данной таблицы в окне браузера:
Пример использования атрибутов colspan и rowspan:
<table>
<tr>
<td colspan="2" align="center">Строка 1, Столбцы 1 и 2</td>
</tr>
<tr>
<td rowspan="2" align="center">Строки 2 и 3, Столбец 1</td>
<td >Строка 2, Столбец 2</td>
</tr>
<tr>
<td >Строка 3, Столбец 2</td>
</tr>
</table>
Отображение данной таблицы в окне браузера:
Порядок выполнения задания
1) Создайте HTML документ, включающий одну таблицу. Содержимое страницы должно соответствовать Вашему варианту. Для ввода тегов используйте начальную букву тега и клавиши[2] CTRL+пробел.
Образец выполненного задания приведен на рисунке 7.1. Для оформления внешнего вида таблицы использована CSS-технология (тег style).
2) Сохраните документ в папку lab под именем lab7_[номер_варианта].html. Например, для варианта 11 имя будет lab7_11.html. и проверьте с помощью браузера.
3) Вставьте в страницу вторую таблицу, придерживаясь схемы, указанной в Вашем варианте[3]
Образец страницы приведен на рисунке 7.2.
4) Проверьте свою страницу на валидность на сайте http://validator. w3.org/nu/. Сообщение о невалидном коде должно отсутствовать.
5) На проверку отправьте последний вариант файла. Для чего:
a. создайте архив[4] всей папки lab;
b. из архива удалите файлы, относящиеся к предыдущим работам, кроме файла favicon.png;
c. полученный архив отошлите на проверку.
Рис.Образец HTML страницы с одной таблицей
Варианты
Варианты | Тема | Схема второй таблицы |
1. | Новый Год |
|
2. | Домашние животные |
|
3. | Творчество Аллы Пугачевой |
|
4. | Школьные годы чудесные |
|
5. | Китай |
|
6. | Байкал |
|
7. | Москва |
|
8. | Интернет |
|
9. | Лето |
|
10. | Кибер-спорт |
|
Рис.Отображение в окне браузера страницы с двумя таблицами
Web-ресурсы
1. W3Schools Online Web Tutorials (http://www. /)
2. Самоучитель HTML5 (http://htmlbook. ru/samhtml5/)
[1] Для данного примера был выбран следующий CSS-стиль:
<style> table, td, th { border: 1px solid gray } </style>
[2] Если эта комбинация клавиш не выполняется, то сохраните документ, завершите работу редактора, затем снова возобновите его работу
[3] На сайте «Таблицы в примерах» (http://citforum. ru/internet/html/table_exmpl. shtml) имеются похожие примеры. Для заполнения этой таблицы разрешается вставлять вымышленные данные
[4] Рекомендуемые форматы архива: zip или rar
