Презентация, доклад по 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, которые позволяют задать таблице ширину и высоту таблицы соответственно (без этих атрибутов ширина и
Скачать презентацию

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

Презентация по информатике на тему: ОТНОШЕНИЯ ОБЪЕКТОВ И ИХ МНОЖЕСТВ 6 класс Презентация по информатике на тему: ОТНОШЕНИЯ ОБЪЕКТОВ И ИХ МНОЖЕСТВ 6 класс 275
Презентация по информатике на тему Санау жүйесі Презентация по информатике на тему Санау жүйесі 188
Презентация по информатике на тему Блокнот және Калькулятор (5 класс) Презентация по информатике на тему Блокнот және Калькулятор (5 класс) 300
Презентация по информатике на тему Виды программного обеспечения Презентация по информатике на тему Виды программного обеспечения 499
Презентация к конкурсу Самый умный информатик. Второй тур. (8 класс) Презентация к конкурсу Самый умный информатик. Второй тур. (8 класс) 196
Сms - системы Сms - системы 201

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

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

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

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

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

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