Вложенные таблицы html – HTML таблицы продвинутые возможности и доступность — Изучение веб-разработки

Leave a Comment / Html / By /

Вложенные таблицы | htmlbook.ru

Объединение ячеек имеет некоторые недостатки, поэтому этот метод создания таблиц нельзя использовать повсеместно. Для примера рассмотрим пример 12.5, где задается высота ячейки с помощью атрибута height.

Пример 12.5. Явно заданная высота ячейки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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 valign="top">Duis te feugifacilisi. Duis autem dolor in hendrerit 
         in vulputate velit esse molestie consequat.</td>
    <td rowspan="2" valign="top">Lorem ipsum dolor sit amet, consectetuer 
         adipiscing  elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
         dolore magna aliguam  erat volutpat. Ut wisis enim ad minim veniam, quis 
         nostrud exerci tution  ullamcorper suscipit lobortis nisl ut aliquip ex ea 
         commodo consequat. Duis te  feugifacilisi. Ut wisi enim ad minim veniam, quis 
         nostrud exerci taion  ullamcorper suscipit lobortis nisl ut aliquip ex 
         en commodo consequat.</td>
   </tr>
   <tr>
    <td>Lorem ipsum</td>
   </tr>
  </table>
 </body>
</html>

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

Рис. 12.7. Высота ячеек

Левая нижняя ячейка согласно коду HTML имеет высоту 40 пикселов, но поскольку высота содержимого правой колонки больше, чем содержимое левой колонки, то высота ячейки меняется. Получается, что атрибут height в данном случае игнорируется. Заметим, что данная особенность проявляется только в браузере Opera, но и другие браузеры могут отображать сложные таблицы с ошибками. Это часто выражается в тех таблицах, где явно устанавливается высота ячеек и их объединение по вертикали. Для упрощения верстки применяется прием с вложенными таблицами.

Суть идеи проста — в ячейку вкладывается еще одна таблица со своими параметрами. Поскольку эти таблицы в каком-то смысле независимы, то можно создавать довольно причудливые конструкции. Чтобы вложенная таблица занимала всю ширину ячейки, таблице надо задать ширину 100%.

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

Пример 12.6. Вложенные таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Вложенные таблицы</title>
 </head>
 <body>
  <table border="0" cellpadding="5" cellspacing="0">
   <tr>
    <td valign="top" bgcolor="#f0f0f0">
     <table cellpadding="2" cellspacing="1">
      <tr><td bgcolor="#ffffff">Lorem</td></tr>
      <tr><td bgcolor="#ffffff">Ipsum</td></tr>
      <tr><td bgcolor="#ffffff">Dolor</td></tr>
      <tr><td bgcolor="#ffffff">Sit</td></tr>
      <tr><td bgcolor="#ffffff">Amet</td></tr>
     </table>
    </td>
    <td valign="top" bgcolor="#ffffee">Lorem ipsum dolor sit amet, consectetuer 
         adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
         dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis 
         nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea 
         commodo consequat.</td>
   </tr>
  </table>
 </body>
</html>

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

Рис. 12.8. Вид вложенных таблиц

В данном макете с помощью таблицы создается две колонки, причем левая колонка имеет фиксированную ширину 150 пикселов. Чтобы создать подобие навигации, внутрь ячейки добавлена еще одна таблица с шириной 100%.

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

Теги для создания и оформления таблицы в html

Цель урока: создание и оформление таблицы в html

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

Рассмотрим теги для создания таблицы:

1
2
3
4
5

<table>
	<tr>
		<td> содержание </td>
	</tr>
</table>

<table> <tr> <td> содержание </td> </tr> </table>

Результат:

Добавим границу для таблицы — атрибут border:

1
2
3
4
5

<table border="1">
	<tr>
		<td> содержание </td>
	</tr>
</table>

<table border=»1″> <tr> <td> содержание </td> </tr> </table>

Результат:

Создания таблицы начинается с тега table (от англ. «таблица»). Тег tr служит для создания строки. В строке располагаются ячейки — тег td. Завершается таблица закрывающим тегом /table


Или пример таблицы посложнее:

Атрибуты тега TABLE

align left — таблица влево;
center – табл. по центру;
right — табл. вправо.
width 400
50%
bоrdеr ширина
bordercolor цвета рамки
сеllspacing ширина грани рамки
cellpadding внутреннее расстояние до рамки
bgсоlоr Цвет
#rrggbb
bасkground файл (фон таблицы)

Важно: Для ячеек-заголовка таблицы используется тег th вместо td. Браузер размещает содержимое таких ячеек по центру и делает шрифт полужирным

Атрибуты тега TR — строки

alignleft, center, rightвыравнивание по горизонтали
valigntop, middle, bottom, baselineвыравнивание по вертикали
bgcolorцветзадний фон
bordercolorцветцвет границы

Атрибуты тега TD или TH — ячейки

alignleft, center, rightвыравнивание по горизонтали
valigntop, middle, bottom, baselineвыравнивание по вертикали
widthчисло или процентширина ячейки
bgcolorцветцвет фона
backgroundфайлфайл фона
bordercolorцветцвет границы
nowrapзаставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой
Важно:
  • Тег caption служит для создания заголовка таблицы
  • Для группировки заголовочных ячеек используется тег thead
  • Для группировки основного содержимого таблицы используется тег
    tbody
  • Тег tfoot определяет нижнюю часть таблицы

Тег caption заголовка таблицы может иметь атрибут, определяющий расположение заголовка — align — со следующими значениями:
top — заголовок над таблицей,
bottom — заголовок под таблицей,
left — заголовок вверху и выровнен влево,
right — заголовок вверху и выровнен вправо. К сожалению не все значения «работают» во всех браузерах.

Пример: Создать «каркас» таблицы со всеми тегами группировки


Выполнение:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table  border="1">
<caption>таблица</caption>
<thead>
	<tr>
	<th>Заголовок 1</th><th>3аголовок 2</th>
	</tr>
</thead>
<tbody>
	<tr>
	<td>содержимое</td><td>содержимое</td>
	</tr>
</tbody>
<tfoot>
...
</tfoot>
</table>

<table border=»1″> <caption>таблица</caption> <thead> <tr> <th>Заголовок 1</th><th>3аголовок 2</th> </tr> </thead> <tbody> <tr> <td>содержимое</td><td>содержимое</td> </tr> </tbody> <tfoot> … </tfoot> </table>

Объединение ячеек в таблице

В происходит при помощи двух атрибутов тега td: COLSPAN — объединение ячеек по горизонтали, ROWSPAN — объединение ячеек по вертикали.

Синтаксис COLSPAN:

1
2
3
4

<table border="1">
<tr><td colspan="2"> </td></tr>
<tr><td> </td><td> </td></tr>
</table>

<table border=»1″> <tr><td colspan=»2″> </td></tr> <tr><td> </td><td> </td></tr> </table>

Синтаксис ROWSPAN:

1
2
3
4

<table border="1">
<tr><td rowspan="2"> </td><td> </td></tr>
<tr><td> </td></tr>
</table>

<table border=»1″> <tr><td rowspan=»2″> </td><td> </td></tr> <tr><td> </td></tr> </table>

Пример: создать таблицу по образцу на картинке. Использовать слияние ячеек


Выполнение:
1
2
3
4
5
6
7
8
9
10
11
12

<table  border="1">
<caption>таблица с объединенными ячейками </caption>
<tr>
<th rowspan="2">&nbsp;</th>
<th colspan="2">3аголовок 1</th>
</tr>
<tr><th> заголовок 1.1</th><th> заголовок 1.2</th></tr>
<tr><th> заголовок 2</th>
<td> ячейка 1</td><td> ячейка 2</td></tr>
<tr><th> заголовок 3</th>
<td> ячейка 3</td><td> ячейка 4</td></tr>
</table>

<table border=»1″> <caption>таблица с объединенными ячейками </caption> <tr> <th rowspan=»2″>&nbsp;</th> <th colspan=»2″>3аголовок 1</th> </tr> <tr><th> заголовок 1.1</th><th> заголовок 1.2</th></tr> <tr><th> заголовок 2</th> <td> ячейка 1</td><td> ячейка 2</td></tr> <tr><th> заголовок 3</th> <td> ячейка 3</td><td> ячейка 4</td></tr> </table>

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

Группировка ячеек: COLGROUP

Элемент colgroup позволяет создавать группы колонок с одинаковыми свойствами.

Рассмотрим на примере:

Пример: Создать таблицу по образцу


Выполнение:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<TABLE border="4">
<colgroup >
	<col span="2" />
	<col />
</colgroup>
<colgroup>
	<col span=2/>
</colgroup>
<TR>
<TD> 1-1 </TD><TD> 1-2 </TD><TD> 1-3 </TD><TD> 1-4 </TD><TD> 1-5</TD>
</TR>
<TR>
<TD> 2-1 </TD><TD> 2-2 </TD><TD> 2-3 </TD><TD> 2-4 </TD><TD> 2-5 </TD>
</TR>
</table>

<TABLE border=»4″> <colgroup > <col span=»2″ /> <col /> </colgroup> <colgroup> <col span=2/> </colgroup> <TR> <TD> 1-1 </TD><TD> 1-2 </TD><TD> 1-3 </TD><TD> 1-4 </TD><TD> 1-5</TD> </TR> <TR> <TD> 2-1 </TD><TD> 2-2 </TD><TD> 2-3 </TD><TD> 2-4 </TD><TD> 2-5 </TD> </TR> </table>

Атрибуты тега COLGROUP

align выравнивание содержимого столбца
  1. left — по левому краю (по умолчанию)
  2. center — по центру
  3. right — по правому краю

не работает в Firefox

dir определяет направление символов:
  1. ltr — слева направо
  2. rtl — справа налево

не работает в Firefox

span количество столбцов, к которым будет применяться оформление (по умолчанию 1)
style задает встроенную таблицу стилей
valign вертикальное выравнивание в ячейке таблицы
  1. bottom — по нижнему краю ячейки
  2. middle — по центру ячейки (по умолчанию)
  3. top — по верхнему краю ячейки

не работает в Firefox

width ширина столбца

HTML вложенные таблицы

Таблицы со сложной структурой проще заменять на вложенные таблицы.

Пример: создайте вложенные таблицы по образцу:


Выполнение:
1
2
3
4
5
6
7
8
9
10
11

<TABLE border="4">
<tr><td bgcolor="yellow">Таблица 1</td>
<td bgcolor="yellow">
<TABLE border=2 bgcolor="#FFFFFF">
<tr><td>Таблица 2</td> <td>Ячейка 2-2</td></tr>
<tr><td>Ячейка 3-2</td> <td>Ячейка 4-2</td></tr>
</TABLE>
</td>
<tr><td bgcolor="yellow">Ячейка 3-1</td>
<td bgcolor="yellow">Ячeйкa 4-1</td></tr>
</TABLE>

<TABLE border=»4″> <tr><td bgcolor=»yellow»>Таблица 1</td> <td bgcolor=»yellow»> <TABLE border=2 bgcolor=»#FFFFFF»> <tr><td>Таблица 2</td> <td>Ячейка 2-2</td></tr> <tr><td>Ячейка 3-2</td> <td>Ячейка 4-2</td></tr> </TABLE> </td> <tr><td bgcolor=»yellow»>Ячейка 3-1</td> <td bgcolor=»yellow»>Ячeйкa 4-1</td></tr> </TABLE>

Лабораторная работа:
  • Создайте таблицу с фиксированными размерами, содержащую ячейки указанной на рисунке ширины
  • Вставьте в левую нижнюю ячейку вложенную таблицу
  • Фон ячеек вложенной таблицы сделайте серым



Лабораторная работа:
  • Откройте задание, выполненное на прошлой лабораторной работе
  • Добавьте в верхнюю ячейку еще одну вложенную таблицу
  • Фон ячеек вложенной таблицы сделайте белым


seodon.ru | Учебник HTML — Вложенные таблицы

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

Пример создания вложенных таблиц в HTML

<!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=Windows-1251">
<title>Вложенные таблицы в HTML</title>
</head>
<body>
 <table border="3">
  <tr>
   <td>Ячейка 1.1</td>
   <td colspan="3">Ячейки 1.2 - 1.4</td>
  </tr>

  <tr>
   <td>Ячейка 2.1</td>
   <td colspan="2" rowspan="2">Ячейки 2.2, 2.3 и 3.2, 3.3</td>
   <td>Ячейка 2.4</td>
  </tr>

  <tr>
   <td>Ячейка 3.1</td>
   <td>
    <table border="2">
     <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr>
     <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>
    </table>
   </td>
  </tr>

  <tr>
   <td colspan="4">Ячейки 4.1 - 4.4</td>
  </tr>
 </table>
 </body>
</html>

Результат в браузере

Ячейка 1.1Ячейки 1.2 — 1.4
Ячейка 2.1Ячейки 2.2, 2.3 и 3.2, 3.3Ячейка 2.4
Ячейка 3.1
Ячейка 1.1Ячейка 1.2Ячейка 1.3
Ячейка 2.1Ячейка 2.2Ячейка 2.3
Ячейки 4.1 — 4.4

Гораздо проще, чем, если бы мы занялись одним объединением, правда? НО! Рекомендую вам, по возможности, отказаться от использования вложенных таблиц, то есть применять их только там, где это действительно нужно. Дело в том, что браузеры отображают HTML-таблицы только после того, как проведут все необходимые расчеты связанные с ними: количество столбцов, рядов, ячеек с учетом объединения, оценку содержимого каждой ячейки и их размеров и т.д.

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

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

Домашнее задание.

  1. Посмотрите на результат примера и постарайтесь повторить.
  2. Обратите внимание, что логотип страницы сделан изображением-ссылкой.
  3. И еще: левая и правая колонки меню имеют нефиксированную ширину, то есть при уменьшении размеров страницы, они тоже пропорционально уменьшаются.

Посмотреть результат → Посмотреть ответ

Таблица внутри таблицы в html

Таблица внутри таблицы в html

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

Если вы хорошо знаете HTML, то у вас не возникнет проблемы, но всётаки давайте попробуем это сделать.

Для начала, давайте создадим простую таблицу 2х2:


<table border="1">
	<tr>
		<td>Ячейка 1.1</td>
		<td>Ячейка 1.2</td>
	</tr>
	<tr>
		<td>Ячейка 2.1</td>
		<td>Ячейка 2.2</td>
	</tr>
</table>

Получили простую таблицу:

Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.2

Теперь внутри ячейки 2.1 мы вставим таблицу:


<table border="1">
	<tr>
		<td>Ячейка 1.1</td>
		<td>Ячейка 1.2</td>
	</tr>
	<tr>
		<td>
    		<table border="1">
            	<tr>
            		<td>Ячейка 2.1 - 1.1</td>
            		<td>Ячейка 2.1 - 1.2</td>
            	</tr>
            	<tr>
            		<td>Ячейка 2.1 - 2.1</td>
            		<td>Ячейка 2.1 - 2.2</td>
            	</tr>
            </table>
		</td>
		<td>Ячейка 2.2</td>
	</tr>
</table>

И мы получим следующие:

Ячейка 1.1 Ячейка 1.2
Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.2
Ячейка 2.2

Вот так просто и создаётся таблица в таблице. Также попробуйте наш генератор html-таблиц.

HTML: Создание таблицы | Таблица внутри таблицы

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

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

Создание таблицы всегда начинается со строк, которые определяются с помощью тега <tr>, каждая строка, в свою очередь, состоит из ячеек. Тег <tr> может содержать в себе только теги для создания ячеек.

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


<table border="1">
  <tr><th>Первый заголовок</th><th>Второй заголовок</th></tr>
  <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
  <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
</table>
Попробовать »

Таблица внутри таблицы

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

Для примера, возьмём уже созданную ранее нами таблицу и поместим этот код во вторую ячейку второй строки:


<table border="1">
  <tr><th>Первый заголовок</th><th>Второй заголовок</th></tr>
  <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
  <tr><td>строка 2, ячейка 1</td>
    <td>строка 2, ячейка 2
	  <table border="1">
        <tr><th>Первый заголовок</th><th>Второй заголовок</th></tr>
        <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
        <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
      </table>
	</td>
  </tr>
</table>
Попробовать »

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

С этой темой смотрят:

3.10. Создание вложенных таблиц. HTML, XHTML и CSS на 100%

3.10. Создание вложенных таблиц

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

Рис. 3.14. Сложная HTML-таблица

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

В листинге 3.8 приведен код таблицы, изображенной на рис. 3.13. Здесь применяется метод вложения одной таблицы в другую. Внешняя таблица состоит из двух строк. Первая строка содержит четыре ячейки, вторая – таблицу со своей независимой структурой. Внутренняя таблица, в свою очередь, содержит две строки, каждая из которых содержит по три ячейки.

Листинг 3.8. Пример таблицы, которая содержит еще одну таблицу

<html>

<head>

<title>HTML-таблица</title>

<head>

<body>

<table border=»4″ bordercolor=»#000000″ cellspacing=»0″ cellpadding=»10″>

<caption>Создание вложенных таблиц</caption>

<tr><td> 1×1</td><td>1×2</td><td>1×3</td><td>1×4</td></tr>

<tr><td colspan=4>

<table border=»3″ bordercolor=»#000000″ cellspacing=»0″ cellpadding=»10″>

<tr><td> 1×1</td><td>1×2</td><td>1×3</td></tr>

<tr><td> 2×1</td><td>2×2</td><td>2×3</td></tr>

</table>

</td>

</tr>

</table>

</body>

</html>

Данный текст является ознакомительным фрагментом.

Читать книгу целиком

Поделитесь на страничке

Следующая глава >

Тег | 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>

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

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