Курс: Информатика и ВТ

19.06.20г.

Тема: Создание и заполнение таблиц с помощью html- разметки.

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

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

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

Создание таблиц в 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>

HTML

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

РИС.1. ВНЕШНИЙ ВИД ТАБЛИЦЫ БЕЗ ФОРМАТИРОВАНИЯ CSS-СВОЙСТВАМИ

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

/* внешние границы таблицы серого цвета толщиной 1px */

table {border: 1px solid grey;}

/* границы ячеек первого ряда таблицы */

th {border: 1px solid grey;}

/* границы ячеек тела таблицы */

td {border: 1px solid grey;}

CSS

Промежутки между ячейками таблицы убираются с помощью свойства table {border-collapse: collapse;}.

Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width:

/* сделает ширину таблицы равной ширине блока контейнера, в котором она находится */

table {width: 100%;}

/* задаст фиксированную ширину для таблицы */

table {width: 600px;}

CSS

Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения:
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>

HTML

4. Как сделать ячейку тела таблицы

Элемент <td> создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Парные теги <td></td>, расположенные в одном ряду, определяют количество ячеек в строке таблицы. Количество пар ячеек <td> должно быть равно количеству пар ячеек <th>. Для элемента доступны атрибуты colspan, rowspan, headers.

<table>

<tr><th>ячейка заголовка</th><th>ячейка заголовка</th></tr>

<tr><td>ячейка тела таблицы</td><td>ячейка тела таблицы</td></tr>

</table>

HTML

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>

HTML

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>

HTML

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>

HTML

Такая группировка строк была заложена в стандарте в расчете на то, что обозреватели при отображении длинных таблиц обеспечат прокрутку строк данных при сохранении надзаголовка и подзаголовка неподвижными, а при их выводе на принтер смогут использовать надзаголовок и подзаголовок в качестве колонтитулов страницы. Однако, современные обозреватели этого не делают и либо просто отображают <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>

HTML

ПРИМЕР ОБЪЕДИНЕНИЯ ЯЧЕЕК ТАБЛИЦЫ ПО ГОРИЗОНТАЛИ ПРИ ПОМОЩИ АТРИБУТА 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>

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

HTML

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;

Войти