Добавить материал

и получить 10 документов
и свидетельство СМИ

Изображение пользователя Юркова Елена Анатольевна Юркова Елена Анатольевна

HTML программирование

  • Презентации учебные
  • ppt
  • 25.10.2019
Публикация в СМИ для учителей

Публикация в СМИ для учителей

Бесплатное участие. Свидетельство СМИ сразу.
Мгновенные 10 документов в портфолио.

Добавить материал
Материал позволяет научится размещать таблицы на сайтах с помощью HTML кода, осуществлять работу с таблицами и элементами таблицы, задавать размеры таблицы, верстать страницы с использованием таблицы, рассказывает, как выравнивать текст, новые атрибуты для формирования таблиц, приведены примеры использования новых тегов и атрибутов.
Иконка файла материала занятие5.ppt
Таблицы Помимо прочих объектов в свой сайт Вы можете вставить таблицы..  и  сразу  забегая  вперёд  скажу  о  том  что  они  имеют  не  малую  значимость  при  создании  сайта.  С  помощью  таблицы  можно  не  только  выложить  ту  или  иную  информацию,  тарифную  сетку  или  график  дежурств  к  примеру,  но  и  взяв  её  за  основу  полностью  построить на ней свой сайт, таблицы порой незаменимы при верстке  страницы,  но  об  этом  позже.  А  сейчас  давайте  научимся  её  рисовать..
Рисуем таблицу Тег  задаёт начало и конец таблицы, любая таблица, как  известно, состоит из строк и столбцов, для этого есть ещё два тега:  ­ строка таблицы              
 ­ столбец таблицы Вместе эти теги пишутся так:
ячейка
Такая запись это самая маленькая таблица, в ней всего одна  строка, содержащая один столбец ­ ячейку Поставим перед собой задачу нарисовать таблицу из трёх строк и  трёх столбцов, а заодно вспомним атрибут border "рамка", который  добавит нам наглядности.
   Таблица   
строка1 ячейка1строка1 ячейка2строка1 ячейка3
строка2 ячейка1строка2 ячейка2строка2 ячейка3
строка3 ячейка1строка3 ячейка2строка3 ячейка3
Объединение ячеек.  Часто при работе с таблицами возникает необходимость  объединить те или иные ячейки в одну.  На самом деле слово "объединить" здесь неуместно,  использовал я его лишь для того, что бы вызвать ассоциации в  Вашей голове. Вспомните тот же Word, добавив там таблицу  Вы выделяете нужные ячейки и нажимаете кнопку  "объединить".. здесь всё происходит не совсем так, и  правильнее было бы говорить не "объединить" а "растянуть".  Эту задачу решают атрибуты colspan и rowspan colspan ­  определяет какое количество столбцов будет занимать  данная ячейка  rowspan ­ количество рядов занимаемое ячейкой  Предположим что в нашем примере нам необходимо  "объединить" в третьей строке вторую и третью ячейку, для  этого атрибуту colspan присваиваем значение 2 (растянуть на  два столбца) и вставляем его в нужное место.
   Таблица      строка1 ячейка1  строка1 ячейка2  строка1 ячейка3    строка2 ячейка1  строка2 ячейка2  строка2 ячейка3    строка3 ячейка1  строка3 ячейка2  строка3 ячейка3 
  Как видите ячейка растянулась на два столбца, но при  этом сдвинула третью ячейку, которая собственно нам  теперь не нужна, а по сему мы её просто напросто  удаляем. Специально допустил эту оплошность, чтобы  Вы поняли принцип данного действия.
Исправленный пример:    Таблица      строка1 ячейка1  строка1 ячейка2  строка1 ячейка3    строка2 ячейка1  строка2 ячейка2  строка2 ячейка3    строка3 ячейка1  строка3 ячейка2 
  Теперь попробуем объединить весь первый столбец в  одну ячейку, используя атрибут rowspan, ну точнее  растянем ячейку первой строчки первого столбца на три  строки и на сей раз сразу уберём лишнее.    Таблица      строка1 ячейка1  строка1 ячейка2  строка1 ячейка3 
  строка2 ячейка2  строка2 ячейка3    строка3 ячейка2    
Размеры таблицы.  Если Вы самостоятельно тренировались с рисованием  таблицы то наверняка обратили внимание на то, что  размеры таблицы и ячеек по умолчанию ограничены  вставленным в неё текстом.. и "ползают" себе как хотят.  Вспомните про атрибуты width ­ ширина и height ­ высота,  которые мы использовали для растягивания рисунков,  они так же применимы к тегам , и   строка1 ячейка1  строка1 ячейка2     строка2 ячейка2     строка3 ячейка2 
. С  этими атрибутами Вы знакомы, так что рассусоливать не  буду.. просто приведу пример. В нём заданы размеры  таблицы и отдельных её ячеек, а заодно и вся таблица  выровнена по центру знакомым тегом 
 Пример:
   Таблица   
строка1 ячейка3
строка2 ячейка3
 
 Обратите внимание на то, что длина и ширина заданы не для  всех ячеек. А зачем? Если и так таблица будет выровнена по  самым широким и длинным ячейкам.. на то она и таблица..  Еще не всё рассказал..  Значения атрибутов width и height в таблице могут указываться  не только в пикселях, но и в процентах  Вот пример:    Таблица   
 строка1 ячейка1  строка1 ячейка2  строка1 ячейка3    строка2 ячейка1  строка2 ячейка2
 строка2 ячейка3    строка3 ячейка1  строка3 ячейка2  строка3 ячейка3       В этом примере от общей ширины таблицы в 640 пикселей мы  отдали 15% первой ячейке, 25% второй и 60% третьей. А по  высоте из 480 пикселей по 25% первой и третьей строчке, а  добрую половину места второй.. Короче справедливости в  мире нет.. Ну до это Вам решать, сколько кому места  отчуждать, главное, чтобы в сумме было 100%, иначе  неразбериха будет.. смутное время.. революция..
Верстка страницы с использованием таблицы. Посмотрите на этот пример с таблицей, он Вам ничего не  напоминает??    Верстка страницы   
 
Заголовок
  
кнопка1
кнопка2
кнопка3
кнопка4
кнопка5
   содержание: 
куча текста
      Как видите, таблица это хороший и главное удобный  инструмент для верстки страницы..  Любая ячейка таблицы может служить самостоятельной  ёмкостью для наполнения другими тегами и текстовым  содержанием, а также иметь те или иные индивидуальные  свойства ­ атрибуты.  Давайте освежим в голове уже пройденный материал,  применив эти знания к таблице. Покажу на примерах, мы это  уже проходили..  Добавим красок:
   Таблица и краски   
  1  2  3    4  5  6    7  8  9 
Выровняем текст: Здесь появляется новый атрибут valign ­ Вертикальное  выравнивание. До этого момента нам был знаком атрибут  align ­ горизонтальное выравнивание.    Выравнивание в таблице   
  1 
2
3    4 
5
6
   7 
8
9      Теперь о новых атрибутах. Cellspacing ­ задаёт расстояние в пикселях между ячейками таблицы. Задав  значение cellspacing="0" можно избавиться от "зазора" между ячейками. Пример, увеличим "зазор":
Расстояние между ячейками
1
2
3 4
5
6 7
8
9 Атрибут cellpadding (не путайте с cellspacing) ­ в пикселях задаёт  поля ячеек (отступ от границ ячеек до текста) Пример: Поля таблицы
1
2
3
4
5
6 7
8
9 Отдельно, пожалуй, еще следует обратить внимание на так  называемые вложенные таблицы, я уже говорил про то, что  каждая отдельно взятая ячейка может служить емкостью  для других тегов.. и тег  не является исключением. По  сути можно вставить одну таблицу в другую..
Смотрим пример: Вложенная таблица
Заголовок
содержание:


В одну ячейку вложена целая таблица!!


1
2
3 4
5
6 7
8
9
Такой вот растянутый код получился… Сложно? Запутанно?  Может быть на первый взгляд оно так и есть, но ведь не зря  же я приводил столько примеров! Если что то не понятно  вернитесь назад, перечитайте, идите от простого к более  сложному и тогда всё станет на свои места! Практика ­ залог  успеха. Не ленитесь, пробуйте писать код самостоятельно.. Ну и уже по традиции подвожу итог главы.. Итак, что у Вас там  за страничка получилась..? У меня она уже вот такая: Мой первый сайт 
Здесь мои фотки!! мне!!!
Обо 
Напишите мне  письмо..
   Разрешите представиться Карлсон! который  живет на крыше.
Спокойствие! Только спокойствие! подумаешь с жильём  проблемы..
 Я ­ умный, красивый, в меру упитанный  мужчина, в полном расцвете сил! Женщины сходят по мне  сходят с ума.. эх.. какая досада.. в общем со мной не  соскучишься..

   По телевизору показывают жуликов... Ну  чем я хуже?! ­ так что вот решил сделать свою страничку!

   Хочу здесь найти себе новых друзей, для  Малыш…

того чтобы вместе гулять по крышам!

   Я очень очень сильно люблю  варенье !!! С нетерпеньем  буду ждать Вашего приглашения на чай.. побалуемся  плюшками… пошалим…

Прилечу!!

  Ну зачем тебе этот щенок? Я же лучше,

Полезные советы: При создании больших сложных таблиц рекомендую сначала  рисовать их на бумаге. Так будет удобнее представить её общую  картину, подсчитать количество строк и столбцов, увидеть с  какой ячейки и на какое количество следует растягивать  "объединять" те или иные ячейки. При выборе будущих размеров Вашей страницы, особенно это  касается её ширины (атрибут width), ориентируйтесь на  стандартные разрешения мониторов 640 на 480, 800 на 600,  1024 на 768… Но самое главное помните, что у разных  пользователей в зависимости от их мониторов и зрения  выставлены разные разрешения и если указанные Вами размеры  будут выходить за их рамки то соответственно на экранах таких  пользователей будут появляться полосы прокрутки.  Вертикальная полоса это беда нестрашная, благо колёсико на  мышке придумали, да и пишут у нас слева направо, а не сверху  вниз.. а вот горизонтальная полоса прокрутки уже вызывает  значительные неудобства при чтении страницы.. Так что не  советую указывать большую ширину страницы. По­моему ширина  в 1024 пикселей будет оптимальным размером… хотя… ну да  ладно.. решайте сами.

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

Посмотрите также