Table в html: Тег | htmlbook.ru

Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
2.0+1.0+2.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

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

Синтаксис

<table>
  <tr>
    <td>...</td>
  </tr>
</table>

Атрибуты

align
Определяет выравнивание таблицы.
background
Задает фоновый рисунок в таблице.
bgcolor
Цвет фона таблицы.
border
Толщина рамки в пикселах.
bordercolor
Цвет рамки.
cellpadding
Отступ от рамки до содержимого ячейки.
cellspacing
Расстояние между ячейками.
cols
Число колонок в таблице.
frame
Сообщает браузеру, как отображать границы вокруг таблицы.
height
Высота таблицы.
rules
Сообщает браузеру, где отображать границы между ячейками.
summary
Краткое описание таблицы.
width
Ширина таблицы.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица размеров обуви</title>
 </head>
 <body>
  <table border="1">
   <caption>Таблица размеров обуви</caption>
   <tr>
    <th>Россия</th>
    <th>Великобритания</th>
    <th>Европа</th>
    <th>Длина ступни, см</th>
   </tr>
   <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr>
   <tr><td>35,5</td><td>4</td><td>36⅔</td><td>23–23,5</td></tr>
   <tr><td>36</td><td>4,5</td><td>37⅓</td><td>23,5</td></tr>
   <tr><td>36,5</td><td>5</td><td>38</td><td>24</td></tr>
   <tr><td>37</td><td>5,5</td><td>38⅔</td><td>24,5</td></tr>
   <tr><td>38</td><td>6</td><td>39⅓</td><td>25</td></tr>
   <tr><td>38,5</td><td>6,5</td><td>40</td><td>25,5</td></tr>
   <tr><td>39</td><td>7</td><td>40⅔</td><td>25,5–26</td></tr>
   <tr><td>40</td><td>7,5</td><td>41⅓</td><td>26</td></tr>
   <tr><td>40,5</td><td>8</td><td>42</td><td>26,5</td></tr>
   <tr><td>41</td><td>8,5</td><td>42⅔</td><td>27</td></tr>
   <tr><td>42</td><td>9</td><td>43⅓</td><td>27,5</td></tr>
   <tr><td>43</td><td>9,5</td><td>44</td><td>28</td></tr>
   <tr><td>43,5</td><td>10</td><td>44⅔</td><td>28–28,5</td></tr>
   <tr><td>44</td><td>10,5</td><td>45⅓</td><td>28,5–29</td></tr>
   <tr><td>44,5</td><td>11</td><td>46</td><td>29</td></tr>
   <tr><td>45</td><td>11,5</td><td>46⅔</td><td>29,5</td></tr>
   <tr><td>46</td><td>12</td><td>47⅓</td><td>30</td></tr>
   <tr><td>46,5</td><td>12,5</td><td>48</td><td>30,5</td></tr>
   <tr><td>47</td><td>13</td><td>48⅔</td><td>31</td></tr>
   <tr><td>48</td><td>13,5</td><td>49⅓</td><td>31,5</td></tr>
  </table>
 </body>
</html>

Таблицы | htmlbook.ru

Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.

Создание таблицы

Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.

Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега <td> использовать тег <th>. Текст в ячейке, оформленной с помощью тега <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги <td> и <th> нет.

Пример 12.1. Создание таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE</title>
 </head>
 <body>
  <table border="1" cellpadding="5">
   <tr>
    <th>Ячейка 1</th>
    <th>Ячейка 2</th>
   </tr>
   <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
 </table>
 </body>
</html>

Порядок расположения ячеек и их вид показан на рис. 12.1.

Рис. 12.1. Результат создания таблицы с четырьмя ячейками

Атрибуты тега | htmlbook.ru

Тот факт, что таблицы применяются достаточно часто и не только для отображения табличных данных обязан не только их гибкости и универсальности, но и обилию атрибутов тегов <table>, <tr> и <td>. Далее перечислены некоторые атрибуты тега <table>, которые применяются наиболее часто.

align

Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру и right — по правому краю. Когда используются значения left и right, текст начинает обтекать таблицу сбоку и снизу.

bgcolor

Устанавливает цвет фона таблицы.

border

Устанавливает толщину границы в пикселах вокруг таблицы. При наличии этого атрибута также отображаются границы между ячеек.

cellpadding

Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

cellspacing

Задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет и входит в общее значение.

cols

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

rules

Сообщает браузеру, где отображать границы между ячейками. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку. В дополнение можно указать отображать линии между колонками (значение cols), строками (rows) или группами (groups), которые определяются наличием тегов <thead>, <tfoot>, <tbody>, <colgroup> или <col>. Толщина границы указывается с помощью атрибута border.

width

Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, атрибут width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.

Атрибуты тега | htmlbook.ru

Каждая ячейка таблицы, задаваемая через тег <td>, в свою очередь тоже имеет свои атрибуты, часть из которых совпадает с атрибутами тега <table>.

align

Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left —- выравнивание по левому краю, center — по центру и right — по правому краю ячейки.

bgcolor

Устанавливает цвет фона ячейки. Используя этот атрибут совместно с атрибутом bgcolor тега <table> можно получить разнообразные цветовые эффекты в таблице.

colspan

Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких столбцов. Например, как для таблицы, показанной на рис. 12.2.

Рис. 12.2. Пример таблицы, где используется горизонтальное объединение ячеек

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

height

Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании атрибута height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот атрибут будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.

rowspan

Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 12.3.

Рис. 12.3. Пример таблицы, где применяется вертикальное объединение ячеек

В приведенной на рис. 12.3 таблице содержатся две строки и две колонки, левые вертикальные ячейки объединены с помощью атрибута rowspan.

valign

Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию содержимое ячейки располагается по ее вертикали в центре. Возможные значения: top — выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.

width

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

Объединение ячеек | htmlbook.ru

Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега <td>. Атрибут colspan устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, <td colspan=»3″> заменяет три ячейки, поэтому в следующей строке должно быть три тега <td> или конструкция вида <td colspan=»2″>…</td><td>…</td>. Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В примере 12.3 приведен хотя и валидный, но неверный код, в котором как раз проявляется подобная ошибка.

Пример 12.3. Неверное объединение ячеек

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Неправильное использование colspan</title>
 </head>
 <body>
   <table border="1" cellpadding="5">
    <tr>
     <td colspan="2">Ячейка 1</td>
     <td>Ячейка 2</td>
    </tr>
    <tr>
     <td>Ячейка 3</td>
     <td>Ячейка 4</td>
    </tr>
   </table>
 </body>
</html>

Результат данного примера показан на рис. 12.5.

Рис. 12.5. Появление дополнительной ячейки в таблице

В первой строке примера задано три ячейки, две из них объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере. Ее хорошо видно на рис. 12.5.

Правильное использование атрибутов colspan и rowspan продемонстрировано в примере  12.4.

Пример 12.4. Объединение ячеек по вертикали и горизонтали

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Объединение ячеек</title>
 </head>
 <body>
  <table border="1" cellpadding="4" cellspacing="0">
   <tr>
    <td rowspan="2">Браузер</td>
    <th colspan="2">Internet  Explorer</th>
    <th colspan="3">Opera</th>
    <th colspan="2">Firefox</th>
   </tr>
   <tr>
    <th>6.0</th><th>7.0</th><th>7.0</th><th>8.0</th><th>9.0</th><th>1.0</th><th>2.0</th>
   </tr>
   <tr align="center">
    <td>Поддерживается</td>
    <td>Нет</td><td>Да</td><td>Нет</td><td>Да</td><td>Да</td><td>Да</td><td>Да</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 12.6.

Рис. 12.6. Таблица с объединенными ячейками

В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.

HTML таблицы основы — Изучение веб-разработки

Этот раздел познакомит вас с таблицами HTML, представив самые базовые понятия — строки и ячейки, заголовки, слияние строк и столбцов, а также объединение всех ячеек в столбце в целях стилизации.

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

Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 1800 году:

Так что не удивительно, что создатели HTML включили в него средства для структурирования и представления табличных данных в сети.

Как работает таблица?

Смысл таблицы в том, что она жёсткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведённую ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.

Personal pronouns
СубъектОбъект
Единствен. числ.1 ЛицоЯменя
2 Лицотытебя
3 Лицоонего
онаеё
oоноего
Множ.числ.1 Лицомынас
2 Лицовывас
2 Лицоониих

Если правильно представить таблицу HTML, интерпретировать её данные смогут даже люди, имеющие проблемы со зрением.

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

Исходный код HTML (HTML source code) вышеприведённой таблице есть в GitHub; посмотрите его и живой пример (look at the live example)! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведённый в GitHub пример информации о стиле не имеет.

Не питайте ложных иллюзий — чтобы эффективно представлять таблицы в веб, необходимо придать им хорошую структуру в HTML и применить к ним таблицы стилей (CSS). В данном разделе мы сфокусируемся на HTML, чтобы узнать о том, что касается CSS, вам надо обратиться к статье Стилизация таблиц.

В этом разделе мы не фокусируемся на CSS, но всё же дали простейшую таблицу стилей CSS, чтобы сделать таблицы более читабельными. Эту таблицу стилей можно найти здесь, можно также использовать шаблон HTML, применяющий эту стаблицу стилей — вместе они дадут вам хорошую основу для экспериментов с таблицами HTML.

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

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

Короче говоря, использование таблиц в целях оформления вместо методов CSS является плохой идеей по следующим причинам :

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

Итак, мы уже достаточно говорили о теории, теперь возьмём конкретный пример и построим таблицу.

  1. Прежде всего, создайте локальную копию blank-template.html и minimal-table.css в новой папке на вашем компьютере.
  2. Содержимое любой таблицы заключается между двумя тегами : <table></table>. Добавьте их в тело HTML.
  3. Самым маленьким контейнером в таблице является ячейка, она создаётся элементом <td> (‘td’ — сокращение от ‘table data’). Введите внутри тегов table следующее:
    <td>Hi, I'm your first cell.</td>
  4. Чтобы получить строку из четырёх ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом:
    <td>Hi, I'm your first cell.</td>
    <td>I'm your second cell.</td>
    <td>I'm your third cell.</td>
    <td>I'm your fourth cell.</td>

Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент <td> создаёт отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.

Чтобы эта строка перестала расти, а новые ячейки перешли на вторую строку, необходимо использовать элемент <tr> (‘tr’ — сокращение от ‘table row’). Попробуем, как это получится.

  1. Поместите четыре уже созданных ячейки между тегами <tr> как здесь показано:
    <tr>
      <td>Hi, I'm your first cell.</td>
      <td>I'm your second cell.</td>
      <td>I'm your third cell.</td>
      <td>I'm your fourth cell.</td>
    </tr>
  2. Теперь, когда одна строка уже есть, добавим ещё — каждую строку надо вложить в дополнительный элемент <tr>, а каждая ячейка должна быть внутри элемента <td>.

В результате получится таблица, которая будет выглядеть примерно так:

Hi, I’m your first cell.I’m your second cell.I’m your third cell.I’m your fourth cell.
Second row, first cell.Cell 2.Cell 3.Cell 4.

Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как «Person» и «Age» в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:

<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

Теперь как выглядит таблица:

KnockyFlorEllaJuan
BreedJack RussellPoodleStreetdogCocker Spaniel
Age169105
OwnerMother-in-lawMeMeSister-in-law
Eating HabitsEats everyone’s leftoversNibbles at foodHearty eaterWill eat till he explodes

Проблема в том, что, хотя вы и можете представить, о чем идёт речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.

Упражнение: заголовки

Попробуем улучшить эту таблицу.

  1. Сначала создайте локальную копию dogs-table.html и minimal-table.css в новой папке на вашем компьютере. HTML содержит пример Dogs, который вы уже видели выше.
  2. Чтобы опознавать заголовки таблицы в качестве заголовков, визуально и семантически, можно использовать элемент <th> (‘th’ сокращение от ‘table header’). Он работает в точности как <td>, за исключением того, что обозначает заголовок, а не обычную ячейку. Замените в своём HTML все элементы <td>, содержащие заголовки, на элементы <th>.
  3. Сохраните HTML и загрузите его в браузер, и вы увидите, что заголовки теперь выглядят как заголовки.

Для чего нужны заголовки?

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

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

Заголовки дают дополнительное преимущество — вместе с атрибутом scope (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно

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

Исходная разметка выглядит так:

<table>
  <tr>
    <th>Animals</th>
  </tr>
  <tr>
    <th>Hippopotamus</th>
  </tr>
  <tr>
    <th>Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th>Crocodile</th>
  </tr>
  <tr>
    <th>Chicken</th>
    <td>Cock</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

Но результат не такой, как хотелось бы:

Animals
Hippopotamus
HorseMare
Stallion
Crocodile
ChickenCock
Rooster

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

Воспользуемся colspan и rowspan чтобы улучшить таблицу.

  1. Сначала создайте локальную копию animals-table.html и minimal-table.css в новой папке на вашем компьютере. Код HTML содержит пример с животными, который вы уже видели выше.
  2. Затем используйте атрибут colspan чтобы распространить «Animals», «Hippopotamus» и «Crocodile» на два столбца.
  3. Наконец, используйте атрибут rowspan чтобы распространить  «Horse» и «Chicken» на две строки.
  4. Сохраните код и откройте его в браузере, чтобы увидеть улучшения.

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

Возьмём простой пример:

<table>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

Что даёт нам:

Data 1Data 2
CalcuttaOrange
RobotsJazz

Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трёх ячеек в столбце (в реальном проекте, возможно, придётся вводить class на всех трёх и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <col>. Элемент <col> задаётся в контейнере <colgroup> сразу же за открывающим тегом <table>. Эффект, который мы видели выше, можно задать так:

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

Мы определяем два «стилизующих столбца». Мы не применяем стиль к первому столбцу, но пустой элемент <col> ввести необходимо — иначе к первому столбцу не будет применён стиль.

Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент <col> с атрибутом span, таким образом:

<colgroup>
  <col span="2">
</colgroup>

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

Упражнение: colgroup и col

Теперь попробуйте сами.

Ниже приведена таблица уроков по языкам. В пятницу (Friday) новый класс целый день изучает голландский (Dutch),  кроме того, во вторник (Tuesday) и четверг (Thursdays) есть занятия по немецкому (German). Учительница хочет выделить столбцы, соответствующие дням, когда она преподаёт.

MonTuesWedThursFriSatSun
1st periodEnglishGermanDutch
2nd periodEnglishEnglishGermanDutch
3rd periodGermanGermanDutch
4th periodEnglishEnglishDutch

Заново создайте таблицу, проделав указанные ниже действия.

  1. Сначала создайте локальную копию файла timetable.html в новой папке на вашем компьютере. Код HTML содержит таблицу, которую вы уже видели выше, но без информации о стиле.
  2. Добавьте элемент <colgroup> вверху таблицы, сразу же под тегом <table>, куда вы сможете вставлять элементы <col>.
  3. Первые два столбца надо оставить без стиля..
  4. Добавьте цвет фона для третьего столбца. Значением атрибута style будет  background-color:#97DB9A;
  5. Задайте ширину для четвёртого столбца. Значением атрибута style будет width: 42px;
  6. Добавьте цвет фона для пятого столбца. Значением атрибута style будет background-color: #97DB9A;
  7. Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведёт новый класс. Значениями атрибута style будут: background-color:#DCC48E; border:4px solid #C1437A;
  8. Последние два дня выходные; значением атрибута style будет width: 42px;

Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в timetable-fixed.html (посмотрите живой пример).

Здесь приведены практически все базовые сведения о таблицах HTML. В следующей статье вы получите более продвинутые сведения на эту тему.

Тег HTML таблица — справочник GuruWeba

Тег <table> используется для создания HTML таблиц.

HTML таблица <table> должна содержать хотя бы одну строку <tr> и хотя бы одну ячейку <th> — ячейку-заголовок или <td> — обычную ячейку в каждой строке.

Таблица, созданная тегом <table> может быть разделена на верхний, нижний колонтитулы и основную часть с помощью тегов <thead>, <tfoot>, <tbody>.

К таблице можно добавить подпись, используя тег <caption>.

Внутри таблицу <table> можно делить не только по строкам, но и по колонкам используя теги <col> и <colgroup>.

HTML таблицы <table> не стоит использовать для верстки каркаса HTML страниц. Используйте их для структурированного отображения контента табличного формата.

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

<table>HTML контент таблицы</table>

Примеры использования таблиц <table> в HTML коде

Ниже представлены 2 варианта HTML таблиц.

Простая HTML таблица

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

HTML код простой таблицы

<table>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</tbody>
</table>

Сложная HTML таблица

Подпись таблицы
Ячейка колонтитула 1 Ячейка колонтитула 2 Ячейка колонтитула 3
Ячейка колонтитула 4 Ячейка колонтитула 5 Ячейка колонтитула 6
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4

HTML код сложной таблицы

<table>
<caption>Подпись таблицы</caption>
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>Ячейка колонтитула 1</th>
<th>Ячейка колонтитула 2</th>
<th>Ячейка колонтитула 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Ячейка колонтитула 4</th>
<th>Ячейка колонтитула 5</th>
<th>Ячейка колонтитула 6</th>
</tr>
</tfoot>
<tbody>
<tr>
<td rowspan="2">Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td colspan="2">Ячейка 4</td>
</tr>
</tbody>
</table>

Поддержка браузерами

Атрибуты

В HTML5 тег <table> не имеет атрибутов.

Устаревшие атрибуты тега table

Атрибут Значения Описание
align left
right
center
justify
Задает правило выравнивания содержимого таблицы по горизонтали. В HTML5 используйте CSS.
bgcolor rgb
HTML hex
HTML colorname

Фоновый цвет. В HTML5 используйте CSS.

Примеры:
RGB: rgb(226,112,017), rgb(0, 40, 129).
HTML hex: #1a2a2c, #eee.
HTML colorname: black, yellow;

border число Ширина границ таблицы в пикселях. По умолчанию: 0 — границы не выводятся.
В HTML5 используйте CSS.
cellpadding число Отступ от границ ячеек до их содержимого. Значение указывает количество пикселей. В HTML5 используйте CSS.
cellspacing число Отступ между границами ячеек. Значение указывает количество пикселей. В HTML5 используйте CSS.
frame void
above
below
lhs
rhs
vsides
hsides
box
border

Определяет какие внешние границы будут отображены:
void — все границы скрыты;
above — только верхняя граница;
below — только нижняя граница;
lhs — только левая граница;
rhs — только правая граница;
vsides — вертикальные границы;
hsides — горизонтальные границы;
box или border — все границы.

В HTML5 используйте CSS.

rules none
groups
rows
cols
all

Определяет какие внутренние границы будут отображены:
none — все скрыты;
groups — границы групп;
rows — границы строк;
cols — границы колонок;
all — все;

В HTML5 используйте CSS.

summary текст Описание таблицы.
width пиксели
проценты
Ширина таблицы. В HTML5 используйте CSS.

HTML-таблиц


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


Пример

Компания Контакт Страна
Альфредс Футтеркисте Мария Андерс Германия
Торговый центр Moctezuma Франциско Чанг Мексика
Эрнст Гендель Роланд Мендель Австрия
Island Trading Хелен Беннет Великобритания
Винные погреба Смеющегося Вакха Йоши Таннамури Канада
Magazzini Alimentari Riuniti Джованни Ровелли Италия
Попробуй сам »

Определить таблицу HTML

Тег

определяет таблицу HTML.

Каждая строка таблицы определяется тегом

. Каждый заголовок таблицы определяется тегом














. Каждые данные / ячейка таблицы определяются с помощью а тег.

По умолчанию текст в

элементах выделены жирным шрифтом и по центру.

По умолчанию текст в

элементах являются обычными и выровнены по левому краю.

Пример

Простая таблица HTML:

<таблица>

Имя Фамилия Возраст
Джилл Смит 50
Ева Джексон 94

Попробуй сам »

Примечание: Элементы являются контейнерами данных таблицы.
Они могут содержать всевозможные элементы HTML; текст, изображения, списки, другие таблицы и т. д.



Таблица HTML — Добавить границу

Чтобы добавить границу к таблице, используйте свойство CSS border :

Не забудьте определить границы как для таблицы, так и для ячеек таблицы.


Таблица HTML — свернутые границы

Чтобы границы сжимались в одну границу, добавьте CSS border-collapse недвижимость:

Пример

table, th, td {
border: 1px сплошной черный;
граница-коллапс: коллапс;
}

Попробуй сам »

Таблица HTML — Добавить заполнение ячеек

Заполнение ячейки определяет расстояние между содержимым ячейки и ее границами.

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

Чтобы задать отступ, используйте свойство CSS padding:


Таблица HTML - заголовки с выравниванием по левому краю

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

Чтобы выровнять заголовки таблицы по левому краю, используйте свойство CSS text-align :


Таблица HTML - Добавить интервал между границами

Интервал границы указывает расстояние между ячейками.

Чтобы установить интервал границ для таблицы, используйте свойство CSS border-spacing :

Примечание: Если таблица имеет свернутые границы, border-spacing не действует.


Таблица HTML - ячейка, охватывающая множество столбцов

Чтобы ячейка занимала более одного столбца, используйте атрибут colspan :

Пример











Имя Телефон
Билл Гейтс 55577854 55577855

Попробуй сам "

Таблица HTML - ячейка, занимающая много строк

Чтобы сделать ячейку более одной строки, используйте атрибут rowspan :

Пример













Имя: Билл Гейтс
Телефон: 55577854
55577855

Попробуй сам "

Таблица HTML - добавить подпись

Чтобы добавить заголовок к таблице, используйте тег :

Пример














Ежемесячная экономия
Месяц Экономия
Январь < / td>
100 долларов США
февраль 50 долларов США

Попробуй сам "

Примечание: Тег должен быть вставлен сразу после тега

.


Особый стиль для одного стола

Чтобы определить специальный стиль для одной конкретной таблицы, добавьте id атрибут к таблице:

Пример











Имя Фамилия Возраст
Ева
Джексон 94

Теперь вы можете определить специальный стиль для этой таблицы:

# t01 {
ширина: 100%;
цвет фона: # f1f1c1;
}

Попробуй сам "

И добавьте еще стилей:

# t01 tr: nth-child (четный) {
background-color: #eee;
}
# t01 tr: nth-child (нечетный) {
background-color: #fff;
}
# t01 th {
цвет: белый;
цвет фона: черный;
}

Попробуй сам "

Краткое содержание главы

  • Используйте элемент HTML для определения таблицы
  • Используйте элемент HTML
  • для определения строки таблицы
  • Используйте элемент HTML
  • , и:

    для определения данных таблицы
  • Используйте элемент HTML
  • , чтобы определить заголовок таблицы
  • Используйте элемент HTML
  • для определения заголовка таблицы
  • Используйте свойство CSS border , чтобы определить границу
  • Используйте свойство CSS border-collapse , чтобы свернуть границы ячеек
  • Используйте свойство CSS padding , чтобы добавить отступ к ячейкам
  • Используйте свойство CSS text-align для выравнивания текста ячейки
  • Используйте свойство CSS border-spacing , чтобы установить интервал между ячейками
  • Используйте атрибут colspan , чтобы ячейка охватывала несколько столбцов
  • Используйте атрибут rowspan , чтобы ячейка занимала много строк
  • Используйте атрибут id , чтобы однозначно определить одну таблицу

  • Упражнения HTML


    Теги таблицы HTML

    Тег Описание
    <таблица> Определяет таблицу
    Определяет ячейку заголовка в таблице
    Определяет строку в таблице
    Определяет ячейку в таблице
    <заголовок> Определяет заголовок таблицы
    Определяет группу из одного или нескольких столбцов в таблице для форматирования.
    Задает свойства столбца для каждого столбца в элементе
    <заголовок> Группирует содержимое заголовка в таблицу
    Группирует содержимое тела в таблицу
    <фут> Группирует содержимое нижнего колонтитула в таблице


    HTML тег thead


    Пример

    Таблица HTML с элементами





















    < td> 180 долларов


    Месяц Экономия
    январь 100 долларов
    февраль 80 долларов
    Sum

    Попробуй сам "

    Дополнительные примеры "Попробуйте сами" ниже.


    Определение и использование

    Тег используется для группировки содержимого заголовка в таблице HTML.

    Элемент используется вместе с элементами и для определения каждой части таблицы (заголовок, тело, нижний колонтитул).

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

    Примечание: Элемент должен иметь один или несколько Теги внутри.

    Тег должен использоваться в следующем контексте: Как дочерний элемент

    после любого элементыи перед любыми, и элементы.

    Совет: Элементы

    , , и не будут влиять на макет таблицы по умолчанию.Однако вы можете использовать CSS для стилизации этих элементы (см. пример ниже)!


    Поддержка браузера

    и
    Элемент
    <заголовок> Есть Есть Есть Есть Есть

    Глобальные атрибуты

    Тег также поддерживает глобальные атрибуты в HTML.


    Атрибуты событий

    Тег также поддерживает атрибуты событий в HTML.



    Другие примеры

    Пример

    Стиль, и с помощью CSS:




    thead {color: green;}
    tbody {color: blue;}
    tfoot {color: red;}

    table, th, td {
    border: 1px сплошной черный;
    }






















    < td> 180 долларов


    Месяц Экономия
    январь 100 долларов
    февраль 80 долларов
    Sum

    Попробуй сам "

    Пример

    Как выровнять содержимое внутри (с помощью CSS):

    <таблица>


    Месяц
    Экономия




    январь
    100


    февраль
    80 долларов


    Попробуй сам "

    Пример

    Как выровнять содержимое по вертикали внутри (с помощью CSS):

    <таблица>


    месяц
    Экономия




    январь
    100


    февраль
    80 долларов


    Попробуй сам "

    Настройки CSS по умолчанию

    Большинство браузеров будут отображать элемент со следующими значениями по умолчанию:

    thead {
    display: таблица-заголовок-группа;
    выравнивание по вертикали: по центру;
    цвет границы: наследование;
    }


    Тег таблицы HTML


    Пример

    Простая таблица HTML, содержащая два столбца и две строки:

    <таблица>

    Месяц
    Экономия


    Январь
    г. 100

    Попробуй сам "

    Дополнительные примеры "Попробуйте сами" ниже.


    Определение и использование

    Тег

    определяет таблицу HTML.

    Таблица HTML состоит из одного элемента

    и одного или нескольких элементов, Элементы определяет строку таблицы, элемент,, Элементы и.


    Поддержка браузера

    и.

    Элемент

    определяет заголовок таблицы, а Элемент определяет ячейку таблицы.

    Таблица HTML может также включать

    ,
    Элемент
    <таблица> Есть Есть Есть Есть Есть

    Глобальные атрибуты

    Тег

    также поддерживает глобальные атрибуты в HTML.


    Атрибуты событий

    Тег

    также поддерживает атрибуты событий в HTML.



    Другие примеры

    Пример

    Как добавить свернутые границы к таблице (с помощью CSS):




    table, th, td {
    border: 1px сплошной чернить;
    граница-коллапс: коллапс;
    }

    <таблица>













    Месяц Экономия
    январь 100
    февраль 80 долларов США


    Попробуй сам "

    Пример

    Как выровнять таблицу по правому краю (с помощью CSS):

    <таблица>

    Месяц
    Экономия


    январь
    100


    февраль
    80 долларов

    Попробуй сам "

    Пример

    Как выровнять таблицу по центру (с помощью CSS):




    table, th, td {
    border: 1px сплошной чернить;
    }
    стол.по центру {
    маржа-слева: авто;
    маржа-право: авто;
    }

    <таблица >

    Месяц
    Экономия


    январь
    100


    февраль
    80 долларов

    Попробуй сам "

    Пример

    Как добавить цвет фона в таблицу (с помощью CSS):

    <таблица>

    Месяц
    Экономия


    январь
    100


    февраль
    80 долларов

    Попробуй сам "

    Пример

    Как добавить отступ в таблицу (с помощью CSS):




    table, th, td {
    border: 1px сплошной чернить;
    }

    th, td {
    padding: 10px;
    }















    Месяц Экономия
    январь 100
    февраль 80 долларов США



    Попробуй сам "

    Пример

    Как установить ширину таблицы (с помощью CSS):

    <таблица>

    Месяц
    Экономия


    январь
    100


    февраль
    80 долларов

    Попробуй сам "

    Пример

    Как создавать заголовки таблиц:












    Имя Электронная почта Телефон
    Джон Доу джон[email protected] 123-45-678

    Попробуй сам "

    Пример

    Как создать таблицу с подписью:

    <таблица>
    Ежемесячная экономия

    Месяц
    Экономия


    январь
    100


    февраль
    80 долларов

    Попробуй сам "

    Пример

    Как определить ячейки таблицы, охватывающие более одной строки или одного столбца:













    Имя Электронная почта Телефон
    Джон Доу джон[email protected] 123-45-678 212-00-546

    Попробуй сам "

    Связанные страницы

    Учебное пособие по HTML: таблицы HTML

    Ссылка на HTML DOM: объект таблицы

    Учебное пособие по CSS: таблицы стилей


    Настройки CSS по умолчанию

    Большинство браузеров отображают элемент

    со следующими значениями по умолчанию:

    Пример

    стол {
    дисплей: стол;
    Бордюр-обвал: раздельный;
    border-spacing: 2px;
    цвет рамки: серый;
    }

    Попробуй сам "

    : элемент Таблица - HTML: язык разметки гипертекста

    HTML-элемент

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

    элементов,
  • необязательный элемент
  • ,
  • либо одно из следующих:
    • ноль или более
  • элементов
  • один или несколько
  • элементов
  • дополнительный элемент
  • Категории контента Расход
    Разрешенное содержание В этом порядке:
    1. необязательный элемент
    ,
  • ноль или более
  • Отсутствие тега Нет, и начальный, и конечный тег являются обязательными.
    Разрешенные родители Любой элемент, который принимает содержимое потока
    Неявная роль ARIA стол
    Разрешенные роли ARIA Любая
    Интерфейс DOM HTMLTableElement

    Устаревшие атрибуты

    выровнять

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

    • слева : таблица отображается в левой части документа;
    • центр : таблица отображается в центре документа;
    • справа : таблица отображается в правой части документа.

    Установите margin-left и margin-right до auto или margin до 0 auto для достижения эффекта, аналогичного атрибуту align.

    bgcolor

    Цвет фона таблицы. Это шестизначный шестнадцатеричный код RGB с префиксом « # ». Также можно использовать одно из предопределенных цветовых словечек.

    Для достижения аналогичного эффекта используйте свойство CSS background-color .

    граница

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

    Для достижения аналогичного эффекта используйте сокращенное свойство CSS border .

    подкладка

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

    Для достижения аналогичного эффекта примените свойство border-collapse к элементу

    с его значением, установленным на свертывание, и свойство padding к элементам
    .

    расстояние между ячейками

    Этот атрибут определяет размер пространства между двумя ячейками в процентах или пикселях.Атрибут применяется как по горизонтали, так и по вертикали к пространству между верхом таблицы и ячейками первой строки, слева от таблицы и первого столбца, справа от таблицы и последнего столбца и низа таблицы. таблица и последняя строка.

    Для достижения аналогичного эффекта примените свойство border-spacing к элементу

    . border-spacing не имеет никакого эффекта, если для border-collapse установлено значение collapse.

    рама

    Этот перечислимый атрибут определяет, какая сторона рамки, окружающей таблицу, должна отображаться.

    Для достижения аналогичного эффекта используйте свойства border-style и border-width .

    правил

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

    • нет , что означает, что правила отображаться не будут; это значение по умолчанию;
    • групп , что приведет к отображению правил между группами строк (определенными элементами
    , и ) и между группами столбцов (определенными элементом и элементов) только;
  • строк , что приведет к отображению правил между строками;
  • столбцов , что приведет к отображению правил между столбцами;
  • все , что приведет к отображению правил между строками и столбцами.
  • Для достижения аналогичного эффекта примените свойство border к соответствующим элементам

    , , , или .

    сводка
    Этот атрибут определяет альтернативный текст, который резюмирует содержимое таблицы. Вместо этого используйте элемент
    .
    ширина

    Этот атрибут определяет ширину таблицы.Вместо этого используйте свойство CSS width .

    Простая таблица

      <таблица>
      
    Джон Самка
    Джейн Самка

    Другие простые примеры

      

    Простая таблица с заголовком

    <таблица>
    Имя Фамилия
    Джон Самка
    Джейн Самка

    Таблица с thead, tfoot и tbody

    <таблица> Заголовок 1 Заголовок 2 Основной текст 1 Основной текст 2 <фут> Содержание нижнего колонтитула 1 Содержание нижнего колонтитула 2

    Таблица с colgroup

    <таблица> Страны Столицы Население Язык США Вашингтон, Д.С. 309 миллионов английский Швеция Стокгольм 9 миллионов шведский

    Таблица с colgroup и col

    <таблица> Лайм Лимон Оранжевый Зеленый желтый Оранжевый

    Простая таблица с подписью

    <таблица> Замечательная подпись Отличные данные

    Captions

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

    Это помогает людям ориентироваться с помощью вспомогательных технологий, таких как программы чтения с экрана, людям с нарушениями зрения и людям с когнитивными проблемами.

    Область действия строк и столбцов

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

    Пример
      <таблица>
       Названия и значения цветов 
      
        
           Имя 
           HEX 
           HSLa 
           RGBa 
        
        
           Бирюзовый 
          #51F6F6 
            hsla (180, 90%, 64%, 1)  
            rgba (81, 246, 246, 1)  
        
        
           Золотарник 
          #F6BC57 
            hsla (38, 90%, 65%, 1)  
            rgba (246, 188, 87, 1)  
        
      
    
      

    Предоставление объявления scope = "col" в элементе поможет описать, что ячейка находится в верхней части столбца.Предоставление объявления scope = "row" в элементе поможет описать, что ячейка является первой в строке.

    Сложные таблицы

    Вспомогательные технологии, такие как программы чтения с экрана, могут испытывать трудности при синтаксическом анализе таблиц, которые настолько сложны, что ячейки заголовков невозможно связать строго горизонтально или вертикально. Обычно на это указывает наличие атрибутов colspan и rowspan .

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

    Если таблица не может быть разбита на части, используйте комбинацию атрибутов id и заголовков , чтобы программно связать каждую ячейку таблицы с заголовком (ами), с которым связана ячейка.

    таблиц BCD загружаются только в браузере.

    • CSS-свойства, которые могут быть особенно полезны для стилизации элемента :

      Основы работы с таблицами HTML — Изучите веб-разработку

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

      Предварительные требования: Основы HTML (см. Введение в HTML).
      Цель: Для базового знакомства с таблицами HTML.

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

      Таблицы

      очень широко используются в человеческом обществе и использовались в течение долгого времени, о чем свидетельствует этот документ переписи населения США от 1800:

      Поэтому неудивительно, что создатели HTML предоставили средства для структурирования и представления табличных данных в сети.

      Как работает стол?

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

      Данные о планетах нашей солнечной системы (Факты о планетах взяты из Таблицы данных о планетах НАСА — метрическая система.
      Имя Масса (10 24 кг) Диаметр (км) Плотность (кг / м 3 ) Плотность (м / с 2 ) Продолжительность дня (часы) Расстояние от Солнца (10 6 км) Средняя температура (° C) Количество лун Банкноты
      Планеты Земли Меркурий 0.330 4 879 5427 3,7 4222,6 57,9 167 0 Ближайший к Солнцу
      Венера 4,87 12 104 5243 8,9 2802,0 108,2 464 0
      Земля 5,97 12 756 5514 9.8 24,0 149,6 15 1 Наш мир
      Марс 0,642 6,792 3933 3,7 24,7 227,9-65 2 Красная планета
      планет Юпитера Газовые гиганты Юпитер 1898 142 984 1326 23.1 9,9 778,6 -110 67 Самая большая планета
      Сатурн 568 120 536 687 9,0 10,7 1433,5 -140 62
      Ледяные гиганты Уран 86,8 51,118 1271 8,7 17.2 2872,5 -195 27
      Нептун 102 49 528 1638 11,0 16,1 4495.1 -200 14
      Карликовые планеты Плутон 0,0146 2,370 2095 0,7 153,3 5906.4 -225 5 Рассекречен как планета в 2006 году, но это остается спорным моментом.

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

      Стиль таблицы

      Вы также можете посмотреть живой пример на GitHub! Вы заметите, что таблица выглядит немного более читаемой — это потому, что таблица, которую вы видите выше на этой странице, имеет минимальный стиль, тогда как в версии GitHub применен более значительный CSS.

      Не питайте иллюзий; Чтобы таблицы были эффективны в Интернете, вам необходимо предоставить некоторую информацию о стилях с помощью CSS, а также хорошую прочную структуру с помощью HTML. В этом модуле мы сосредоточены на части HTML; Чтобы узнать о части CSS, вы должны посетить нашу статью «Таблицы стилей» после того, как вы закончите здесь.

      Мы не будем сосредотачиваться на CSS в этом модуле, но мы предоставили вам минимальную таблицу стилей CSS, которая сделает ваши таблицы более читабельными, чем стандартные, которые вы получаете без стилей.Вы можете найти здесь таблицу стилей, а также можете найти HTML-шаблон, который применяет эту таблицу стилей — вместе они станут хорошей отправной точкой для экспериментов с HTML-таблицами.

      Когда НЕ следует использовать HTML-таблицы?

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

      Короче говоря, использование таблиц для разметки, а не методов разметки CSS — плохая идея. Основные причины следующие:

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

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

      1. Прежде всего, создайте локальную копию blank-template.html и minimal-table.css в новом каталоге на вашем локальном компьютере.
      2. Содержимое каждой таблицы заключено в эти два тега:
        .Добавьте их в тело вашего HTML.
      3. Самый маленький контейнер внутри таблицы — это ячейка таблицы, которая создается элементом («td» означает «данные таблицы»). Добавьте в теги таблицы следующее:
           Привет, я твоя первая сотовая.   
      4. Если нам нужна строка из четырех ячеек, нам нужно скопировать эти теги три раза. Обновите содержимое вашей таблицы, чтобы оно выглядело так:
           Привет, я твоя первая сотовая.
         Я твоя вторая камера. 
         Я твоя третья камера. 
         Я твоя четвертая камера.   

      Как вы увидите, ячейки не размещаются друг под другом, а автоматически выравниваются друг с другом в одной строке. Каждый элемент создает одну ячейку, и вместе они составляют первую строку. Каждая добавляемая ячейка увеличивает длину строки.

      Чтобы остановить рост этой строки и начать размещение последующих ячеек во второй строке, нам нужно использовать элемент («tr» означает «строка таблицы»).Давайте сейчас исследуем это.

      1. Поместите четыре ячейки, которые вы уже создали, в теги , например:
          
           Привет, я твоя первая ячейка. 
           Я твоя вторая камера. 
           Я твоя третья камера. 
           Я твоя четвертая камера. 
          
      2. Теперь вы создали одну строку, попробуйте создать еще одну или две — каждая строка должна быть заключена в дополнительный элемент , при этом каждая ячейка содержится в .

      Результат

      В результате должна получиться таблица, которая выглядит примерно так:

        <таблица>
        
           Привет, я твоя первая ячейка. 
           Я твоя вторая камера. 
           Я твоя третья камера. 
           Я твоя четвертая камера. 
        
      
        
           Вторая строка, первая ячейка. 
           Ячейка 2 
           Ячейка 3 
           Ячейка 4.
        
      
        
        таблица {
          граница-коллапс: коллапс;
        }
        td, th {
          граница: сплошной черный 1px;
          отступ: 10 пикселей 20 пикселей;
        }
        

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

        <таблица>
        
           & nbsp; 
           Непонятливый 
           Флор 
           Элла 
           Хуан 
        
        
           Порода 
           Джек Рассел 
           Пудель 
           Streetdog 
           Кокер-спаниель 
        
        
           Возраст 
           16 
           9 
           10 
           5 
        
        
           Владелец 
           Свекровь 
           Я 
           Я 
           Невестка 
        
        
           Привычки в еде 
           Ест все, что осталось 
           Кусочки еды 
           Сытный любитель 
           Будет есть, пока не взорвется 
        
        
        таблица {
          граница-коллапс: коллапс;
        }
        td, th {
          граница: сплошной черный 1px;
          отступ: 10 пикселей 20 пикселей;
        }
        

      Фактическая визуализированная таблица:

      Проблема здесь в том, что, хотя вы можете понять, что происходит, не так просто сделать перекрестные ссылки на данные, как это могло бы быть.Если бы заголовки столбцов и строк чем-то выделялись, было бы намного лучше.

      Попробуем улучшить эту таблицу.

      1. Сначала создайте локальную копию наших файлов dog-table.html и minimal-table.css в новом каталоге на вашем локальном компьютере. HTML содержит тот же пример Dogs, который вы видели выше.
      2. Чтобы распознать заголовки таблицы как заголовки, как визуально, так и семантически, вы можете использовать элемент (th означает «заголовок таблицы»).Это работает точно так же, как , за исключением того, что обозначает заголовок, а не обычную ячейку. Войдите в свой HTML и измените все элементы , окружающие заголовки таблицы, на элементы .
      3. Сохраните HTML-код и загрузите его в браузер, и вы должны увидеть, что заголовки теперь выглядят как заголовки.

      Мы уже частично ответили на этот вопрос — легче найти данные, которые вы ищете, когда заголовки четко выделяются, а дизайн в целом выглядит лучше.

      Примечание : Заголовки таблиц имеют некоторый стиль по умолчанию — они выделены жирным шрифтом и центрированы, даже если вы не добавляете свой собственный стиль к таблице, чтобы помочь им выделиться.

      Заголовки таблиц

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

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

      Начальная разметка выглядит так:

        <таблица>
        
           Животные 
        
        
           Бегемот 
        
        
           Лошадь 
           Кобыла 
        
        
           Жеребец 
        
        
           Крокодил 
        
        
           Курица 
           Курица 
        
        
           Петух 
        
        
        таблица {
          граница-коллапс: коллапс;
        }
        td, th {
          граница: сплошной черный 1px;
          отступ: 10 пикселей 20 пикселей;
        }
        

      Но результат не дает нам того, что мы хотим:

      Нам нужен способ, чтобы «Животные», «Бегемот» и «Крокодил» занимали две колонки, а «Лошадь» и «Курица» — две строки вниз.К счастью, заголовки и ячейки таблицы имеют атрибуты colspan и rowspan , которые позволяют нам делать именно эти вещи. Оба принимают безразмерное числовое значение, равное количеству строк или столбцов, которые вы хотите охватить. Например, colspan = "2" превращает ячейку в два столбца.

      Давайте использовать colspan и rowspan , чтобы улучшить эту таблицу.

      1. Сначала создайте локальную копию наших animals-table.html и minimal-table.css в новом каталоге на вашем локальном компьютере. HTML содержит тот же пример с животными, который вы видели выше.
      2. Затем используйте colspan , чтобы разделить «Животные», «Бегемот» и «Крокодил» на два столбца.
      3. Наконец, используйте ряд , чтобы сделать «Лошадь» и «Цыпленок» в двух рядах.
      4. Сохраните и откройте свой код в браузере, чтобы увидеть улучшения.

      Стилизация без

      Есть еще одна особенность, о которой мы расскажем вам в этой статье, прежде чем мы продолжим.В HTML есть метод определения информации о стилях для всего столбца данных в одном месте — элементы и . Они существуют, потому что необходимость указывать стили для столбцов может быть немного раздражающей и неэффективной — обычно вам нужно указывать информацию о стилях на каждые или в столбце или использовать сложный селектор например : nth-child .

      Возьмем следующий простой пример:

        <таблица>
        
           Данные 1 
           Данные 2 
        
        
           Калькутта 
           Оранжевый 
        
        
           Роботы 
           Джаз 
        
        
        таблица {
          граница-коллапс: коллапс;
        }
        td, th {
          граница: сплошной черный 1px;
          отступ: 10 пикселей 20 пикселей;
        }
        

      Что дает нам следующий результат:

      Это не идеально, так как мы должны повторить информацию о стилях для всех трех ячеек в столбце (мы, вероятно, установили бы класс для всех трех в реальном проекте и укажем стиль в отдельной таблице стилей).

      Стилизация с помощью

      Вместо этого мы можем указать информацию один раз в элементе . элементы указаны внутри контейнера сразу под открывающим тегом

      . Мы могли бы создать тот же эффект, что и выше, указав нашу таблицу следующим образом:

        <таблица>
        
      Данные 1 Данные 2
      Калькутта Оранжевый
      Роботы Джаз

      Фактически мы определяем два «столбца стиля», один из которых определяет информацию о стиле для каждого столбца.Мы не стилизуем первый столбец, но мы все равно должны включить пустой элемент — если бы мы этого не сделали, стиль был бы применен только к первому столбцу.

      Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто включить один элемент с атрибутом span на нем, например:

        
        
        

      Так же, как colspan и rowspan , span принимает безразмерное числовое значение, которое указывает количество столбцов, к которым вы хотите применить стиль.

      Активное обучение: colgroup и col

      А теперь пора попробовать самому.

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

      Создайте таблицу заново, выполнив следующие действия.

      1. Сначала создайте локальную копию нашего файла timetable.html в новом каталоге на вашем локальном компьютере.HTML содержит ту же таблицу, которую вы видели выше, без информации о стиле столбца.
      2. Добавьте элемент вверху таблицы, сразу под тегом , в который вы можете добавить элементы (см. Оставшиеся шаги ниже).
      3. Первые два столбца следует оставить без стиля.
      4. Добавьте цвет фона к третьему столбцу. Значение вашего атрибута стиля - background-color: # 97DB9A;
      5. Установите отдельную ширину для четвертого столбца.Значение атрибута стиля - width: 42px;
      6. Добавьте цвет фона к пятому столбцу. Значение атрибута стиля - background-color: # 97DB9A;
      7. Добавьте другой цвет фона и рамку к шестому столбцу, чтобы обозначить, что это особенный день и что она ведет новый класс. Значения для вашего атрибута стиля : background-color: # DCC48E; граница: сплошная 4px # C1437A;
      8. Последние два дня - свободные, поэтому просто установите для них не цвет фона, а заданную ширину; значение для атрибута стиля - width: 42px;
      9. Посмотрите, как у вас получается на примере.Если вы застряли или хотите проверить свою работу, вы можете найти нашу версию на GitHub как timetable-fixed.html (также посмотрите ее вживую).

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

        Создайте таблицу HTML быстро и легко с помощью нашего примера кода »

        HTML / Создайте таблицу HTML быстро и легко с помощью нашего примера кода

        в тегах HTML

        Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Узнать больше
        Что позволяет быстро и легко создать HTML-таблицу с помощью нашего примера кода ?
        Элемент
        используется вместе с дочерними элементами, такими как, <фут>
        , и другими, для добавления табличных данных в документ HTML.
        Дисплей
        встроенный

        Пример кода

          <таблица>
          
        Три самых популярных библиотеки JavaScript
        Библиотека jQuery Bootstrap Modernizr
        Доля рынка 96.1% 17,0% 14,3%
        Абсолютное использование 70,4% 12,4% 10,5%
        Доля рынка - это процент сайтов, использующих любую библиотеку JavaScript, которая использует указанную библиотеку. Абсолютное использование - это процент опрошенных веб-сайтов, включая те, которые не используют библиотеки JavaScript, которые используют указанную библиотеку.Все данные получены из W3Techs и верны на июнь 2016 года.
        Три самых популярных библиотеки JavaScript
        Библиотека jQuery Bootstrap Modernizr
        Доля рынка 96,1% 17,0% 14.3%
        Абсолютное использование 70,4% 12,4% 10,5%
        Доля рынка - это процент сайтов, использующих любую библиотеку JavaScript, использующую указанную библиотеку. Абсолютное использование - это процент опрошенных веб-сайтов, включая те, которые не используют библиотеки JavaScript, которые используют указанную библиотеку. Все данные получены от W3Techs и были точными по состоянию на июнь 2016 года.

        Таблицы для данных, а не макет

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

        Итак, как правильно использовать таблицы HTML? Для отображения табличных данных. Некоторые наборы данных проще всего понять и усвоить, если они представлены в виде таблицы. Если у вас есть такой набор данных для добавления на веб-сайт, таблица HTML - правильный инструмент для работы.

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

        Адам - ​​технический писатель, специализирующийся на документации и руководствах для разработчиков.

        Атрибуты быстрого и простого создания HTML-таблицы с помощью нашего примера кода

        Навигация по сообщениям

        Как создавать HTML-таблицы

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

        Создание таблиц в HTML

        Таблица

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

        Вы можете создать таблицу с помощью элемента

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

        В следующем примере демонстрируется самая простая структура таблицы.

          <таблица>
            
        Нет. Имя Возраст
        1 Питер Паркер 16
        2 Кларк Кент 34

        По умолчанию таблицы не имеют границ.Вы можете использовать свойство CSS border для добавления границ к таблицам. Кроме того, размер ячеек таблицы по умолчанию достаточно велик, чтобы уместить их содержимое. Чтобы добавить больше места вокруг содержимого в ячейках таблицы, вы можете использовать свойство CSS padding .

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

          table, th, td {
            граница: сплошной черный 1px;
        }
        th, td {
            отступ: 10 пикселей;
        }  

        По умолчанию границы вокруг таблицы и их ячейки отделены друг от друга.Но вы можете свернуть их в один, используя свойство border-collapse в элементе

        .

        Кроме того, текст внутри элементов

        отображается жирным шрифтом, по умолчанию выровненный по центру ячейки. Чтобы изменить выравнивание по умолчанию, вы можете использовать свойство CSS text-align .

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

          таблица {
            граница-коллапс: коллапс;
        }
        th {
            выравнивание текста: слева;
        }  

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

        Примечание: Большинство атрибутов элемента

        , таких как border , cellpadding , cellspacing , width , align , и т. Д.для стилизации внешнего вида таблиц в более ранних версиях был удален в HTML5, поэтому избегайте их использования. Вместо этого используйте CSS для стилизации таблиц HTML.


        Объединение нескольких строк и столбцов

        Spanning позволяет расширить строки и столбцы таблицы на несколько других строк и столбцов.

        Обычно ячейка таблицы не может перейти в пространство ниже или выше другой ячейки таблицы.Но вы можете использовать атрибуты rowspan или colspan для охвата нескольких строк или столбцов в таблице.

        Давайте попробуем следующий пример, чтобы понять, как в основном работает colspan :

          <таблица>
            
        Имя Телефон
        Джон Картер 5550192 5550152

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

          <таблица>
            
        Имя: Джон Картер
        Телефон: 55577854
        55577855

        Добавление подписей к таблицам

        Вы можете указать заголовок (или заголовок) для ваших таблиц с помощью элемента .

        Элемент должен быть размещен сразу после открывающего тега

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

        В следующем примере показано, как использовать этот элемент в таблице.

          <таблица>
            
        Информация о пользователях
        Нет. Имя Возраст
        1 Питер Паркер 16
        2 Кларк Кент 34

        Определение заголовка, текста и нижнего колонтитула таблицы

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

        В следующем примере демонстрируется использование этих элементов.

          <таблица>
            
                
                     Предметы 
                     Расходы 
                
            
            
                
                     Стационарный 
                     2 000 
                
                
                     Мебель 
                     10 000 
                
            
            <фут>
                
                     Итого 
                     12 000 
                
            
          

        Примечание: В HTML5 элемент может быть размещен до или после элементов и , но должен появляться после любых , и элементов.

        Совет: Не используйте таблицы для создания макетов веб-страниц. Макеты таблиц обрабатываются медленнее и их очень сложно поддерживать. Его следует использовать только для отображения табличных данных.

        .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *