Задание: самостоятельно изучите назначение перечисленных тегов
Слайд 16
Стили Тот факт, что таблица состоит из нескольких html-тегов,
помогает определить более детально, к какому элементу таблицы применить
то или иное свойство
Слайд 17
Стили: отступы Отступ – т.е. расстояние между границей элемента
и его содержимым; В данном случае, у таблицы границы –
это края ячейки; следовательно при добавлении отступов образуется свободное пространство вокруг содержимого ячейки
Отступы не применимы к таблице в целом
Примеры td, th {padding: 10px;} или td {padding: 10px 5px 3px 5px;}
Слайд 18
Стили: отступы Примеры
td { padding-top: 10px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; }
Слайд 19
Стили: выравнивание Чтобы настроить месторасположение содержимого внутри самой ячейки,
используются свойства:
text-align - по горизонтали vertical-align - по вертикали
Слайд 20
Стили: выравнивание text-align унаследованное свойство, т.е. если вы примените его
ко всей таблице, то оно применится к каждой ячейке,
находящейся внутри
Допустимые значения: left, right, center, justify
Пример table {text-align: right;}
Слайд 21
Стили: выравнивание vertical-align не унаследованное свойство, поэтому его нужно применять
непосредственно к тем объектам, которые вам необходимы
Допустимые значения: top,
baseline, middle, bottom Значение baseline позволит выровнять первую строку каждой ячейки в одной строке
Пример td {vertical-align: top;}
Слайд 22
Стили: границы Свойство border работает и с таблицами, однако
есть некоторые особенности
Применение border к выделит границей всю
таблицу, а не ее ячейки, т.е. граница будет только внешней по периметру
При применении border к ячейкам (например, td {border: 1px solid black; }) образуется видимый интервал между границами соседних ячеек – эффект двойной границы
Слайд 23
Стили: границы Управление промежутками между ячейками таблицы
Если не указано
другое, то по умолчанию браузеры расставляют в таблице интервалы
между ячейками около 2 пикселов – этот промежуток визуально заметен, если для ячеек заданы границы.
Свойство border-spacing может контролировать размер этого промежутка:
table {border-spacing: 0;}
Слайд 24
Стили: границы Удаление двойных границ
Даже если убрать промежутки между
ячейками, границы, заданные для ячеек будут удваиваться за счет
наличия соседних границ – поэтому реальная толщина будет удваиваться от заданного значения в стилях
Свойство border-collapse может принимать два значения (separate, collapse) – в первом варианте промежутки и двойные границы для соседних ячеек, во втором варианте – промежутков нет и для соседних ячеек одна линия table {border-collapse: collapse;}
Слайд 25
Стили: границы Скругленные углы
Чтобы добавить к ячейкам таблицы (но
не к самой таблице) скругленные углы, можно воспользоваться свойством
border-radius
Пример, td { border: 1px solid black; border-radius: 5px; }
Слайд 26
Стили: границы ВАЖНО:
Если для свойства border-collapse установить значение collapse,
то свойство border-spacing работать не будет
Если для свойства border-collapse
установить значение collapse, то свойство border-radius работать не будет
Таблице и ячейкам можно назначать свойство box-shadow
Слайд 27
Стили: строки, столбцы Чередование по цвету строк в таблице
– один из распространенных способов увеличить читабельность и воспринимаемость
информации
Используя селектор nth-of-type можно выбрать нужные элементы
Пример tr:nth-of-type(odd) {background-color: red;} tr:nth-of-type(even) {background-color: blue;}
добавляет четным и нечетным строкам свой фон
Слайд 28
Стили: строки, столбцы Можно усложнять используемые селекторы
Пример .products tr:nth-of-type(odd) {background-color:
red;} .products tr:nth-of-type(even) {background-color: blue;}
добавляет четным и нечетным строкам
свой фон
Слайд 30
Таблица
Анализ задачи:
ВЕДОМОСТЬ
Слайд 31
Создание таблицы Шаг 1. Добавляем заголовок
В код: Ведомость
В стили: .hd { font-size:
20px; font-family: Arial; font-weight: bold; color: #0069b4; text-align: center; }
Слайд 33
Создание таблицы Шаг 2. Каркас таблицы В код:
В стили: .table { width:80%;
border:1px solid black; }
Слайд 35
Создание таблицы Шаг 3. Шапка таблицы (первая строка) В код:
class=‘tableHead’> № п.п. ФИО Оклад Премия Всего
Слайд 36
Создание таблицы Шаг 4. Шапка таблицы (вторая строка) В код:
class=‘tableHead’> % Сумма
В стили: .tableHead { background-color:#ccccff; text-align:center; }
Слайд 38
Создание таблицы Шаг 5. Данные таблицы В код:
1
Иванов И.И. 550 000 р. 50%
275 000 р. 825 000 р. |
2 | Сидоров Ф.К. | 700 000 р. | 100% | 700 000 р. | 1 400 000 р. |
Слайд 40
Создание таблицы Шаг 6. Итого В код:
ИТОГО 2 225 000 р.
В стили: .result { background-color:#ccccff; }
Слайд 42
Оформление таблицы Шаг 1. Выравниваем таблицу по центру; к
уже имеющемуся описанию стилей добавим margin-left: auto; margin-right:auto; и уберем временно границы
(все равно они не совсем такие, как в задании) В стили: table { width:80%; margin-left: auto; margin-right:auto; border:0; }
Слайд 44
Оформление таблицы Шаг 2. Выставляем отступы и рамки у
ячеек
В стили: td { padding: 5px; border: 1px solid black; }
Слайд 46
Оформление таблицы Шаг 3. Убираем отступы между ячейками. Добавим
в описание стилей: padding:0; border-collapse: collapse; В стили: .table { width:80%; margin-left: auto; margin-right: auto; border:0; padding:0; border-collapse: collapse; }
Слайд 47
Примечание Значение collapse - соединяет рамки , склеивая ячейки таблицы. Значение separate - наоборот,
формирует рамки отдельно для каждой ячейки. Это же значение
является значением по умолчанию.
Слайд 49
Оформление таблицы Шаг 4. Выбираем шрифт и его размер
Добавляем
к CSS table font:16px Verdana;
Добавляем к CSS .tableHead font-size: 18px;
Слайд 51
Оформление таблицы Шаг 5. Уберем ненужные линии для пустых
ячеек
Зададим для пустых ячеек класс .zero; внесем изменения для
последней строки: В код:
| | | | ИТОГО | 2 225 000 р. | В стили: .zero { border-left:0px; border-right:0px; border-bottom:0px; }
Слайд 53
Вложенность таблиц
Вложенная таблица Допустимо размещать одну таблицу в другой
(степень вложенности в пределах разумного)
Слайд 54
Задание Создайте таблицу из 5 строк и 6 столбцов; объедините
некоторые из ячеек по горизонтали / по вертикали; вставьте в
две произвольные ячейки по таблице 3Х3; опишите через стили параметры для созданной таблицы таким образом, чтобы по стилю вложенные таблицы отличались от основной таблицы (на ваше усмотрение).
Слайд 55
Таблицы на web-страницах Табличная верстка web-страниц считается недопустимой.
Таблицы используются
при верстке только в обоснованных ситуациях: - наличие на странице
контента, оформленного в виде таблицы; - оформление части веб-структуры в виде таблицы и т.п.;
|