Здравствуйте, уважаемые слушатели. Сегодня рассмотрим тему работы с таблицами и списками. Следует сказать, что таблицы часто используются для визуализации каких-то данных. Рассмотрим такой тег как table. Border - его атрибут. Посмотрим данный пример в браузере. Здесь у нас одна строка и одна ячейка. Если используем еще одну ячейку, то данная строка у нас расширится. Здесь показано, как формируются таблицы. Посмотрим, как это работает в реальном примере. Обратите внимание на 14 строку. Здесь мы создаем таблицы. Здесь одна строка и 3 ячейки. Посмотрим дальше. У нее будет 2 строки и 3 ячейки. Запустим. Посмотрим на тег <th>. Он описывает специальный вид заглавных ячеек. Смотрим, как это работает. Создаем одну строку и три ячейки. Запустим. У нас имя и телефон выделены жирным шрифтом. На 13 строке создаем таблицу. На 15 – 17 строках мы используем те <th>, поэтому наш текст выделен жирным. На 27 строке также создаем таблицу. Каждая первая ячейка помечена тегом <th>. Запустим.

Далее рассмотрим использование тега <caption>. Посмотрим на примерах. Запустим пример.

Очень важный момент в нашей теме – это создание пустых ячеек. В данном случае нужно использовать тег nbsp;. Видите, здесь мы не используем данный тег. Давайте запустим. Получили довольно неплохое отображение. Это был Chrome. Давайте сменим браузер. Такой результат нам не подходит.

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

Теперь поговорим об атрибуте border. На 12, 25 и 37 строках мы задаем данный атрибут. Запустим и посмотрим. Он задает границы таблицы. Отметим, что он мало используется веб-разработчиками.

Для того, чтобы не видеть линии таблицы, нужно не указывать атрибут border.

Рассмотрим еще несколько атрибутов. Давайте рассмотрим их подробнее. Атрибут Cellspacing. Стрелочки – это и есть работа нашего атрибута. Запустим.

Посмотрим, как это реализовано. В первой таблице Cellspacing = 0, а во второй он равен 10 пикселям.

Атрибут cellpadding. Желтое – наша ячейка, синее – наш текст. Запустим и посмотрим. Вот второй таблице наш текст расположен на расстоянии 10 пикселей от границ ячеек.

Атрибут colspan. Используется в таблицах, состоящих из нескольких строк. Большая ячейка состоит из двух маленьких, но мы их объединили в одну.

Давайте посмотрим, как это работает. На 13й строке мы создаем таблицу. На 16й строке мы записываем объединение двух ячеек. Мы их объединим и границу сотрем. Запустим.

На 12й строке мы создаем таблицу. Далее создаем первую строку таблицы. Создаем вторую строку. На 18й строке мы задаем ширину и говорим, что туда следует записать telephone. Давайте попробуем представить, что у нас получится. В строке 18 мы указываем, что хотим создать еще одну ячейку шириной в две ячейки. Она занимает ширину двух строк. У нас получается пустое место. Для этого мы создаем еще одну строку. Давайте проверим. Да, все правильно. Telephone у нас занимает 2 ячейки. Давайте удалим 3ю строку. Вот что получится.

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

На примерах будем смотреть, как это работает.

На строке мы задаем стиль и цвет фона.

Во второй таблице мы задаем картинку в качестве фона. Давайте посмотрим.

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

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

Давайте выполним теперь классную работу. Нам требуется нарисовать таблицу. Давайте поговорим об особенностях выполнения данного задания. Вот мы видим, что эта ячейка состоит из нескольких строк. Я хочу чтобы эти линии исчезли, а также эти, и эта. Давайте попробуем сделать такую таблицу. Какой алгоритм? Первое – мы используем тег table. Мы должны создать строки. Нам нужно 4 строки. Они создаются с помощью тега <tr>. Далее создаем ячейки. Первая ячейка будет большая. Для этого у нас есть специальный атрибут. Создаем ячейку, объединенную ячейку. Мы хотим объединить ячейки всех строк. Используем атрибут rawspan. Мы хотим объединить 4 пустые ячейки. Пустоту мы отображаем с помощью ключа  . Смотрим дальше. Вторая ячейка простая. Далее. Следующая ячейка должна объединять 2 строки. Нам нужен атрибут rawspan. Мы нарисовали большую ячейку, простую маленькую и большую, объединяющую 2 строки. А что нам объединять во второй строке? Нам нужно реализовать всего одну ячейку. Давайте запишем в код и запустим. У нас пока ничего не получается. Почему ? Для таблицы должны быть указаны границы. Укажем border. Все, работает.

Зададим ширину.

Это у нас уже реализовано. Дальше нам нужно эта и эта ячейки.

Находим третью строку, вставляем и запустим.

Теперь нам осталось объединить вот здесь. Для этого используется атрибут colspan. Мы объединили эту ячейку и эту. Запустим. Все получилось. Здесь объединение строк, здесь тоже, а здесь объединение столбцов.

Рассмотрим тему Списки. Давайте посмотрим, как их создавать. Для создания упорядоченного списка понадобится тег <ol> - ordered list. Посмотрим, как это записывается.

Посмотрим теперь на атрибуты, использующиеся при записи списков.

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

Перейдем к примеру. На строке 23 начинается наш список. И что мы увидим в браузере? Вот здесь мы увидим 1, здесь - 2 и т.д.

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

Вот что у нас в окне браузера.

Следующий вид списков – неупорядоченные списки. что это значит? Сейчас разберемся. Посмотрим, как он создается. В данном случае у нас указываются черные точки перед пунктами. Посмотрим, какие символы что мы еще можем использовать.

Также мы можем устанавливать маркеры в атрибуте style, указав его свойство list-style-image:url(); .

Посмотрим, как это будет работать.

Посмотрим на примерах, как работают неупорядоченные списки. на 25й строке мы создаем такой список. Мы здесь увидим напротив каждого пункта черную точку.

Далее мы увидим черные круги напротив каждого пункта, а здесь – черные квадраты. Запустим, и посмотрим, что мы увидим в браузере.

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

Поговорим о списке определений. Для него используется такой контейнер как <dl> </dl>. Посмотрим, как такого рода списки выглядят в браузере. Посмотрим на его особенности. Запускаем. Вот у нас «кофе» и далее само определение «черный горячий напиток». Вот так работает этот список. Довольно незамысловато.

А теперь мы поговорим более дательно о цвете. Давайте поговорим о цветовых палитрах. Это – RGB и CMYK. Вторую используют больше полиграфисты.

Задавать цвет в разметке можно тремя способами.

Указав цвет соответствующей семантической единицей.

Указав цвет через его RGB значение насыщенности. Первая цифра – насыщенность цвета Red, вторая – Green, третья – Blue.

Указал шестнадцатеричный код цвета. Ставим значек # и записываем шестнадцатеричное представление некоего цвета. Вот перечень цветов в шестнадцатеричном формате.

Рассмотрим более детально, как задавать цвет в RGB. Цвет в таком формате создается смешиванием трех цветов: красного, зеленого и синего. Т.е. для формирования цвета нам нужно указать насыщенность каждого из цветов.

Вот представление цвета RGB в шестнадцатеричном формате.

Посмотрим на примеры. Первый пример покажет, как все вышесказанное использовать в нашей разметке.

Здесь мы задаем цвет фона.

Здесь задали какие-то ячейки. Далее.

На 11 строке мы задали какой-то цвет в шестнадцатеричном формате и т.д.

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

У нас получилась таблица. Здесь цвет. Здесь шестнадцатеричное представление цвета, а здесь десятичное.

Посмотрим далее. Задаем цвета. Вот что у нас получится. Это таблица, но она невидимая.

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

Заходите на наш тест-провайдер, проходите тесты. Спасибо за внимание. Всего доброго. До свидания.