HTML таблицы+img

Содержание

Слайд 2

Содержание

Оформление таблиц
Продвинутые техники редактирования таблиц
Мультимедиа и встраивание - тег img

Содержание Оформление таблиц Продвинутые техники редактирования таблиц Мультимедиа и встраивание - тег img

Слайд 3

Что такое таблица ?

Таблица - это структурированный набор данных, состоящий из строк

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

Слайд 4

Оформление таблиц

Чтобы эффективно представлять таблицы в веб, необходимо придать им хорошую структуру

Оформление таблиц Чтобы эффективно представлять таблицы в веб, необходимо придать им хорошую
в HTML и применить к ним таблицы стилей (CSS).

Слайд 5

Когда не надо использовать таблицы HTML?

HTML-таблицы следует использовать для табличных данных —

Когда не надо использовать таблицы HTML? HTML-таблицы следует использовать для табличных данных
это то, для чего они предназначены.
Многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное.
Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда всё же попадается.
Использование таблиц в целях оформления вместо методов CSS является плохой идеей.

Слайд 6

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

Таблицы, используемые для

Причины по которым следует избегать использование таблиц для оформления сайта Таблицы, используемые
оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением: Скринридеры (Screenreaders), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.
Таблицы создают путаницу тегов: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.
Таблицы не реагируют автоматически на тип устройства: У надлежащих контейнеров (например, 
, 
, 
, или 
) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.

Слайд 7

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

Содержимое любой таблицы заключается между двумя тегами :
 

.
Самым маленьким контейнером

Пример таблицы Содержимое любой таблицы заключается между двумя тегами : . Самым
в таблице является ячейка, она создаётся элементом  ('td' - сокращение от 'table data'). Введите внутри тегов table следующее:
Hi, I'm your first cell.
Чтобы получить строку из четырёх ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом:
Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.
Ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки.
Каждый элемент  создаёт отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.
Чтобы эта строка перестала расти, а новые ячейки перешли на вторую строку, необходимо использовать элемент  ('tr' - сокращение от 'table row')

Слайд 8

Добавление заголовков с помощью элементов

Чтобы опознавать заголовки таблицы в качестве заголовков,

Добавление заголовков с помощью элементов Чтобы опознавать заголовки таблицы в качестве заголовков,
визуально и семантически, можно использовать элемент  ('th' сокращение от 'table header').
Он работает в точности как , за исключением того, что обозначает заголовок, а не обычную ячейку.
Замените в своём HTML все элементы , содержащие заголовки, на элементы .
Сохраните HTML и загрузите его в браузер, и вы увидите, что заголовки теперь выглядят как заголовки.
По умолчанию к заголовкам таблицы применяется определённый стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.
Заголовки дают дополнительное преимущество — вместе с атрибутом scope они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно

Слайд 9

Слияние нескольких строк или столбцов

Иногда нам нужно, чтобы ячейки распространялись на несколько

Слияние нескольких строк или столбцов Иногда нам нужно, чтобы ячейки распространялись на
строк или столбцов. Возьмём простой пример, в котором приведены имена животных.
Иногда бывает нужно вывести имена людей рядом с именами животных.
А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.
Исходная разметка выглядит так:






Animals
Hippopotamus
Horse Mare
Stallion
Crocodile
Chicken Cock
Rooster

Слайд 10

Атрибуты colspan и rowspan

Нужно, чтобы  "Animals", "Hippopotamus" и "Crocodile" распространялись на два столбца, а "Horse"

Атрибуты colspan и rowspan Нужно, чтобы "Animals", "Hippopotamus" и "Crocodile" распространялись на
и "Chicken" - на две строки.
Табличные заголовки и ячейки имеют атрибуты colspan и rowspan, которые позволяют это сделать.
Оба принимают безразмерное числовое значение, которое равно количеству строк или столбцов, на которые должны распространяться ячейки. Например, colspan="2" распространяет ячейку на два столбца.

Слайд 11

Стилизация столбцов

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

Стилизация столбцов HTML позволяет указать, какой стиль нужно применять к целому столбцу
сразу — для этого применяют элементы   и .
Их ввели, поскольку задавать стиль для каждой ячейки в отдельности или использовать сложный селектор вроде :nth-child() (en-US) было бы слишком утомительно.
Возьмём простой пример:





Data 1 Data 2
Calcutta Orange
Robots Jazz

Слайд 12

Элемент CSS :nth-child()

The :nth-child() CSS pseudo-class сопоставляет элементы на основе их положения в группе братьев и

Элемент CSS :nth-child() The :nth-child() CSS pseudo-class сопоставляет элементы на основе их
сестер.
/* Selects the second
  • element in a list
    */ li:nth-child(2) { color: lime; } /*
    Selects every fourth element among any group of siblings
    */ :nth-child(4n) { color: lime; }
    Syntax
    :nth-child() принимает один аргумент, который описывает шаблон для сопоставления индексов элементов в списке братьев и сестер. Индексы элементов основаны на 1.
    Keyword values
    odd Представляют элементы, числовое положение которых в ряду братьев и сестер нечетно: 1, 3, 5 и т.д.
    even Представляют элементы, числовое положение которых в ряду братьев и сестер четно : 2, 4, 6, etc.

    • Слайд 13

    Альтернатива стиля столбцов

    Нам пришлось повторить информацию о стиле для всех трёх ячеек

    Альтернатива стиля столбцов Нам пришлось повторить информацию о стиле для всех трёх
    в столбце (в реальном проекте, возможно, придётся вводить class для всех трёх и вводить правило в таблице стилей).
    Вместо этого, мы можем задать информацию один раз, в элементе . Элемент  задаётся в контейнере  сразу же за открывающим тегом .
    Эффект, который мы видели выше, можно задать так:
    span



    span Data 1 Data 2 Calcutta Orange Robots Jazz Мы определяем два

    Data 1Data 2
    Calcutta Orange
    Robots Jazz

    Мы определяем два "стилизующих столбца". Мы не применяем стиль к первому столбцу, но пустой элемент  ввести необходимо — иначе ко 2 столбцу не будет применён стиль.
    Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент  с атрибутом span, таким образом:



    Подобно colspan и rowspan, span принимает безразмерное числовое значение, указывающее, к какому количеству столбцов нужно применить данный стиль.

    Слайд 15

    Таблица для редактированния

    School timetable

    School timetable

      Mon Tues Wed Thurs Fri Sat Sun
    1st period English     German Dutch    
    2nd period English English   German Dutch    
    3rd period   German   German Dutch    
    4th period   English   English Dutch    


    Слайд 16

    Тренировка

    Добавьте элемент  вверху таблицы, сразу же под тегом 

    , куда вы сможете вставлять элементы .
    ПервыеТренировка Добавьте элемент вверху таблицы, сразу же под тегом , куда вы
    два столбца надо оставить без стиля..
    Добавьте цвет фона для третьего столбца. Значением атрибута style будет  background-color:#97DB9A;
    Задайте ширину для четвёртого столбца. Значением атрибута style будет width: 42px;
    Добавьте цвет фона для пятого столбца. Значением атрибута style будет background-color: #97DB9A;
    Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведёт новый класс. Значениями атрибута style будут: background-color:#DCC48E; border:4px solid #C1437A;
    Последние два дня выходные; значением атрибута style будет width: 42px;

    Слайд 17

    CSS: border-collapse

    Свойство CSS "Свернуть границы" задает, имеют ли ячейки внутри <таблицы> общие

    CSS: border-collapse Свойство CSS "Свернуть границы" задает, имеют ли ячейки внутри общие
    или отдельные границы.
    Когда ячейки свернуты, значение стиля границы вставки ведет себя как канавка, а начало ведет себя как гребень.
    Когда ячейки разделены, расстояние между ячейками определяется свойством border-spacing.
    Syntax
    /* Keyword values */
    border-collapse: collapse;
    border-collapse: separate;
    /* Global values */
    border-collapse: inherit;
    border-collapse: initial;
    border-collapse: revert;
    border-collapse: unset;

    Слайд 18

    Продвинутые техники редактирования таблиц

    Далее рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие

    Продвинутые техники редактирования таблиц Далее рассматриваем ещё несколько продвинутых возможностей в HTML
    как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.

    Слайд 19

    Добавление заголовка к таблице с помощью 

     элемента, строку "SUM" внутрь  элемента и оставшийся контент внутрь  элемента.
    Сохраните, перезагрузите и вы увидите, что добавление элемента  привело к тому,  что строка "SUM" опустилась к нижней части таблицы.
    Далее, добавьте атрибут colspan, чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.
    Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в  вашего HTML документа вы увидите пустой элемент 

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

    в элементе 
     и этот элемент необходимо поместить внутрь  элемента  (en-US). Причём вам нужно поместить его сразу после открытия тега 
    .
    ...
    Dinosaurs in the Jurassic period

    Заголовок отражает в себе описание контента таблицы.
    Это полезно для всех читателей просматривающих страницу и желающих получить краткое представление от том полезна ли для них таблица,  что особенно важно для слепых пользователей.
    Вместо того чтобы читать содержимое множества ячеек чтобы понять о чем таблица, он или она могут полагаться на заголовок и принимать решение читать ли таблицу более подробно.
    Заголовок помещают сразу после тега .
    Примечание: Атрибут summary (en-US) также может быть использован в 
     элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать , и 

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

    полезно дать им более структурированное определение.
    Отличный способ  сделать это используя 
    (en-US),  и  (en-US), которые позволяют вам разметить header, footer и body секции таблицы.
    Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании.
    Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице.
    Далее несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.

    Слайд 21

    Использование

    , :

    Элементом 

     нужно обернуть часть таблицы которая относится к заголовку — обычно этоИспользование , : Элементом нужно обернуть часть таблицы которая относится к заголовку
    первая строка содержащая заголовки колонок, но это не обязательно.
    Если вы используете 
    /(en-US) элемент, тогда заголовок должен находиться ниже его.
    Элементом  нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы.
    Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер всё равно отобразит его внизу таблицы).
     

    Элементом 

     необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footerЭлементом необходимо обернуть остальную часть содержимого таблицы которая не находится в header
    таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать 
    Примечание: 
     всегда включён в каждой таблице, неявно если не укажете его в коде.
    Проверьте это, открыв один из примеров в котором не используется  и посмотрите HTML код в browser developer tools — вы увидите, что браузер добавил этот тег самостоятельно.
    Это даёт больше контроля над структурой таблицы и стилем.

    Слайд 23

    Пример



    My spending record

    Пример My spending record My spending record How I chose to spend

    My spending record

     элемент, так как summary deprecated в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).

    Слайд 20

    Добавление структуры с помощью 
    How I chose to spend my money
    Purchase Location Date Evaluation Cost (€)
    SUM 118
    Haircut Hairdresser 12/09 Great idea 30
    Lasagna Restaurant 12/09 Regrets 18
    Shoes Shoeshop 13/09 Big regrets 65
    Toothpaste Supermarket 13/09 Good 5



    Слайд 24

    Упражнение: Добавление структуры таблицы

    Попробуйте открыть это в браузере — вы увидите, что

    Упражнение: Добавление структуры таблицы Попробуйте открыть это в браузере — вы увидите,
    все выглядит классно, но могло бы быть лучше. Строка "SUM" которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.
    Поместите очевидную строку заголовка внутрь