Разделы презентаций

Основы HTML и CSS Списки и таблицы

Содержание

Списки и таблицы: Структурирование информации на WEB-странице при помощи списков. Типы списковТаблица и ее элементыПравила задания размеров для таблицы и ее ячеек. Объединение ячеек. Типичные ошибки при работе с таблицамиИспользование таблиц.

Слайды и текст этой презентации

Слайд 1Основы HTML и CSS Списки и таблицы

Основы HTML и CSS Списки и таблицы

Слайд 2Списки и таблицы:
Структурирование информации на WEB-странице при помощи списков.

Типы списков
Таблица и ее элементы
Правила задания размеров для таблицы и

ее ячеек. Объединение ячеек. Типичные ошибки при работе с таблицами
Использование таблиц. Макетирование web-страницы с помощью таблиц
Использование вложенных таблиц
Приемы использования таблиц на web-странице
Списки и таблицы: Структурирование информации на WEB-странице при помощи списков. Типы списковТаблица и ее элементыПравила задания размеров

Слайд 3Маркированный список (unordered list)
Сравните

первый элемент
второй элемент
...
последний

элемент

Маркированный список (unordered list)Сравните первый элемент второй элемент ... последний элемент

Слайд 4Тип маркеров
 

Тип маркеров 

Слайд 5Нумерованный список (ordered list)
 
Сравните

первый элемент
второй элемент
...
последний

элемент

Нумерованный список (ordered list) Сравните первый элемент второй элемент ... последний элемент

Слайд 6Типы нумерации

Типы нумерации

Слайд 7Списки определений (definition list)
Отдел маркетинга Данный отдел занимается продвижением товаров и

услуг
Финансовый отдел Данный отдел занимается всеми финансовыми операциями

Списки определений (definition list) Отдел маркетинга Данный отдел занимается продвижением товаров и услуг Финансовый отдел Данный

Слайд 8Вложенные (смешанные) списки
Смешанный список
НОВОСТЬ ДНЯ

Сегодня идет дождь
Дождь будет идти весь

день
НОВОСТЬ НОЧИ

Ночью будет идти дождь
Завтра начнется новый день

Вложенные (смешанные) спискиСмешанный список НОВОСТЬ ДНЯ Сегодня идет дождь Дождь будет идти весь день НОВОСТЬ НОЧИ Ночью будет идти дождь Завтра начнется новый

Слайд 9Лабораторная работа
Создание и использование списков

Лабораторная работаСоздание и использование списков

Слайд 10Рисуем таблицу - 3 этапа (HTML 3.2)






С о д е

р ж а н и е




















Рисуем таблицу - 3 этапа (HTML 3.2)С о д е р ж а н и е

Слайд 11

(1,1)


(1,2)

-->


(2,1)
(2,2)


(3,1)
(3,2)


(Не) Простая таблица

(1,1) (1,2) (2,1) (2,2)

Слайд 12Атрибуты элемента TABLE

Атрибуты элемента TABLE

Слайд 13Атрибуты элемента TR

Атрибуты элемента TR

Слайд 14Атрибуты элемента TD (TH)

Атрибуты элемента TD (TH)

Слайд 15Объединение ячеек


Столбцы объединены


Строки объединены
Обычная ячейка, строка 2

Обычная ячейка, строка 3

Строка 4, левая ячейка
Строка 4, правая ячейка


Объединение ячеек Столбцы объединены Строки объединены Обычная ячейка, строка 2 Обычная

Слайд 16Создаем заголовок таблицы

Заголовок таблицы
...
Атрибуты заголовка:

align = top|bottom|left|right
valign = top|bottom

Создаем заголовок таблицыЗаголовок таблицы...Атрибуты заголовка:align = top|bottom|left|rightvalign = top|bottom

Слайд 17Схема отступов и объединения ячеек
width
colspan
rowspan
...
...
...
...

Схема отступов и объединения ячеекwidthcolspanrowspan...... ... ...

Слайд 18Лабораторная работа
Использование colspan и rowspan
При необходимости посмотрите файл tables-result.html

Лабораторная работаИспользование colspan и rowspanПри необходимости посмотрите файл tables-result.html

Слайд 19Страничные отступы (варианты)

Страничные отступы (варианты)

Слайд 20Страничные отступы: 2 колонки


 
1 колонка


2 колонка








  1 колонка 2 колонка

Страничные отступы: 2 колонки   1 колонка 2

Слайд 21Таблицы, вложенные друг в друга

Вложенные

таблицы
Строки объединены





Строка I, Ячейка A Строка I, Ячейка B
Строка II, Ячейка A Строка II, Ячейка B
Строка III, Ячейка A Строка III, Ячейка B



Обычная ячейка, строка 3




Вложенная таблица
Всего 2 строки


Строка 4, правая ячейка


Таблицы, вложенные друг в друга Вложенные таблицы Строки объединены

Слайд 22Группируем таблицу по блокам (HTML 4.0)
...

...

align="center" bgcolor="red"> ... ... ... ...
Может быть много tbody блоков. Но все разделы должны содержать одинаковое количество столбцов


Группируем таблицу по блокам (HTML 4.0) ... ... ... ...

Слайд 23Группируем таблицу по колонкам
...

Атрибуты colgroup:
align =

center|left|right
valign = bottom|middle|top
width = число|процент
span = число





Группируем таблицу по колонкам ... Атрибуты colgroup: align = center|left|right valign = bottom|middle|top width = число|процент span =

Слайд 24Домашняя работа
Объединение ячеек и вложенные таблицы

Домашняя работаОбъединение ячеек и вложенные таблицы

Слайд 25Итоги
Структурирование информации на WEB-странице может осуществяться при помощи списков следующих

типов: маркированного, нумерованного и списка определений. Возможно смешивание списков.
Таблицы используются

для представления табличных данных.
Также, до появления каскадных таблиц стилей, таблицы использовались для макетирования web-страницы.
Таблицы могут быть вложены друг в друга.
ИтогиСтруктурирование информации на WEB-странице может осуществяться при помощи списков следующих типов: маркированного, нумерованного и списка определений. Возможно

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

Проект переоборудования концертного зала Агаповского районного Дома культуры Проект переоборудования концертного зала Агаповского районного Дома культуры 206
Менеджмент библиотечно-информационной деятельности и технологий чтения Менеджмент библиотечно-информационной деятельности и технологий чтения 169
Презентация для занятия по метапредмету Презентация для занятия по метапредмету "Развиваем творчество" 215
Инвестициялық жобалау Инвестициялық жобалау 752
Татарская АССР в последние советские десятилетия (1960-1980 годы ХХ века) Татарская АССР в последние советские десятилетия (1960-1980 годы ХХ века) 300
Походы шведов на Русь Походы шведов на Русь 370
Лекция 11 Лекция 11 184
Графические примитивы и команды их создания Графические примитивы и команды их создания 216
Урок-практикум «Логарифмы» Урок-практикум «Логарифмы» 460
Периоды родов. Изменения в матке во время родов Периоды родов. Изменения в матке во время родов 214
Сергей Юльевич Витте (1849-1915) Сергей Юльевич Витте (1849-1915) 241
Собрание директоров и педагогов воскресных школ, посвящённое началу 2019 – 2020 Собрание директоров и педагогов воскресных школ, посвящённое началу 2019 – 2020 193
ИНЖЕНЕРНЫЕ КОНСТРУКЦИИ ИНЖЕНЕРНЫЕ КОНСТРУКЦИИ 243
Кровь - 2 Кровь - 2 239
представление чисел представление чисел 235
КРЯШЕНСКОЕ ХРАМОСТРОИТЕЛЬСТВО: ПРОШЛОЕ и НАСТОЯЩЕЕ КРЯШЕНСКОЕ ХРАМОСТРОИТЕЛЬСТВО: ПРОШЛОЕ и НАСТОЯЩЕЕ 280
География Ленинградской области География Ленинградской области 496
Жук Бабочка Жук Бабочка 202
Лекция 8. Анкетирование – метод сбора маркетинговой информации. (2 часа) Лекция 8. Анкетирование – метод сбора маркетинговой информации. (2 часа) 208
п араграф №1 Рост волос п араграф №1 Рост волос 279

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

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

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

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

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.

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

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