Работа над собственным проектом. Работа с таблицами

на которые можно делать сайты, а также изучили использование ссылок и изображений на страницах. В этой части мы закрепим знания, полученные в ходе выполнения заданий по теме “Таблицы” и рассмотрим актуальность их использования в верстке страниц. Давай вспомним, что такое таблицы и какие основные теги используются для их создания. На следующем слайде будет небольшой тест, который поможет тебе освежить знания!

из строк и столбцов б) Таблица - это неструктурированный и несвязанный набор данных, состоящий из строк и столбцов в) Таблица - это структурированный набор данных, состоящий из строк и заголовков
Выбери тег, который используется для создания ячеек: а) б) в)

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

они предназначены. К сожалению, многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Раньше таблицы использовались очень активно для создания макета веб-страницы, но мы с тобой идём в ногу со временем, поэтому просто узнаем о том, как это происходило и немного потренируемся! В настоящее время активно используются сеточные модели, о которых ты узнаешь позже. А пока давай разберемся с построением веб-странички через таблицы

Использование таблиц для форматирования разметки HTML-страницы

можешь довольно легко управлять расположением своих элементов на странице).
Создание областей переменной или постоянной ширины (ты можешь контролировать свободное место на странице, а также выделять элементам столько места, сколько им нужно)
Приятный и логичный дизайн
Несмотря на все плюсы, всё перекрывает один минус - технологии ушли далеко вперед, и сейчас используются более удобные и быстрые способы разметки страниц.

таблицы

Перейдя по этой ссылке, ты можешь скопировать себе код это страницы и поэкспериментировать

мешают адаптации страниц для людей, имеющих проблемы со зрением
Таблицы создают путаницу тегов
Таблицы не реагируют автоматически на тип устройства

Ниже приведена таблица уроков по языкам. В пятницу (Friday) новый класс целый день изучает голландский (Dutch), кроме того, во вторник (Tuesday) и четверг (Thursdays) есть занятия по немецкому (German). Учительница хочет выделить столбцы, соответствующие дням, когда она преподает. Тебе необходимо повторить такую таблицу

тебе. Вот алгоритм действий, по которому можно построить данную таблицу:
Сначала скопируй код из теории. Код HTML содержит таблицу, которую ты уже видел выше, но без информации о стиле.
Добавь элемент вверху таблицы, сразу же под тегом , куда ты сможешь вставлять элементы .
Первые два столбца надо оставить без стиля..
Добавь цвет фона для третьего столбцов. Значением атрибута style будет background-color:#97DB9A;
Задай ширину для четвертого столбца. Значением атрибута style будет width: 42px;
Добавь цвет фона для пятого столбца. Значением атрибута style будет background-color: #97DB9A;
Добавь другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведет новый класс. Значениями атрибута style будут: background-color:#DCC48E; border:4px solid #C1437A;
Последние два дня выходные; значением атрибута style будет width: 42px;
Скачать