1. Тема занятия: «Создание таблиц» Основы WEB- дизайна. Ф.И.О.: Крапивина Ольга Валентиновна Место работы: МОУ ДОД «Дворец детского (юношеского) творчества» Объединение «Информатика и информационные технологии»
2. Одним из наиболее мощных и широко применяемых в НТМL средств являются таблицы. В НТМL таблицы используются не только традиционно, как метод представления данных, но и как средство формирования Web-страниц.
3. Описание таблиц должно располагаться внутри раздела документа <BODY>. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE>. Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.
4. Как известно, таблица состоит из строк, поэтому должен существовать тэг, “говорящий” браузеру, что является строкой. Отсюда каждая строка начинается тэгом <TR> (Тable Row – строка таблицы) и завершается тэгом </TR>.
5. Отдельная ячейка в строке может быть описана следующим образом: с помощью тэгов <TD> и <TD> (Тable Data – данные таблицы) – таким образом создаются ячейки с данными; используя тэги <TH> и <TH> (Тable Нeader – заголовки таблицы) - применяются для создания ячеек, содержащих заголовки таблицы
6. Замечание Различие в использовании этих тэгов заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа <TH> отображается полужирным шрифтом и располагается по центру (параметры и их значения: ALIGN=CENTER, VALIGN=MIDDLE). Ячейки, определенные тэгом <TD>, по умолчанию отображают данные, выровненные влево (ALIGN=LEFT) и посередине (VALIGN=MIDDLE) в вертикальном направлении. Тэги <TD> и <TH> не могут появляться вне описания строки таблицы<TR>.
7. Количество строк в таблице определяется числом открывающих тэгов <TR>. Количество столбцов — максимальным количеством <TD> или <TH> среди всех строк. Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное количество столбцов одного и того же размера, не разрешается!
8. Пример: По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце < HTML > < HEAD > <Т I Т L Е>Таблица</Т I Т L Е> </ HEAD > <BODY> <TABLE border=”2”> <!— Начало таблицы —> <TR> <TD colspan=2 align=”center”> <В>Заголовок Таблицы.</В> </ TD > </ TR > < TR > < TD align =" center "> Первая ячейка первой строки. </ TD > < TD align »" center "> Вторая ячейка первой строки. </TD> </TR> <TR> <TD align="center"> Первая ячейка второй строки. </ TD > < TD align =" center "> Вторая ячейка второй строки. </ TD > </ TR > </ TABLE > <•— конец таблицы —> </ BODY > </ HTML >
9.
10. 3. Задания: Создать эти таблицы, сохраняя все оформление . 1. Участники похода 2. Ф И О Данные об участниках похода Год рожд. адрес телефон Школа Иванов П. И. 01.03.1989 Ул. Ленина, д.15-26 45-25-12 32 Максимов С. П. 12.05.1987 Ул. Пушкина, д. 106-5 - 27 Петухова С. И. 25.12.1988 Ул. Пролетарская, д.6-25 45-15-56 19 Симонова Е.П. 07.08.1986 Ул. Станционная, д.56-1 91-25-65 5 Наименование Школа 1 Школа 2 Класс Получено Всего Класс Получено Всего Шоколад 9 20 60 9 25 65 10 25 10 15 11 15 11 25 Лимонад 9 5 18 9 6 21 10 6 10 7 11 7 11 8
