Vladimir Drach. Official Web-Site. - Личный сайт Владимира Драча

Web Design (ГК)

Редактор

https://htmled.it/redaktor/

Web Design

Занятие 3

Теги для освоения:

<html>

<title>

<body>

<h1>

<h2>

<h3>

<i>

<u>

<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>

текст заголовка	текст заголовка
данные	данные

Фигура 1. Внешний вид таблицы без форматирования css-свойствами

По умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью свойства 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>

table_primer — Рис. 2. Выделение столбцов таблицы другим цветом с использованием элементов <col> и <colgroup>

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>

table_primer2 — Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan

9. Атрибуты элементов таблицы

Таблица 1. Атрибуты элементов таблицы
Атрибут	Описание, принимаемое значение
`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-html — Рис. 4. Создание меню ресторана с помощью HTML-таблицы

<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;
}

Описание и примеры

HTML теги

Значение и применение

Теги <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>Абзацы мы объединили тегом &lt;div&gt;, а это <span style = "color:red">слово</span> мы заключили тегом &lt;span&gt;.</p>
			<p>С помощью встроенной таблицы стилей мы выделили это слово красным цветом, а блок текста получил зеленый цвет.</p>
		</div>
		<div style = "background-color:khaki">
			<p>Обратите внимание, что тег &lt;div&gt; является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину.</p>
			<p>Этот блок тоже содержит два абзаца. С помощью встроенной таблицы стилей мы указали для всего блока цвет заднего фона - khaki, а для этога <span style = "background-color:orangered">слова</span> orangeRed (мы заключили его в тег &lt;span&gt;).</p>
		</div>
	</body>
</html>

В этом примере мы:

Блочными элементами <div> создали два блока, содержащие по два абзаца текста внутри (элементы <p>).
Для первого блока с помощью встроенной таблицы стилей мы указали, что все элементы получат цвет текста зеленый, а одно слово, которое мы поместили внутри тега <span> красный.
Для второго блока с помощью встроенной таблицы стилей мы указали, что весь блок получит цвет заднего фона хаки, а одно слово, которое мы поместили внутри тега <span> оранжево-красный.

Результат нашего примера: