-
Курсы
-
Другое
Выбранный для просмотра документ Крапивина@SEP@metod.doc
Ф.И.О.: Крапивина Ольга Валентиновна
Место работы: МОУ ДОД «Дворец детского (юношеского) творчества»
Объединение «Информатика и информационные технологии»
г. Курган Курганской области
должность: педагог дополнительного образования
квалификация: высшая
e-mail: krapivina_olga45@mail.ru
Основы WEB-дизайна.
Тема занятия: «Создание таблиц»
Ключевые слова: информатика, WEB-дизайн, занятие, программирование, HTML-документ
1. Вводная часть, целевые ориентиры занятия
Одним из наиболее мощных и широко применяемых в НТМL средств являются таблицы. В НТМL таблицы используются не только традиционно, как метод представления данных, но и как средство формирования Web-страниц.
С развитием сфер применения НТМL-документов стала актуальной задача представления данных, для которых типично наличие ряда строк и столбцов. Создание документов, содержащих выровненные по колонкам данные, на первых порах осуществлялось использованием заранее отформатированного текста, внутри которого необходимое выравнивание обеспечивалось введением нужного количества пробелов.
Использование таблиц не ограничивается только данными, состоящими из рядов и колонок. Одним из применений является организация расположения разнообразных данных на странице, которые могут состоять из простого текста, изображений, других таблиц и т.д. Правилам создания таблиц и примерам их использования посвящена данная тема.
2.Объяснение нового материала
Рассмотрим сначала минимальный набор тэгов и их параметров, необходимый для создания несложных таблиц, а затем перейдем к их детальному описанию.
Описание таблиц должно располагаться внутри раздела документа <BODY>. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE>. Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.
Как известно, таблица состоит из строк, поэтому должен существовать тэг, “говорящий” браузеру, что является строкой. Отсюда каждая строка начинается тэгом <TR> (Тable Row – строка таблицы) и завершается тэгом </TR>.
Отдельная ячейка в строке может быть описана следующим образом:
Замечание
Различие в использовании этих тэгов заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа <TH> отображается полужирным шрифтом и располагается по центру (параметры и их значения: ALIGN=CENTER, VALIGN=MIDDLE). Ячейки, определенные тэгом <TD>, по умолчанию отображают данные, выровненные влево (ALIGN=LEFT) и посередине (VALIGN=MIDDLE) в вертикальном направлении.
Тэги <TD> и <TH> не могут появляться вне описания строки таблицы<TR>.
Завершающие тэги </TR>, <TD> и </TH> могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки, или конец таблицы. Завершающий тэг таблицы также может быть опущен. Однако мы настоятельно рекомендуем их использовать с тем, чтобы сделать текст HTML-документа более понятным!
Количество строк в таблице определяется числом открывающих тэгов <TR>.
Количество столбцов — максимальным количеством <TD> или <TH> среди всех строк.
Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное количество столбцов одного и того же размера, не разрешается!
Данные в некоторых ячейках могут отсутствовать. Тогда такие ячейки (их еще называют пустыми) описываются парой следующих подряд тэгов: <TD>, </TD>. А если нужно расположить несколько пустых ячеек в конце какой-нибудь строки? Неужели придется несколько раз писать такую конструкцию: <TD> </TD>? В этом случае ничего записывать не нужно, а браузер автоматически добавит требуемое количество пустых ячеек.
Большинство таблиц имеют заголовки, поэтому должен существовать тэг для их создания. Заголовок таблицы заключается в пару тэгов <CAPTION> и </CAPTION>, которые располагаются сразу же за тэгом <TABLE> и до первого <TR>.
По умолчанию текст заголовка таблицы располагается над ней (ALIGN=TOP) и центрируется в горизонтальном направлении.
Перечисленные тэги могут иметь параметры, число и значения которых различны. Однако в простейшем случае тэги используются без параметров, которые принимают значения по умолчанию.
Этих сведений вполне достаточно для построения элементарных таблиц.
Пример:
По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце
<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>
Как известно, для задания заголовка таблицы используется тэг <CAPTION>. Он имеет единственный допустимый параметр ALIGN, принимающий следующие значения:
Замечания
1. Если таблица не имеет заголовка, то тэг <CAPTION> не используется!
2. По горизонтали заголовок таблицы всегда располагается по центру таблицы
А если требуется выровнять заголовок таблицы, например, по левому или правому краю таблицы? В этом случае используют следующие значения для этого же самого параметра:
<CAPTION ALIGN=LEFT VALIGN=BOTTOM> Заголовок,
расположенный внизу таблицы с выравниванием влево </САРТION>
Ширина таблицы задается атрибутом width=”...” для тега <ТАВLЕ>, а значение ширины таблицы может задаваться в пикселях или в процентах от ширины экрана.
Содержимое каждой ячейки может быть выровнено с помощью атрибутов align="..." (горизонтальное положение) и valign=”...” (вертикальное положение) для тегов <TR> или <TD>.
Атрибут valign=”...” может принимать следующие значения:
top - прижать вверх,
bottom - прижать вниз
middle - разместить по центру,
а атрибут align="..." принимает следующие зна
чения:
left - прижать влево,
right - прижать вправо
center -разместить по центру.
Атрибут border=”...” тега <TABLE> рисует рамку вокруг таблицы и каждой ячейки, при этом ширина рамки задается в пикселях. Для отдельной ячейки рамка не задается.
Атрибуты
cellpadding="..." - определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым,
cellspacing="..." определяют, соответственно, расстояние в пикселях между ячейками.
Следует иметь в виду, что атрибуты colspan=”...” и rowspan="..." тегов <TD> и <TR> позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка.
Рассмотрим пример таблицы, занимающей по ширине весь экран броузера:
Сложная таблица
<TABLE border="l" width="100%">
<TR>
<TD width="66%" colspan="2">
<P aligns"center">Две ячейки, объединенные по горизонтали
</TD> </TR> <TR>
<TD width= "33%" rowspan= " 2 " valign="middle">
Две ячейки, объединенные по вертикали </TD>
<TD width="33%">no левому краю </TD>
</TR>
<TR>
<TD width="33%">
<P align="right">по правому краю </TD> </TR>
</TABLE>
Таблицы очень часто используются для позиционирования различных элементов на Web-странице. С помощью таблиц можно создавать обтекание рисунков, упорядочивать элементы форм (об этом речь пойдет на следующих занятиях), а также позиционировать другие элементы HTML-документа.
3. Задания:
1. Создать эту таблицу, сохраняя все оформление.
Участники похода
|
Ф И О |
Данные об участниках похода |
|||
|
Год рожд. |
адрес |
телефон |
Школа |
|
|
Иванов П. И. |
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 |
2.
|
Наименование |
Школа 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 |
|||
1. Периодические издания: журналы «Компьютерра», «PC magasin»,
2. Н. В. Комолова. HTML и XHTML. Языки разметки web-страниц. / Н. В. Комолова. Самоучитель. 1 издание. СПб, Издательство: "Питер", 2009, 272 с.
3. Фримен Эрик, Фримен Элизабет. HTML и XHTML. Языки разметки web-страниц. / Фримен Эрик, Фримен Элизабет. Бестселлеры O'Reilly. 1 издание. СПб Издательство: "Питер", 2010, 656 с.
4. А. А. Чиртик. HTML и XHTML. Языки разметки web-страниц. / А. А. Чиртик. Популярный самоучитель. 1 издание. СПб Издательство: "Питер", 2008, 256 с.
5. Электронные учебники, материалы из сети Интернет.
Курс повышения квалификации
Курс повышения квалификации
Курс профессиональной переподготовки
Курс профессиональной переподготовки
Выбранный для просмотра документ Крапивина@SEP@автор.doc
Скачать материал "Конспект урока «Основы Web-дизайна. Создание таблиц»"Выбранный для просмотра документ Крапивина@SEP@таблицы.ppt
Скачать материал "Конспект урока «Основы Web-дизайна. Создание таблиц»"
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 слайд
Атрибуты:
width=”...” для тега <ТАВLЕ> ширина таблицы, а значение ширины таблицы может задаваться в пикселях или в процентах от ширины экрана.
align="..." (горизонтальное положение) и valign=”...” (вертикальное положение) для тегов <TR> или <TD> - выравнивание содержимого ячейки.
Атрибут valign=”...” может принимать следующие значения:
top - прижать вверх,
bottom - прижать вниз
middle - разместить по центру,
а атрибут align="..." принимает следующие значения:
left - прижать влево,
right - прижать вправо
center -разместить по центру.
border=”...” тега <TABLE> рисует рамку вокруг таблицы и каждой ячейки, при этом ширина рамки задается в пикселях. Для отдельной ячейки рамка не задается.
cellpadding="..." - определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым,
cellspacing="..." определяют, соответственно, расстояние в пикселях между ячейками.
colspan=”...” и rowspan="..." тегов <TD> и <TR> позволяют объединять ячейки таблицы в группы.
10 слайд
3. Задания:
Создать эти таблицы, сохраняя все оформление.
1.Участники похода
2.
Выбранный для просмотра документ ‚ ¦®!.txt
Скачать материал "Конспект урока «Основы Web-дизайна. Создание таблиц»"
Рабочие листы
к вашим урокам
Скачать
. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом . Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек. Как известно, таблица состоит из строк, поэтому должен существовать тэг, «говорящий» браузеру, что является строкой. Отсюда каждая строка начинается тэгом . Отдельная ячейка в строке может быть описана следующим образом: с помощью тэгов и (Тable Data – данные таблицы) – таким образом создаются ячейки с данными; используя тэги и (Тable Нeader – заголовки таблицы) - применяются для создания ячеек, содержащих заголовки таблицы Замечание Различие в использовании этих тэгов заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа отображается полужирным шрифтом и располагается по центру (параметры и их значения: ALIGN=CENTER, align="absmiddle"). Ячейки, определенные тэгом , по умолчанию отображают данные, выровненные влево (ALIGN=LEFT) и посередине (align="absmiddle") в вертикальном направлении. Тэги и не могут появляться вне описания строки таблицы. Завершающие тэги , и могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки, или конец таблицы. Завершающий тэг таблицы также может быть опущен. Однако мы настоятельно рекомендуем их использовать с тем, чтобы сделать текст HTML-документа более понятным! Количество строк в таблице определяется числом открывающих тэгов . Количество столбцов — максимальным количеством или среди всех строк. Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное количество столбцов одного и того же размера, не разрешается! Данные в некоторых ячейках могут отсутствовать. Тогда такие ячейки (их еще называют пустыми) описываются парой следующих подряд тэгов: , . А если нужно расположить несколько пустых ячеек в конце какой-нибудь строки? Неужели придется несколько раз писать такую конструкцию: ? В этом случае ничего записывать не нужно, а браузер автоматически добавит требуемое количество пустых ячеек. Большинство таблиц имеют заголовки, поэтому должен существовать тэг для их создания. Заголовок таблицы заключается в пару тэгов и , которые располагаются сразу же за тэгом Пример: По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце ТIТLЕ ТаблицаТIТLЕ Начало таблицы — В Заголовок Таблицы.В Первая ячейка первой строки. Вторая ячейка первой строки. Первая ячейка второй строки. Вторая ячейка второй строки. •— конец таблицы —
7 373 995 материалов в базе
Настоящий материал опубликован пользователем Волова Наталия Александровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Вам будут доступны для скачивания все 401 089 материалов из нашего маркетплейса.
Мини-курс
3 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.