Презентация, доклад на тему Практическая работа Создание таблиц на HTML

Содержание

Для чего нужны таблицы? На этот вопрос есть очевидный ответ: таблицы нужны для представления информации в табличном виде. Есть, однако, и менее очевидные ответы.До настоящего времени мы имели дело с документами, в которых существовал только один

Слайд 1Занятие 10.
Таблицы

Занятие 10.Таблицы

Слайд 2Для чего нужны таблицы?
На этот вопрос есть очевидный ответ: таблицы

нужны для представления информации в табличном виде. Есть, однако, и менее очевидные ответы.
До настоящего времени мы имели дело с документами, в которых существовал только один "поток" текста. На практике иногда очень хочется расположить текст в несколько колонок. Таблица может в этом помочь.
Кроме того, таблица, состоящая из одной ячейки, может очень эффектно выделить фрагмент текста, на который Вы хотите обратить внимание читателя.
Для чего нужны таблицы? На этот вопрос есть очевидный ответ: таблицы нужны для представления информации в табличном

Слайд 3Как устроена таблица
В устройстве таблицы легче всего разобраться на простом примере10

sp10.html .


Пример 10

Простейшая таблица













У таблицы может быть заголовок

Первая строка, первая колонка

Первая строка, вторая колонка

Вторая строка, первая колонка

Вторая строка, вторая колонка



Как устроена таблицаВ устройстве таблицы легче всего разобраться на простом примере10 sp10.html . Пример 10 Простейшая

Слайд 4Таблица начинается с метки и заканчивается меткой . Метка

может включать несколько атрибутов:

ALIGN - Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения:
ALIGN=LEFT (выравнивание влево),
ALIGN=CENTER (выравнивание по центру),
ALIGN=RIGHT (выравнивание вправо).
WIDTH - Ширина таблицы.
Ее можно задать в пикселях (например, WIDTH=400) или
в процентах от ширины страницы (например, WIDTH=80%).
BORDER - Устанавливает ширину внешней рамки таблицы и ячеек в пикселях (например, BORDER=4). Если атрибут не установлен, таблица показывается без рамки.
CELLSPACING - Устанавливает расстояние между рамками ячеек таблицы в пикселях (например, CELLSPACING=2).
CELLPADDING - Устанавливает расстояние между рамкой ячейки и текстом в пикселях (например, CELLPADDING=10).

Таблица начинается с метки и заканчивается меткой . Метка может включать несколько атрибутов:ALIGN - Устанавливает расположение

Слайд 5Таблица может иметь заголовок ( ... ), хотя заголовок не является

обязательным.
Метка
и заканчивается меткой .
Метка может включать следующие атрибуты:
ALIGN - Устанавливает выравнивание текста в ячейках строки. Допустимые значения:
ALIGN=LEFT (выравнивание влево),
ALIGN=CENTER (выравнивание по центру),
ALIGN=RIGHT (выравнивание вправо).
VALIGN - Устанавливает вертикальное выравнивание текста в ячейках строки.
Допустимые значения:
VALIGN=TOP (выравнивание по верхнему краю),
VALIGN=MIDDLE (выравнивание по центру),
VALIGN=BOTTOM (выравнивание по нижнему краю).
Таблица может иметь заголовок ( ... ), хотя заголовок не является обязательным. Метка может включать атрибут ALIGN.

Слайд 6Каждая ячейка таблицы начинается с метки и заканчивается меткой .


Метка
может включать атрибут ALIGN.
Допустимые значения: (заголовок помещается над таблицей) и
(заголовок помещается под таблицей).
Каждая строка таблицы начинается с метки
может включать следующие атрибуты:
NOWRAP - Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку.
COLSPAN - Устанавливает "размах" ячейки по горизонтали.
Например, COLSPAN=3 означает, что ячейка простирается на три колонки.
ROWSPAN - Устанавливает "размах" ячейки по вертикали. Например, ROWSPAN=2 означает, что ячейка занимает две строки.
ALIGN - Устанавливает выравнивание текста в ячейке.
Допустимые значения:
ALIGN=LEFT (выравнивание влево),
ALIGN=CENTER (выравнивание по центру),
ALIGN=RIGHT (выравнивание вправо).
Каждая ячейка таблицы начинается с метки и заканчивается меткой . Метка может включать следующие атрибуты:NOWRAP - Присутствие

Слайд 7VALIGN - Устанавливает вертикальное выравнивание текста в ячейке.
Допустимые значения:
VALIGN=TOP

(выравнивание по верхнему краю),
VALIGN=MIDDLE (выравнивание по центру),
VALIGN=BOTTOM (выравнивание по нижнему краю).
WIDTH - Устанавливает ширину ячейки в пикселях (например, WIDTH=200).
HEIGHT - Устанавливает высоту ячейки в пикселях (например, HEIGHT=40).
Если ячейка таблицы пуста, вокруг нее не рисуется рамка.
Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект   (non-breaking space — неразрывающий пробел). Ячейка по-прежнему будет пустой, а рамка вокруг нее будет.
Любопытно отметить, что любая ячейка таблицы может содержать в себе другую таблицу.
VALIGN - Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю),VALIGN=MIDDLE (выравнивание по

Слайд 8Задание для выполнения практической работы:

Выйти из презентации (нажать Esc)
Открыть программу «Блокнот»

набрать текст HTML – документа примера 10.
Сохранить документ с именем
Открыть документ SP10.html браузером Internet Explorer
Проанализировать выполнение программы
Задание для выполнения практической работы:Выйти из презентации (нажать Esc)Открыть программу «Блокнот» набрать текст HTML – документа

Слайд 9110 рублей
Практическое задание:

Просмотрите и законспектируйте теги языка HTML

Скопируйте в Блокнот пример

и сохраните его с именем SP10.html

Добавьте таблицу
Заголовок: Продукты которые нужно купить в магазине



.


Сохраните в файле SP10_m.html

Откройте файл SP10_m.html Браузером.

Повторно проверьте результат.
110 рублейПрактическое задание:Просмотрите и законспектируйте теги языка HTMLСкопируйте в Блокнот пример и сохраните его с именем SP10.htmlДобавьте
Скачать презентацию

Похожие презентации

Соло - пернетақтада (баяндама) Соло - пернетақтада (баяндама) 231
Презентация по информатику на тему: Кестелер. Кестелер құру Презентация по информатику на тему: Кестелер. Кестелер құру 218
Презентация Путешествие в страну информатика (дополнение к конспекту) Презентация Путешествие в страну информатика (дополнение к конспекту) 145
Презентация по информатике Таблицы. Создание таблиц. (6 класс) Презентация по информатике Таблицы. Создание таблиц. (6 класс) 150
Презентация к уроку по информатике КИнформация и информатика. Информационные процессы Презентация к уроку по информатике КИнформация и информатика. Информационные процессы 174
Урок по теме: Информационные процессы Урок по теме: Информационные процессы 154

Что такое shareslide.ru?

Это сайт презентаций, где можно хранить и обмениваться своими презентациями, докладами, проектами, шаблонами в формате PowerPoint с другими пользователями. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами.

Для правообладателей

Яндекс.Метрика

Обратная связь

Email: Нажмите что бы посмотреть