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

Основы 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-странице может осуществяться при помощи списков следующих типов: маркированного, нумерованного и списка определений. Возможно

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

З днем народження З днем народження 240
Чудотворные иконы России Чудотворные иконы России 383
Растровая графика Растровая графика 168
12 декабря - день Конституции РФ 12 декабря - день Конституции РФ 269
Моя любимая семья Моя любимая семья 231
БОУ ОО Медицинский колледж БОУ ОО Медицинский колледж 362
Системы счисления Системы счисления 237
Внешнеторговая политика и особенности ее осуществления на примере 3-х стран Внешнеторговая политика и особенности ее осуществления на примере 3-х стран 210
Типичные технические ошибки при оформлении текста КР и ВКР Типичные технические ошибки при оформлении текста КР и ВКР 295
Трудовой договор Трудовой договор 367
УЧЕБНЫЙ ВОЕННЫЙ ЦЕНТР Общая тактика УЧЕБНЫЙ ВОЕННЫЙ ЦЕНТР Общая тактика 210
Доклад на тему: Ученическое самоуправление. КГУ Доклад на тему: Ученическое самоуправление. КГУ "Троицкая СШ" Акмолинской области, Зерендинского района 198
Pesok-VL_presentation Pesok-VL_presentation 224
Navigate to teaching adults ! Navigate to teaching adults ! 172
Как защититься от несправедливости, 6 класс Как защититься от несправедливости, 6 класс 458
Лекция № 6 Лекция № 6 239
Лекция 1. Электронный бизнес и электронная коммерция : основные Лекция 1. Электронный бизнес и электронная коммерция : основные 449
Древняя Русь IX-XIII вв. Древняя Русь IX-XIII вв. 444
ҚАЗАҚ БАС СӘУЛЕТ-ҚҰРЫЛЫС АКАДЕМИЯСЫ ҚАЗАҚ БАС СӘУЛЕТ-ҚҰРЫЛЫС АКАДЕМИЯСЫ 2085
Домашнее задание Домашнее задание 230

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

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

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

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

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

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

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