Презентация, доклад по HTML Часть 3

Содержание

Блок . Структура простейшей таблицыЯ думаю, вы представляете, что такое таблица в обычной жизни - это набор строк и столбцов, на пересечении которых находятся ячейки.В HTML таблицы создаются по похожему принципу. Там тоже есть столбцы и строки с ячейками, однако HTML код таблиц

Слайд 1Начиная с этого урока, мы всегда работаем внутри тега body.
Работа с HTML

таблицами
Начиная с этого урока, мы всегда работаем внутри тега body.Работа с HTML таблицами

Слайд 2Блок . Структура простейшей таблицы
Я думаю, вы представляете, что такое таблица в

обычной жизни - это набор строк и столбцов, на пересечении которых находятся ячейки.
В HTML таблицы создаются по похожему принципу. Там тоже есть столбцы и строки с ячейками, однако HTML код таблиц при первом взгляде может показаться непривычным.
Сама таблица имеет жесткую структуру: главным является тег , внутри которого должны лежать теги , которые создают ряды (строки) таблицы, а внутри них - теги 
, которые создают ячейки.
Как вы видите, нету тегов, которые создавали бы столбцы - таблицы создаются по рядам: сначала первый ряд, потом второй и так далее.
Блок . Структура простейшей таблицыЯ думаю, вы представляете, что такое таблица в обычной жизни - это набор строк и столбцов, на

Слайд 3Блок . Структура простейшей таблицы


Ячейка 1
Ячейка 2
Ячейка 3


Блок . Структура простейшей таблицы Ячейка 1 Ячейка 2 Ячейка 3

Слайд 4Блок . Ячейки-заголовки
Кроме тегов td существуют также теги , которые также создают ячейки. Но это

уже будут не обычные ячейки, а ячейки-заголовки, которые указывают, что находится в данном столбце (или строке) таблицы.
В следующем примере ячейки "Иван" и "Николай" должны быть обычными ячейками td, а ячейка "Имя" по логике должна быть ячейкой-заголовком th, так как "Имя" - это общее название содержимого этого столбца
Блок . Ячейки-заголовкиКроме тегов td существуют также теги , которые также создают ячейки. Но это уже будут не обычные ячейки, а ячейки-заголовки,

Слайд 5Блок . Атрибут cellspacing
Вы обратили внимание на то, что между ячейками есть

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


Блок . Атрибут cellspacingВы обратили внимание на то, что между ячейками есть некоторое расстояние, из-за которого видно то, что

Слайд 6Блок . Атрибут cellspacing
То, что cellspacing имеет некоторое значение по умолчанию, зачастую может мешать

вам. В этом случае следует просто поставить его в ноль.
В HTML5 этот атрибут считается устаревшим (но он по-прежнему придает отступ по умолчанию). Вместо него следует использовать специальное CSS свойство, о котором мы поговорим попозже.
Если вы думаете, что вам не стоит изучать этот атрибут из-за того, что он устарел - вы ошибаетесь. В мире гораздо больше сайтов, сделанных не на HTML5, и в них вы можете столкнуться с этим атрибутом (и некоторыми другими устаревшими, которые мы будем проходить). В этом случае вам нужно знать, что это такое и как с ним работать.
Блок . Атрибут cellspacingТо, что cellspacing имеет некоторое значение по умолчанию, зачастую может мешать вам. В этом случае следует просто

Слайд 7Блок . Атрибут cellpadding
Атрибут cellpadding задает отступ между текстом и границей ячейки.
Атрибут cellpadding также имеет некоторое

значение по умолчанию. Если оно вам мешает - обнулите его.
Этот атрибут, так же, как и cellspacing, считается устаревшим в HTML5.
Блок . Атрибут cellpaddingАтрибут cellpadding задает отступ между текстом и границей ячейки.Атрибут cellpadding также имеет некоторое значение по умолчанию. Если оно вам

Слайд 8Блок . Обнуляем cellpadding и cellspacing
Давайте обнулим cellpadding и cellspacing и посмотрим, что станет с таблицей

в этом случае:

В данном случае ячейки таблицы слиплись, однако все равно заметно, что каждая ячейка имеет свою границу (то есть границы сейчас двойные). Вы сможете поправить это, когда изучите язык CSS.

Блок . Обнуляем cellpadding и cellspacingДавайте обнулим cellpadding и cellspacing и посмотрим, что станет с таблицей в этом случае:В данном случае ячейки

Слайд 9Блок . Добавляем ширину и высоту
Существуют также атрибуты width и height, которые позволяют задать таблице ширину и высоту таблицы

соответственно (без этих атрибутов ширина и высота таблицы регулируются ее содержимым: много текста - ширина большая, мало текста - ширина маленькая).
Значениями атрибутов могут выступать пиксели или проценты. Значения в процентах задаются таким образом: width="30%" - в этом случае таблица займет 30% ширины родителя.
Блок . Добавляем ширину и высотуСуществуют также атрибуты width и height, которые позволяют задать таблице ширину и высоту таблицы соответственно (без этих атрибутов ширина и
Скачать презентацию

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

Презентация по информатике для 8 класса Компьютер құрылғылары Презентация по информатике для 8 класса Компьютер құрылғылары 266
Презентация по информатике на тему Определение количества информации Презентация по информатике на тему Определение количества информации 175
Презентация к Урок 30. Мультимедийные презентации. Презентация к Урок 30. Мультимедийные презентации. 189
Презентация к уроку по информатике Основные понятия и классификация АИС Презентация к уроку по информатике Основные понятия и классификация АИС 255
Презентация по информатике на тему Кодирование информации Презентация по информатике на тему Кодирование информации 237
Презентация по информатике CASE-технологии Презентация по информатике CASE-технологии 263

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

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

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

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

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

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