СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ

Благодаря готовым учебным материалам для работы в классе и дистанционно

Скидки до 50 % на комплекты
только до

Готовые ключевые этапы урока всегда будут у вас под рукой

Организационный момент

Проверка знаний

Объяснение материала

Закрепление изученного

Итоги урока

Презентация по теме "Таблицы"

Категория: Информатика

Нажмите, чтобы узнать подробности

Презентация содержит :

  • Создание таблиц
  • Параметры таблицы
  • Параметры ячеек
  • Упражнение

Просмотр содержимого документа
«Презентация по теме "Таблицы"»

Уроки HTML  Таблицы   Преподаватель: А.Н. Федорова

Уроки HTML Таблицы

Преподаватель: А.Н. Федорова

Таблицы Создание таблиц Параметры таблицы Параметры ячеек Упражнение

Таблицы

  • Создание таблиц
  • Параметры таблицы
  • Параметры ячеек
  • Упражнение
Создание таблиц   Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Таблицы используются для упорядочения и представления данных. Для добавления таблицы на веб-страницу используется тег  .  Таблица должна содержать хотя бы одну строку и колонку.   Задать ширину таблицы можно в пикселах и процентах.  Значение, заданное в пикселах, является фиксированным значением. В этом примере ширина всегда будет занимать 250 пикселов в окне браузера.

Создание таблиц

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

Для добавления таблицы на веб-страницу используется тег

.

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

В этом примере ширина всегда будет занимать 250 пикселов в окне браузера.

Создание таблиц   Пример самой простой таблицы, имеющей всего одну строку и одну колонку: Эта табличка в виде кода выглядит так:             Привет :-)          Привет :-)

Создание таблиц

Пример самой простой таблицы, имеющей всего одну строку и одну колонку:

Эта табличка в виде кода выглядит так:

  
  Привет :-)   

Привет :-)

Создание таблиц   Для добавления строк используются теги  и  .  Чтобы разделить строки на колонки применяются теги  и  . Таблица с двумя колонками (используем теги  и  ):   Она имеет следующий код:          Привет :-)         Пока!            Привет :-) Пока!

Создание таблиц

Для добавления строк используются теги и . Чтобы разделить строки на колонки применяются теги и .

Таблица с двумя колонками (используем теги и ):

Она имеет следующий код:

     
   Привет :-)   Пока!      

Привет :-)

Пока!

Создание таблиц   Для добавления строк используем теги  и    Данная таблица имеет две стоки и два столбца: Весна Лето Зима Осень Код таблицы будет выглядеть следующим образом:        Весна       Лето           Зима       Осень

Создание таблиц

Для добавления строк используем теги и

Данная таблица имеет две стоки и два столбца:

Весна

Лето

Зима

Осень

Код таблицы будет выглядеть следующим образом:

           
Весна Лето
Зима Осень

Параметры таблицы   Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге

Параметры таблицы

Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге

Параметры таблицы

Параметры таблицы

Параметры ячеек   С помощью параметров ячеек можно изменять вид и оформление таблиц.  Параметры, которые могут быть добавлены к тегам  и  .

Параметры ячеек

С помощью параметров ячеек можно изменять вид и оформление таблиц. Параметры, которые могут быть добавлены к тегам

и
.

Параметры таблицы   Параметры, которые могут быть добавлены только к тегу  .

Параметры таблицы

Параметры, которые могут быть добавлены только к тегу

.

Пример таблицы   Времена года Весна Лето Осень Зима Рассмотрим ее код:           Времена года       Весна       Лето           Осень       Зима

Пример таблицы

Времена года

Весна

Лето

Осень

Зима

Рассмотрим ее код:

              
Времена года Весна Лето
Осень Зима

Пример ячеек   Времена года Весна Лето Осень Зима В данном случае было задано для всей таблицы : border=5 - толщина рамки таблицы в 5 пикселей; bordercolor=#FAD0D0 - цвет рамки таблицы розовый; cellpadding=7 - расстояние между ячейками и их содержимым; width=40% - ширина таблицы в процентах от всего окна браузера; Для ячеек: width=20% - ширина ячейки от всей ширины таблицы. Ширина ячейки

Пример ячеек

Времена года

Весна

Лето

Осень

Зима

В данном случае было задано для всей таблицы :

  • border=5 - толщина рамки таблицы в 5 пикселей;
  • bordercolor=#FAD0D0 - цвет рамки таблицы розовый;
  • cellpadding=7 - расстояние между ячейками и их содержимым;
  • width=40% - ширина таблицы в процентах от всего окна браузера;

Для ячеек:

  • width=20% - ширина ячейки от всей ширины таблицы. Ширина ячейки "Весна" будет равна ширине ячейки "Осень".
  • align=center - размещение текста по центру. По умолчанию текст в ячейке будет расположен слева.
  • rowspan=2 - задание высоты ячейки "Времена года" в две строки.
Создайте по образу скриншота таблицу с соблюдением всех правил оформления таблицы. Выложите получившийся файл в личный каталог и откройте Вашу страничку в браузере. Упражнение 4

Создайте по образу скриншота таблицу с соблюдением всех правил оформления таблицы.

Выложите получившийся файл в личный каталог и откройте Вашу страничку в браузере.

Упражнение 4