598115
столько раз учителя, ученики и родители
посетили официальный сайт ООО «Инфоурок»
за прошедшие 24 часа
Добавить материал и получить бесплатное
свидетельство о публикации
в СМИ №ФС77-60625 от 20.01.2015

Скидка 0%

112 курсов профессиональной переподготовки от 3540 руб.

268 курсов повышения квалификации от 840 руб.

МОСКОВСКИЕ ДОКУМЕНТЫ ДЛЯ АТТЕСТАЦИИ

Лицензия на осуществление образовательной деятельности №038767 выдана 26 сентября 2017 г. Департаменотом образования города Москвы

Инфоурок Информатика ПрезентацииУрок 10. HTML таблицы

Приглашаем Вас в наш детский летний "ИНФОЛАГЕРЬ" (для детей от 8 до 17 лет), который начинает свою работу этим летом в Беларуси!

‣ Мы снизили стоимость путёвок до 31.000 руб.!;
‣ Доступна оплата в рассрочку без переплат. Для бронирования места достаточно оплатить всего 50% стоимости.

Двухместные номера, шестиразовое питание, авторская анимационная программа!

Подробнее об "Инфолагере"

Позвоните нам: +7 (985) 507-73-73 (Россия), +375 (29) 884-91-48 (Беларусь)
Или напишите и мы ответим на все Ваши вопросы: infolager@infourok.ru


Урок 10. HTML таблицы

библиотека
материалов
Таблицы В создании презентации использованы контент сайта puzzleweb.ru
HTML: Создание таблицы Таблица - набор данных, распределенных по строкам и яч...
HTML: Создание таблицы Создание таблицы всегда начинается со строк, которые о...
Первый заголовокВторой заголовок строка 1, ячейка 1строка 1, ячейка 2 стр...
Рамка таблицы Тег  может иметь необязательный атрибут border, управляющий гра...
   Таблица с рамкой:  Перваястрока Втораястрока
 Таблица без рамки:  Перваястрока Втораястрока
Заголовок таблицы У каждой таблицы обычно бывает заголовок, описывающий ее со...
Моя первая таблица строка 1, ячейка 1строка 1, ячейка 2 строка 2, ячейка...
HTML: Объединение ячеек в таблице Смежные ячейки в таблице могут объединяться...
Объединим две ячейки в строке таблицы:   ИмяТелефон   Петя Иванов123 45 67...
Объединим две ячейки в столбце таблицы:   ИмяПетя Иванов   Телефон123 45 67...

Описание презентации по отдельным слайдам:

1 слайд Таблицы В создании презентации использованы контент сайта puzzleweb.ru
Описание слайда:

Таблицы В создании презентации использованы контент сайта puzzleweb.ru

2 слайд HTML: Создание таблицы Таблица - набор данных, распределенных по строкам и яч
Описание слайда:

HTML: Создание таблицы Таблица - набор данных, распределенных по строкам и ячейкам. В большинстве ячеек размещаются табличные данные, остальные содержат заголовки для строк и столбцов, описывающие содержимое. Для создания таблицы в HTML-документе используется тег <table>, он представляет собой контейнер, в котором находится все содержимое таблицы.

3 слайд HTML: Создание таблицы Создание таблицы всегда начинается со строк, которые о
Описание слайда:

HTML: Создание таблицы Создание таблицы всегда начинается со строк, которые определяются с помощью тега <tr>, каждая строка, в свою очередь, состоит из ячеек. Тег <tr> может содержать в себе только теги для создания ячеек. В HTML существует два разных тега для создания ячеек, первым из них является <td>, он создает обычные ячейки с данными. Второй вид - это тег <th>, он позволяет определять ячейки, которые содержат заголовки для столбцов или строк, содержимое таких ячеек отображается жирным начертанием и выравнивается по центру. Теги <td> и <th> могут включать в себя любые HTML-элементы, которые доступны для использования в теле документа.

4 слайд Первый заголовокВторой заголовок строка 1, ячейка 1строка 1, ячейка 2 стр
Описание слайда:

<html> <body> <table border="1"> <tr><th>Первый заголовок</th><th>Второй заголовок</th></tr> <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr> <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr> </table> </body> </html>

5 слайд Рамка таблицы Тег  может иметь необязательный атрибут border, управляющий гра
Описание слайда:

Рамка таблицы Тег <table> может иметь необязательный атрибут border, управляющий границами таблицы. По умолчанию браузеры не отображают рамку вокруг таблицы и ячеек, но присутствие атрибута border, указывает браузеру, что у таблицы должна быть рамка. По стандарту HTML5 значением атрибута border может быть либо 1, либо пустая строка (обозначается как пара двойных кавычек ""). Не важно, какое значение атрибута вы зададите, если он присутствует, то рамка будет отображаться:

6 слайд    Таблица с рамкой:  Перваястрока Втораястрока
Описание слайда:

<html> <body> <h4>Таблица с рамкой:</h4> <table border="1"> <tr><td>Первая</td><td>строка</td></tr> <tr><td>Вторая</td><td>строка</td></tr> </table>

7 слайд  Таблица без рамки:  Перваястрока Втораястрока
Описание слайда:

<h4>Таблица без рамки:</h4> <table> <tr><td>Первая</td><td>строка</td></tr> <tr><td>Вторая</td><td>строка</td></tr> </table> </body> </html>

8 слайд Заголовок таблицы У каждой таблицы обычно бывает заголовок, описывающий ее со
Описание слайда:

Заголовок таблицы У каждой таблицы обычно бывает заголовок, описывающий ее содержимое. Для создания заголовка таблицы используется тег <caption>, обычно он размещается сразу после открывающего тега <table>, но также он может располагаться практически в любом месте внутри таблицы между элементами <tr>. Тег заголовка может содержать в себе любые элементы, которые можно использовать в теле HTML-документа. По умолчанию содержимое тега <caption> отображается над таблицей и выравнивается по ее центру. Расположение заголовка можно изменить применив к нему CSS свойство caption-side:

9 слайд Моя первая таблица строка 1, ячейка 1строка 1, ячейка 2 строка 2, ячейка
Описание слайда:

<html> <body> <table border="1"> <caption>Моя первая таблица</caption> <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr> <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr> </table> </body> </html>

10 слайд HTML: Объединение ячеек в таблице Смежные ячейки в таблице могут объединяться
Описание слайда:

HTML: Объединение ячеек в таблице Смежные ячейки в таблице могут объединяться с целью размещения большего объема данных. Например, в таблице из четырех строк и четырех столбцов все ячейки в первой строке можно объединить и поместить в этой строке красивый заголовок. Возможно также объединение нескольких строк или столбцов. Для объединения смежных ячеек в строке таблицы используется атрибут colspan, в значении задается число ячеек в строке, которое вы хотите объединить. Для объединения смежных ячеек в столбце таблицы используется атрибут rowspan, в значении задается число ячеек столбца, которое вы хотите объединить:

11 слайд Объединим две ячейки в строке таблицы:   ИмяТелефон   Петя Иванов123 45 67
Описание слайда:

<html> <body> <h4>Объединим две ячейки в строке таблицы:</h4> <table border="1"> <tr> <th>Имя</th><th colspan="2">Телефон</th> </tr> <tr> <td>Петя Иванов</td><td>123 45 67</td><td>234 56 78</td> </tr> </table>

12 слайд Объединим две ячейки в столбце таблицы:   ИмяПетя Иванов   Телефон123 45 67
Описание слайда:

<h4>Объединим две ячейки в столбце таблицы:</h4> <table border="1"> <tr> <th>Имя</th><td>Петя Иванов</td> </tr> <tr> <th rowspan="2">Телефон</th><td>123 45 67</td> </tr> <tr><td>234 56 78</td></tr> </table> </body> </html>

Курс профессиональной переподготовки
Учитель информатики
Курс профессиональной переподготовки
Учитель математики и информатики
Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:
также Вы можете выбрать тип материала:
Общая информация
ВНИМАНИЮ УЧИТЕЛЕЙ: хотите организовать и вести кружок по ментальной арифметике в своей школе? Спрос на данную методику постоянно растёт, а Вам для её освоения достаточно будет пройти один курс повышения квалификации (72 часа) прямо в Вашем личном кабинете на сайте "Инфоурок".

Пройдя курс Вы получите:
- Удостоверение о повышении квалификации;
- Подробный план уроков (150 стр.);
- Задачник для обучающихся (83 стр.);
- Вводную тетрадь «Знакомство со счетами и правилами»;
- БЕСПЛАТНЫЙ доступ к CRM-системе, Личному кабинету для проведения занятий;
- Возможность дополнительного источника дохода (до 60.000 руб. в месяц)!

Пройдите дистанционный курс «Ментальная арифметика» на проекте "Инфоурок"!

Подать заявку

Вам будут интересны эти курсы:

Курс повышения квалификации «Информационные технологии в деятельности учителя физики»
Курс повышения квалификации «Организация работы по формированию медиаграмотности и повышению уровня информационных компетенций всех участников образовательного процесса»
Курс профессиональной переподготовки «Информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Сетевые и дистанционные (электронные) формы обучения в условиях реализации ФГОС по ТОП-50»
Курс повышения квалификации «Использование компьютерных технологий в процессе обучения в условиях реализации ФГОС»
Курс повышения квалификации «Специфика преподавания информатики в начальных классах с учетом ФГОС НОО»
Курс повышения квалификации «Применение MS Word, Excel в финансовых расчетах»
Курс повышения квалификации «Введение в программирование на языке С (СИ)»
Курс профессиональной переподготовки «Управление в сфере информационных технологий в образовательной организации»
Курс профессиональной переподготовки «Теория и методика обучения информатике в начальной школе»
Курс повышения квалификации «Современные языки программирования интегрированной оболочки Microsoft Visual Studio C# NET., C++. NET, VB.NET. с использованием структурного и объектно-ориентированного методов разработки корпоративных систем»
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.