Занятие 3
Теги для освоения:
<html>
<title>
<body>
<p>
<br />
<h1>
<h2>
<h3>
<i>
<u>
<b> <strong>
<ol>
<ul>
<img>
<a>
Отчёт: html-код проделанной работы.
Занятие 4
Теги для освоения:
<table>
<tbody>
<tr>
<td>
<div>
Для всех элементов таблицы доступны глобальные атрибуты, а также собственные атрибуты.
Создание таблиц в HTML
- Содержание:
- 1. Как создать таблицу
- 2. Как создать строки (ряды) таблицы
- 3. Как сделать ячейку заголовка столбца таблицы
- 4. Как сделать ячейку тела таблицы
- 5. Как добавить подпись (заголовок) к таблице
- 6. Группирование строк и столбцов таблицы <colgroup> и <col>
- 7. Группировка разделов таблицы <thead>, <tbody> и <tfoot>
- 8. Как объединить ячейки таблицы
- 9. Атрибуты элементов таблицы
- 10. Пример создания таблицы
1. Как создать таблицу
Таблица создаётся при помощи элемента <table></table>, который является контейнером для элементов таблицы и все элементы должны находиться внутри него.
Например, с помощью данной разметки можно создать таблицу, состоящую из двух столбцов и двух строк:
<table>
<tr><th>текст заголовка</th><th>текст заголовка</th></tr> <!--ряд с ячейками заголовков-->
<tr><td>данные</td><td>данные</td></tr> <!--ряд с ячейками тела таблицы-->
</table>
текст заголовка | текст заголовка |
---|---|
данные | данные |
По умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью свойства border:
/* внешние границы таблицы серого цвета толщиной 1px */
table {
border: 1px solid grey;
}
/* границы ячеек первого ряда таблицы */
th {
border: 1px solid grey;
}
/* границы ячеек тела таблицы */
td {
border: 1px solid grey;
}
Промежутки между ячейками таблицы убираются с помощью свойства table {border-collapse: collapse;}.
Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width:
/* сделает ширину таблицы равной ширине блока контейнера, в котором она находится */
table {
width: 100%;
}
/* задаст фиксированную ширину для таблицы */
table {
width: 600px;
}
Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения: padding-left и padding-right, ширина border-left плюс ширина border-right последней ячейки в ряду.
Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.
2. Как создать строки (ряды) таблицы
Строки или ряды таблицы создаются с помощью элемента <tr>. Количество горизонтальных строк таблицы определяется количеством элементов <tr></tr>.
3. Как сделать ячейку заголовка столбца таблицы
Элемент <th> создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством элементов <th></th>. Для элемента доступны атрибуты colspan, rowspan, headers.
<table>
<tr><th>ячейка заголовка</th><th>ячейка заголовка</th></tr>
</table>
4. Как сделать ячейку тела таблицы
Элемент <td> создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Элементы <td></td>, расположенные в одном ряду, определяют количество ячеек в строке таблицы.
Количество пар ячеек <td> должно быть равно количеству пар ячеек <th>. Для элемента доступны атрибуты colspan, rowspan, headers.
<table>
<tr><th>ячейка заголовка</th><th>ячейка заголовка</th></tr>
<tr><td>ячейка тела таблицы</td><td>ячейка тела таблицы</td></tr>
</table>
5. Как добавить подпись (заголовок) к таблице
Элемент <caption> создает подпись таблицы. Добавляется непосредственно после тега <table>, вне строки или ячейки.
<table>
<caption>Перечень продуктов</caption>
<tr>
<th>№ п/п</th>
<th>Наименование товара</th>
<th>Ед. изм.</th>
<th>Количество</th>
<th>Цена за ед. изм., руб.</th>
<th>Стоимость, руб.</th>
</tr>
<tr>
<td>1.</td>
<td>Томаты свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>
</tr>
<tr>
<td>2.</td>
<td>Огурцы свежие</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>
</tr>
<tr>
<td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td>
</tr>
</table>
6. Группирование строк и столбцов таблицы
Элемент <colgroup> создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки.
Добавляется непосредственно после тегов <table> и/или <caption>.
Элемент <col> формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре, т.е. не содержащие информацию одного типа. Позволяет задавать свойства столбцов для каждого столбца в пределах элемента <colgroup>.
С помощью атрибута style можно изменить основной цвет фона ячеек. Для элемента <col> доступен атрибут span, задающий количество столбцов для объединения.
<table>
<colgroup>
<col span="2" style="background:Khaki"><!-- С помощью этой конструкции задаем цвет фона для первых двух столбцов таблицы-->
<col style="background-color:LightCyan"><!-- Задаем цвет фона для следующего (одного) столбца таблицы-->
</colgroup>
<tr>
<th>№ п/п</th>
<th>Наименование</th>
<th>Цена, руб.</th>
</tr>
<tr>
<td>1</td>
<td>Карандаш цветной</td>
<td>20,00</td>
</tr>
<tr>
<td>2</td>
<td>Линейка 20 см</td>
<td>30,00</td>
</tr>
</table>
7. Группировка разделов таблицы
Элемент <thead> создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами <tbody> и <tfoot> для указания каждой части таблицы.
Элемент должен быть использован в следующем порядке: как дочерний элемент <table>, после <caption> и <colgroup>, и перед <tbody>, <tfoot> и <tr> элементами. В пределах одной таблицы можно использовать один раз.
Элемент <tbody> группирует основное содержимое таблицы. Используется в сочетании с элементами <thead> и <tfoot>.
Элемент <tfoot> создает группу строк для представления информации о суммах или итогах, расположенную в нижней части таблицы. Используется в таблице один раз. Располагается после элемента <thead>, перед элементами <tbody> и <tr>.
<table>
<thead>
<tr>
<th>№ п/п</th>
<th>Наименование товара</th>
<th>Ед. изм.</th>
<th>Количество</th>
<th>Цена за ед. изм., руб.</th>
<th>Стоимость, руб.</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1.</td>
<td>Томаты свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>
</tr>
<tr>
<td>2.</td>
<td>Огурцы свежие</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>
</tr>
</tbody>
</table>
Такая группировка строк была заложена в стандарте в расчете на то, что обозреватели при отображении длинных таблиц обеспечат прокрутку строк данных при сохранении надзаголовка и подзаголовка неподвижными, а при их выводе на принтер смогут использовать надзаголовок и подзаголовок в качестве колонтитулов страницы. Однако, современные обозреватели этого не делают и либо просто отображают <thead> и <tfoot> как строки данных, либо, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы.
8. Как объединить ячейки таблицы
Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.
<table>
<tr>
<th>№ п/п</th>
<th>Наименование товара</th>
<th>Ед. изм.</th>
<th>Количество</th>
<th>Цена за ед. изм., руб.</th>
<th>Стоимость, руб.</th>
</tr>
<tr>
<td>1.</td>
<td>Томаты свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>
</tr>
<tr>
<td>2.</td>
<td>Огурцы свежие</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>
</tr>
<tr>
<td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td><!-- Задаем количество ячеек по горизонтали для объединения-->
</tr>
</table>
9. Атрибуты элементов таблицы
Атрибут | Описание, принимаемое значение |
---|---|
colspan | Количество ячеек в строке для объединения по горизонтали. <td colspan="3"> Возможные значения: число от 1 до 999. |
headers | Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров. <th id="идентификатор">...</th> <th headers="идентификатор">...</th> Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id. |
rowspan | Количество ячеек в столбце для объединения по вертикали. <td rowspan="2"> Возможные значения: число от 1 до 999. |
span | Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1. <col span="2"> Принимаемые значения: любое целое положительное число. |
10. Пример создания таблицы
<table>
<caption>Меню ресторана "Ромашка"</caption>
<tr>
<th rowspan="2" class="first">Кухня</th>
<th colspan="2">Холодные блюда</th>
<th colspan="2">Горячие блюда</th>
<th rowspan="2">Десерты</th>
</tr>
<tr>
<td class="first">Салаты</td>
<td class="first">Закуски</td>
<td class="first">Первые блюда</td>
<td class="first">Вторые блюда</td>
</tr>
<tr>
<td rowspan="3" class="first">Русская</td>
<td>Винегрет</td>
<td>Язык с хреном</td>
<td>Щи с квашеной капустой</td>
<td>Вареники с картошкой</td>
<td>Печеные яблоки с медом</td>
</tr>
<tr>
<td>Оливье</td>
<td>Студень говяжий</td>
<td>Рассольник домашний</td>
<td>Брокколи в соевом молоке</td>
<td>Блинчатый пирог</td>
</tr>
<tr>
<td>Сельдь под "шубой"</td>
<td>Судак заливной</td>
<td>Мясная солянка</td>
<td>Котлеты "Пожарские"</td>
<td>Пирожное "Картошка"</td>
</tr>
<tr>
<td rowspan="3" class="first">Испанская</td>
<td>Севиче из гребешков</td>
<td>Эмпанадас</td>
<td>Хлебный суп с чесноком</td>
<td>Паэлья с морепродуктами</td>
<td>Чуррос</td>
</tr>
<tr>
<td>Тимбал из авокадо и тунца</td>
<td>Ахотомате</td>
<td>Астурийская фабада</td>
<td>Свиное раксо</td>
<td>Альмойшавена</td>
</tr>
<tr>
<td>Фасоль с ветчиной</td>
<td>Чанфайна</td>
<td>Рыбный суп с манными клецками </td>
<td>Тортилья картофельная</td>
<td>Бунуэлос</td>
</tr>
<tr>
<td rowspan="3" class="first">Французская</td>
<td>Вогезский салат</td>
<td>Рийет из курицы</td>
<td>Баклажанный крем-суп "Ренуар"</td>
<td>Картофель огратен</td>
<td>Бриоши</td>
</tr>
<tr>
<td>Салат "Панзанелла"</td>
<td>Делисьез из сыра</td>
<td>Итальянский тыквенный суп</td>
<td>Гратин из птицы</td>
<td>Японский лимонный пирог</td>
</tr>
<tr>
<td>Тар-тар</td>
<td>Маринованный лосось</td>
<td>Суп "Конти"</td>
<td>Тартифлетт</td>
<td>Саварен "Триумф"</td>
</tr>
</table>
body {
margin: 0;
background: #F4F1F8;
}
table {
border-collapse: collapse;
line-height: 1.1;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background: radial-gradient(farthest-corner at 50% 50%, white, #DCECF8);
color: #0C213B;
}
caption {
font-family: annabelle, cursive;
font-weight: bold;
font-size: 2em;
padding: 10px;
color: #F3CD26;
text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
caption:before, caption:after {
content: "\274B";
color: #A9E2CC;
margin: 0 10px;
}
th {
padding: 10px;
border: 1px solid #A9E2CC;
}
td {
font-size: 0.8em;
padding: 5px 7px;
border: 1px solid #A9E2CC;
}
.first {
font-size: 1em;
font-weight: bold;
text-align: center;
}
Описание и примеры
Значение и применение
Теги <div> и <span> представляют из себя универсальные пустые контейнеры, которые необходимо заполнить каким-либо содержанием, либо сгруппировать вложенные элементы для их дальнейшей стилизации средствами CSS, и при необходимости динамически манипулировать ими с использованием скриптов, например, на таком языке программирования как Javascript.
Обращаю Ваше внимание на то, что элементы <div> и <span> сами по себе не оказывают никакого влияния на другие элементы страницы.
Тег <div> определяет любой отдельный блок содержимого и предназначен для деления веб-страницы на фрагменты. Вы можете объединить любой набор логически связанных элементов в единственном блоке <div>.
Этот элемент является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину. Не так давно, этот элемент занимал абсолютный топ, посвященный делению страницы на логические составляющие, но с приходом HTML 5 было добавлено достаточно семантических элементов, которые позволяют в некоторых ситуациях заменить тег <div> на более осмысленный.
Прочитать о разметке страницы в HTML 5 вы можете в следующей статье учебника: "Теги разметки страницы".
В отличии от блочного элемента <div> тег <span> является строчным и применяется к внутренним (inline) элементам страницы, то есть к словам, фразам, которые находятся в пределах абзаца или небольшого фрагмента текста, оглавления и тому подобное.
Тег <span> вы можете использовать для таких задач как:
- Выделение участка текста определённым цветом, фоном или даже фоновым изображением.
- Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.
- Создание различных форматирующих стилей для выбранного участка текста.
- Использование скриптовых языков программирования к выбранным текстовым участкам, например подсветка синтаксиса кода и так далее.
Поддержка браузерами
Тег | Chrome |
Firefox |
Opera |
Safari |
IExplorer |
Edge |
---|---|---|---|---|---|---|
<div> | Да | Да | Да | Да | Да | Да |
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
align | left right center justify |
Не поддерживается в HTML5. Определяет выравнивание содержимого внутри элемента. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Теги <div> и <span></title> </head> <body> <div style = "color:green"> <p>Абзацы мы объединили тегом <div>, а это <span style = "color:red">слово</span> мы заключили тегом <span>.</p> <p>С помощью встроенной таблицы стилей мы выделили это слово красным цветом, а блок текста получил зеленый цвет.</p> </div> <div style = "background-color:khaki"> <p>Обратите внимание, что тег <div> является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину.</p> <p>Этот блок тоже содержит два абзаца. С помощью встроенной таблицы стилей мы указали для всего блока цвет заднего фона - khaki, а для этога <span style = "background-color:orangered">слова</span> orangeRed (мы заключили его в тег <span>).</p> </div> </body> </html>
В этом примере мы:
- Блочными элементами <div> создали два блока, содержащие по два абзаца текста внутри (элементы <p>).
- Для первого блока с помощью встроенной таблицы стилей мы указали, что все элементы получат цвет текста зеленый, а одно слово, которое мы поместили внутри тега <span> красный.
- Для второго блока с помощью встроенной таблицы стилей мы указали, что весь блок получит цвет заднего фона хаки, а одно слово, которое мы поместили внутри тега <span> оранжево-красный.
Результат нашего примера:
Отличия HTML 4.01 от HTML 5
Атрибут align не поддерживается в HTML5.
Значение CSS по умолчанию
div { display: block; }
Поддержка глобальных атрибутов
Элемент поддерживает "глобальные атрибуты".
Атрибуты событий
Элемент поддерживает "атрибуты событий".