Таблица тегов: Тег | htmlbook.ru

Содержание

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
2.0+ 1.0+ 2.0+ 1.0+ 1.0+ 1.0+ 1.0+

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

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.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>

Таблица основных тегов HTML | Vavik96

Основные теги
<;html>;<;/html>; Указывает программе просмотра страниц что это HTML документ.
<;head>;<;/head>;
Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.
<;body>;<;/body>; Определяет видимую часть документа
Теги оглавления
<;title>;<;/title>;Помещает название документа в оглавление программы просмотра страниц
Атрибуты тела документа
<;body bgcolor=?>;Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB – пример: FF0000 – красный цвет.
<;body text=?>;
Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB – пример: 000000 – черный цвет.
<;body link=?>;Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB – пример: 00FF00 – зеленый цвет.
<;body vlink=?>;Устанавливает цвет гиперссылок на котох вы уже побывали, используя значение цвета в виде RRGGBB – пример: 333333 – серый цвет.
<;body alink=?>;Устанавливает цвет гиперссылок при нажатии.
Теги для форматирования текста
<;pre>;<;/pre>;Обрамляет предварительно отформатированный текст.
<;h2>;<;/h2>;Создает САМЫЙ БОЛЬШОЙ заголовок
<;h5>;<;/h5>;Создает самый маленький заголовок
<;b>;<;/b>;Создает жирый текст
<;i>;<;/i>;Создает наклонный текст
<;tt>;<;/tt>;Создает текст – имитирующий стиль печатной машинки.
<;cite>;<;/cite>;Используется для цитат, обычно наклонный текст.
<;em>;<;/em>;Используется для выделения из текста слова (наклонный или жирный текст)
<;font size=?>;<;/font>;
Устанавливает размер текста в пределах от 1 до 7.
<;font color=?>;<;/font>;Устанавливает цвет текста, используя значение цвета в виде RRGGBB.
Гиперссылки
<;a href=»URL»>;<;/a>;Создает гиперссылку на другие документы или часть текущего документа.
<;a href=»mailto:EMAIL»>;
<;/a>;
Создает гиперссылку вызова почтовой программы для написания письма по указанному адресу.
<;a name=»NAME»>;<;/a>;Отмечает часть текста как цель для гипперссылок в документе.
<;a href=»#NAME»>;<;/a>;Создает гиперссылку на часть текущего документа.
Форматирование
<;p>;Создает новый параграф
<;p align=?>;Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center
<;br>;Вставляет перевод строки.
<;blockquote>;
<;/blockquote>;
Создает отступы с обеих сторон текста.
<;dl>;<;/dl>;Создает список определений.
<;dt>;
Определяет каждый из терминов списка
<;dd>;Описывает каждое определение
<;ol>;<;/ol>;Создает нумерованный список
<;li>;Определяет каждый элемент списка и присваивает номер
<;ul>;<;/ul>;Создает ненумерованный список
<;li>;Предваряет каждый элемент списка и добавляет кружок или квадратик.
<;div align=?>;Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей
Графические элементы
<;img src=»name»>;Добавляет изображение в HTML документ
<;img src=»name» align=?>;Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle
<;img src=»name» border=?>;Устанавливает толщину рамки вокруг изображения
<;hr>;Добавляет в HTML документ горизонтальную линию.
<;hr size=?>;Устанавливает высоту(толщину) линии
<;hr width=?>;Устанавливает ширину линии, можно указать ширину в пикселах или процентах.
<;hr noshade>;Создает линию без тени.
<;hr color=?>;Задает линии определенный цвет. Значение RRGGBB.
Таблицы
<;table><;/table>Создает таблицу.
<;tr><;/tr>Определяет строку в таблице.
<;td><;/td>Определяет отдельную ячейку в таблице.
<;th><;/th>Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)
Атрибуты таблицы
<;table border=#>;Задает толщину рамки таблицы.
<;table cellspacing=#>;Задает расстояние между ячейками таблицы.
<;table cellpadding=#>;Задает расстояние между содержимым ячейки и ее рамкой.
<;table width=#>;Устанавливает ширину таблицы в пикселах или процентах от ширины документа.
<;tr align=?>; или <;td align=?>;Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.
<;tr valign=?>; или <;td valign=?>;Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.
<;td colspan=#>;Указывает кол-во столбцев которое объединено в одной ячейке. (по умолчанию=1)
<;td rowspan=#>;Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1)
<;td nowrap>;Не позволяет программе просмотра делать перевод строки в ячейке таблицы.
Фреймы
<;frameset>;<;/frameset>;Предваряет тег <;body>; в документе, содержащем фреймы;
<;frameset rows=»value,value»>;Определяет строки в таблице фреймов, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы фреймов.
<;frameset cols=»value,value»>;Определяет столбцы в таблице фреймов, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы фреймов.
<;frame>;Определяет единичный фрейм или область в таблице фреймов.
<;noframes>;<;/noframes>;Определяет, что будет показано в окне браузера если он не поддерживает фреймы.
Атрибуты фреймов
<;frame src=»URL»>;Определяет какой из HTML документов будет показан во фрейме.
<;frame name=»name»>;Указывает Имя фрейма или области, что позволяет перенаправлять информацию в этот фреймр или область из других фреймов.
<;frame marginwidth=#>;Определяет величину отступов по левому и правому краям фрема; должно быть равно или больше 1.
<;frame marginheight=#>;Определяет величину отступов по верхнему и нижнему краям фрейма; должно быть равно или больше 1.
<;frame scrolling=VALUE>;Указывает будет-ли выводится линейка прокрутки во фрейме; значение value может быть “yes,” “no,” или “auto”. Значение по умолчанию для обычных документов – auto.
<;frame noresize>;Препятствует изменению размеров фрейма.
Формы
Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML только создает внешний интерфейс формы.
<;form>;<;/form>;Создает формы
<;select multiple name=»NAME» size=?>;<;/select>;Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.
<;option>;Указывает каждый отдельный элемент меню
<;select name=»NAME»>;<;/select>;Создает ниспадающее меню
<;option>;Указывает каждый отдельный элемент меню
<;textarea name=»NAME» cols=40 rows=8>;<;/textarea>;Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.
<;input type=»checkbox» name=»NAME»>;Создает checkbox. За тегом следует текст.
<;input type=»radio» name=»NAME» value=»x»>;Создает radio кнопку. За тегом следует текст.
<;input type=text name=»foo» size=20>;Создает строку для ввода текста. Параметром Size указывается длина в символах.
<;input type=»submit» value=»NAME»>;Создает кнопку “Принять”
<;input type=»image» border=0 name=»NAME» src=»name.gif»>;Создает кнопку “Принять” – для этого используется изображение
<;input type=»reset»>;Создает кнопку “Отмена”

Таблицы | 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. Результат создания таблицы с четырьмя ячейками

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

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

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

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

1
2
3
4
5
<table>
	<tr>
		<td> содержание </td>
	</tr>
</table>

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

Результат:
пример таблицы html
Добавим границу для таблицы — атрибут border:

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

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

Результат:
простая таблица html пример

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

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

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

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

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

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

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

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

align left, center, right выравнивание по горизонтали
valign top, 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>

Лабораторная работа №1: Создайте таблицу по образцу. У таблицы должен быть заголовок и области для группировки (thead — 1-я строка таблицы, tbody — 2-я и 3-я строки таблицы, tfoot — 4-я строка таблицы).
Таблица с областями группировки
Столбец 1 Столбец 2 Столбец 3 Столбец 4
Строка2 Ячейка1 Строка2 Ячейка2 Строка2 Ячейка3 Строка2 Ячейка4
Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3 Строка3 Ячейка4
Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3 Строка4 Ячейка4

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

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

Синтаксис COLSPAN:
html объединение ячеек в таблице пример

1
2
3
4
5
6
7
8
9
<table>
<tr>
  <td colspan="2"> </td>
</tr>
<tr>
  <td> </td>
  <td> </td>
</tr>
</table>

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

Синтаксис ROWSPAN:
html объединение ячеек в таблице пример

1
2
3
4
5
6
7
8
9
<table>
<tr>
  <td rowspan="2"> </td>
  <td> </td>
</tr>
<tr>
  <td> </td>
</tr>
</table>

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

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

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>

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

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

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

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

Пример: Создать таблицу по образцу
группировка ячеек html

Выполнение:

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 вложенные таблицы

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

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

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<TABLE border="4" bgcolor="yellow">
<tr>
   <td>Таблица 1</td>
   <td>
      <TABLE>
      <tr>  <td>Таблица 2</td><td>Ячейка 2-2</td>  </tr>
      <tr>  <td>Ячейка 3-2</td><td>Ячейка 4-2</td> </tr>
      </TABLE>
   </td>
<tr>
   <td>Ячейка 3-1</td>
   <td>Ячeйкa 4-1</td>
</tr>
</TABLE>

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

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

вложенные таблицы html примеры

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

задание вложенные таблицы html

Краткая таблица всех HTML тегов с описанием и фото

Теги: Описание: Атрибуты: Скриншот:
<!DOCTYPE> Этот параметр предоставляет интернет браузеру общую информацию об HTML документе.  html, public
<!— —> Этот тег дает возможность добавить комментарий в HTML код, который не выводится на интернет странице и не обрабатывается Web-браузером. Нет
<a> Тег <a> предназначен для создания гиперссылок. accesskey, charset, coords, href, hreflang, media, name, rel, rev, shape, tabindex, target, title, type
<abbr> Тег <abbr> нужен для создания аббревиатур. Он подчеркивает сокращение пунктирной линией,а при наведении мышкой можно увидеть расшифровку аббревиатуры. title <abbr>

abbr

<acronym> Тег <acronym> выделяет текст как акроним, и подчеркивает его пунктирной линией. title <acronym>

acronym

<address> Тег <address> нужен для указания контактных данных создателя Web-страницы или сайта. Нет <address>

address

<applet> Тег <applet> нужен для вставки на страницу апплетов(программы, на языке Java). align, alt, archive, code, codebase, height, hspace, vspace, width <applet>

applet

<area> Тег <area> создает активные области изображения, которые являются ссылками. accesskey, alt, coords, href, hreflang, nohref, shape, tabindex, target, type
<article> Тег <article> задает логический блок, содержание которого может бытьвроде новости, статьи, записи блога, форума и т.п. Нет
<aside> Тег <aside> предназначен для определения блока сбоку от контента для размещения рубрик, ссылок на архив, меток и т.п. Боковая панель. Нет <aside>

aside

<audio> Тег <audio> предназначен для вставки в Web-страницу аудиоролика. autoplay, controls, loop, preload, src <audio>

audio

<b> Тег <b> предназначен для выделения текста жирным начертанием. Нет <b>

b

<base> Этот элемент устанавливается внутри тега <head> и инструктирует браузер относительно полного базового адреса текущего документа. href, target
<basefont> Тег <basefont> нужен для создания свойств шрифта, таких как: размер, цвет и тип шрифта. color, face, size <basefont>

basefont

<bdi> Тег <bdi> необходим для отделения фрагмента текста, который должен быть отделен от основного описания.Такое оформление нужно для текстов с разными языками. dir
<bdo> Тег <bdo> предназначен для вывода текста справа налево или слева на право. dir <bdo>

bdo

<bgsound> Тег <bgsound> предназначен для проигрывания музыкального файла, который будет проигрываться в фоновом режимена Web-странице при ее открытии. balance, loop, src, volume
<blockquote> Тег <blockquote> предназначен для добавления цитат. Нет <blockquote>

blockquote

<big> Тег <big> увеличивает размер выделенного текста относительно обычного. Нет <big>

big

<body> Тег <body> необходим для хранения содержимого Web-страницы, а именно контента в окне браузера.Контент, который следует выводить в документе, нужно располагать именно внутри тега <body>. alink, background, bgcolor, bgproperties, bottommargin, leftmargin, link, rightmargin, scroll, text, topmargin, vlink
<blink> Заставляет ваш текст мигать. Нет
<br> Тег <br> нужен для перевода строки на новую. clear <br>

br

<button> Тег <button> нужен для создания кнопки на вашей Web-странице. accesskey, autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, type, value <button>

button

<canvas> Тег <canvas> предназначен для создания области, в которую при помощи JavaScript можно нарисовать разные объекты, выводить изображения, трансформировать их и менять свойства. height, width <canvas>

canvas

<caption> Этот тег необходим для создания заголовка к таблице и может размещаться только внутри тега <table>,сразу после открывающего тега. По умолчанию отображается перед таблицей и описывает ее содержимое. align, valign <caption>

caption

<center> Тег <center> выравнивает содержимое по центру. Нет <center>

center

<cite> Тег <cite> делает ваш текст цитатой либо сноской на другой источник. Нет <cite>

cite

<code> Тег <code> предназначен для опубликования части или полного исходного кода программы. Нет <code>

code

<col> Тег <col> предназначен для задания ширины и других характеристик одной или нескольких колонок таблицы. align, char, charoff, span, valign, width <col>

col

<colgroup> Этот тег используется для задания ширины и стиля одной или нескольких колонок таблицы. align, char, charoff, span, valign, width <colgroup>

colgroup

<command> Тег <command> нужен для отображения команды в виде переключателя, флажка или маркера. Этот тег необходимо размещать внутри <menu>, иначе он не будет отображаться. checked, disabled, icon, label, radiogroup, type
<comment> Тег <comment> нужен для добавления комментариев в HTML код. Его необходимо использовать только внутри тега <body>. Нет
<datalist> Этот тег предназначен для создания списка вариантов, которые можно выбирать в текстовом поле. id <datalist>

datalist

<dd> Тег <dd> предназначен для создания списка определений. Нет <dd>

dd

<del> Тег <del> необходим для того чтобы показать что данный текст был удален. Обычно текст выделенный этим тегом отображается как перечеркнутый. cite, datetime <del>

del

<details> Этот тег предназначен для хранения описания к чему-либо, которое может быть отображено пользователем. open
<dfn> Тег <dfn> предназначен для выделения нового термина, который оформляется курсивом. Нет <dfn>

dfn

<dir> Тег <dir> предназначен для создания списков, содержащих названия директорий. Нет <dir>

dir

<div> Тег <div> предназначен для выделения фрагмента документа с целью изменения вида содержимого.Обычно вид блока настраивается с помощью CSS-стилей. align, title <div>

div

<dl> Тег <dl> предназначен для создания списка определений. Нет <dl>

dl

<dt> Список начинается с тега <dl>, а внутри обычно содержатся тег <dt> создающий термини тег <dd> задающий определение этого термина. Нет <dt>

dt

<em> Тег <em> нужен затем чтобы акцентировать внимание на тексте. Обычно отображается в браузере курсивным начертанием. Нет <em>

em

<embed> Этот элемент используется для загрузки и отображения объектов(аудио, видеофайлов, флэш и т.п.) align, height, hidden, hspace, pluginspage, src, type, vspace, width
<fieldset> Тег <fieldset> необходим для группирования элементов формы. disabled, form, title <fieldset>

fieldset

<figcaption> Тег <figcaption> предназначен для описания тега <figure>.И должен быть первым или последним элементом в группе. Нет <figcaption>

figcaption

<figure> Тег <figure> предназначен для группирования разных элементов, например, картинок и подписей к ним. Нет <figure>

figure

<font> Этот тег служит для придания вашему тексту оригинальных характеристик шрифта, таких как цвет, размер и тип.Этот тег считается устаревшим и рекомендуется им не пользоваться. color, face, size <font>

font

<form> Тег <form> предназначен для установки формы на Web-страницу.Форма нужна для обмена данными между пользователем и сервером. accept-charset, action, autocomplete, enctype, method, name, novalidate, target <form>

form

<footer> Тег <footer> нужен для реализации <<подвала>> сайта, это раздел обычно находящийся внизу HTML страницы,где размещается контактная информация, имя создателя сайта, дата и правовая информация. Нет <footer>

footer

<frame> Тег <frame> предназначен для определения свойства отдельного фрейма, на которые делится окно браузера. bordercolor, frameborder, name, noresize, scrolling, src <frame>

frame

<frameset> Тег <frameset> определяет структуру фреймов на Web-странице.Фреймы разделяют окно браузера на отдельные окна, расположенные вплотную друг к другу.В каждую из таких окон загружается отдельная Web-страница определяемая с помощью тега <frame>. border, bordercolor, cols, frameborder, framespacing, rows <frameset>

frameset

<h2> Этот тег необходим для создания заголовка первого уровня. Текст будет отображаться крупным жирным шрифтом.(Самый крупный заголовок) align

h2

<h3> Этот тег необходим для создания заголовка второго уровня. Текст будет отображаться крупным жирным шрифтом.(Менее крупный заголовок чем заголовок первого уровня) align

h3

<h4> Этот тег необходим для создания заголовка третьего уровня. Текст будет отображаться крупным жирным шрифтом.(Менее крупный заголовок чем заголовок второго уровня) align

h4

<h5> Этот тег необходим для создания заголовка четвертого уровня. Текст будет отображаться крупным жирным шрифтом.(Менее крупный заголовок чем заголовок третьего уровня) align

h5

<h5> Этот тег необходим для создания заголовка пятого уровня. Текст будет отображаться крупным жирным шрифтом.(Менее крупный заголовок чем заголовок четвертого уровня) align

h5

<h6> Этот тег необходим для создания заголовка шестого уровня. Текст будет отображаться крупным жирным шрифтом.(Самый маленький заголовок) align

h6

<head> Тег <head> нужен для хранения технических элементов, которые помогают Web-браузеру работать с этим документом.Например, хранение мета данных, которые используют поисковые системы. profile
<header> Этот тег предназначен для создания <<шапки>> сайта, которая обычно размещается в верхней части HTML страницы. Нет
<hgroup> Этот тег предназначен для группирования заголовков(h2-h6) Web-страницы. Внутри этого тега располагаются теги от <h2> до <h6>. Нет
<hr> Тег <hr> предназначен для рисования горизонтальной линии. Так же дизайн этой линии можно изменять в зависимости от параметров,например: цвет и толщину. align, color, noshade, size, width <hr>

hr

<html> <html> это глобальный тег, в который обычно заключено все содержимое Web-страницы.Исключение составляет элемент <!DOCTYPE> — он необходим для определения типа документа. title, manifest, xmlns
<i> Тег <i> предназначен для выделения шрифта курсивом. Нет <i>

i

<iframe> Тег <iframe> предназначен для создания плавающего фрейма. align, allowtransparency, frameborder, height, hspace, marginheight, marginwidth, name, sandbox, scrolling, seamless, src, srcdoc, vspace, width
<img> align align, alt, border, height, hspace, ismap, longdesc, src, vspace, width, usemap
<input> Тег <input> предназначен для создания различных элементов интерфейса и позволяет обеспечить взаимодействие с пользователем.Такими элементами считаются: текстовые поля, различные кнопки, переключатели и флажки, расположенные на форме. accept, accesskey, align, alt, autocomplete, border, checked, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, list, max, maxlength, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, tabindex, type, value <input>

input

<ins> Тег <ins> необходим для того чтобы выделить текст, который добавлен в документ как новый.Обычно отображается как подчеркнутый текст. cite, datetime <ins>

ins

<isindex> Тег <isindex> необходим для реализации поискового индекса в вашем Web-документе. Этот тег устарел. action, prompt <isindex>

isindex

<kbd> Этот тег применяется для обозначения названия клавиш. Нет <kbd>

kbd

<keygen> Этот тег предназначен для генерации ключей. autofocus, challenge, disabled, form, keytype, name
<label> Тег <label> предназначен для установки связи между определенной меткой, в качестве которой обычно выступает текст, и элементом формы(<input>, <select>, <textarea>). accesskey, for
<legend> Тег <legend> предназначен для создания заголовка группы элементов формы, которая создается с помощью тега <fieldset>.Текст который располагается внутри тега <legend>, встраивается в рамку. accesskey, align, title <legend>

legend

<li> Тег определяет отдельный элемент списка. А внешние теги <ul> и <ol> определяют вид списка – маркированный или нумерованный. type, value <li>

li

<link> Тег <link> предназначен для подключения внешних файлов, например: стилей CSS или шрифтов.Размещается внутри контейнера <head> и не создает ссылку. charset, href, media, rel, sizes, type
<map> Тег <map> служит областью для элементов <area>, которые задают активные области для карт-изображений. name
<marquee> Тег <marquee> предназначен для создания бегущей строки. behavior, bgcolor, direction, height, hspace, loop, scrollamount, scrolldelay, truespeed, vspace, width
<mark> Тег <mark> предназначен для обозначения текста как выделенного. С помощью CSS стилей можно изменить его вид. Нет

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.

Добавление заголовков с помощью элементов <th>

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

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

Knocky Flor Ella Juan
Breed Jack Russell Poodle Streetdog Cocker Spaniel
Age 16 9 10 5
Owner Mother-in-law Me Me Sister-in-law
Eating Habits Eats everyone’s leftovers Nibbles at food Hearty eater Will 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
Horse Mare
Stallion
Crocodile
Chicken Cock
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() было бы слишком утомительно.

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

<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 1 Data 2
Calcutta Orange
Robots Jazz

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

Mon Tues Wed Thurs Fri Sat Sun
1st period English German Dutch
2nd period English English German Dutch
3rd period German German Dutch
4th period English English Dutch

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

  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 справочник

HTML теги

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

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

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

Основное содержимое таблицы заключается в тег <table>..</table>.

Каждая строка таблицы помещается в элемент <tr>…</tr>.

Ячейка заголовка таблицы помещается в элемент <th>…</th> (при этом содержимое отображается жирным начертанием и выравнивается по центру).

Каждая ячейка данных таблицы помещается в элемент <td>…</td>.

Наименование таблицы, если оно требуется размещается внутри элемента <caption>…</caption>(необязательный элемент). Обращаю Ваше внимание, что если Вы планируете использовать данный элемент в своей таблице, то он должен следовать в документе сразу за элементом <table>. По умолчанию наименование таблицы размещается по центру вверху таблицы (расположение заголовка таблицы возможно изменить, используя CSS свойство caption-side).

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

Атрибуты

АтрибутЗначениеОписание
alignleft
right
center
Не поддерживается в HTML5.
Определяет выравнивание таблицы в соответствии с окружающим её текстом.
bgcolorrgb(x,x,x)
#xxxxxx
colorname
Не поддерживается в HTML5.
Задает цвет фона для таблицы.
border0
1
Атрибут определяет должна отображаться граница вокруг ячеек таблицы, или нет.
cellpaddingpixelsНе поддерживается в HTML5.
Определяет расстояние между границей ячейки и ее содержимым.
cellspacingpixelsНе поддерживается в HTML5.
Указывает расстояние между ячейками.
frameabove
below
hsides
lhs
rhs
vsides
box
border
void
Не поддерживается в HTML5.
Указывает, какие части внешних границ, должны быть видны.
rulesnone
groups
rows
cols
all
Не поддерживается в HTML5.
Указывает, какие части внутри границ должны быть видны.
sortablesortableАтрибут отсутствует в спецификации HTML 5.1.
Указывает, что данные в таблице могут быть отсортированы. Это логический атрибут.
summarytextНе поддерживается в HTML5.
Вертикальное выравнивание содержимого в ячейке заголовка.
widthpixels
%
Не поддерживается в HTML5.
Определяет ширину таблицы.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования элемента <table></title>
</head>
<body>
	<table border = "1"> <!--начало содержимого таблицы-->
		<caption>Элементарная таблица</caption> <!-- наименование таблицы-->
		<tr> <!--описываем первую строку-->
			<th>Ячейка заголовка 1</th>
			<th>Ячейка заголовка 2</th> 
			<th>Ячейка заголовка 3</th>
		</tr> 
		<tr> <!--описываем вторую строку-->
			<td>Ячейка данных 1 Строка 2</td>
			<td>Ячейка данных 2 Строка 2</td>
			<td>Ячейка данных 3 Строка 2</td>
		</tr>
		<tr> <!-- описываем третью строку-->
			<td>Ячейка данных 1 Строка 3</td>
			<td>Ячейка данных 2 Строка 3</td>
			<td>Ячейка данных 3 Строка 3</td>
		</tr>
	</table> <!-- конец таблицы-->
</body>
</html>

К данной таблице для наглядности мы добавили атрибут border (граница) со значением «1», которое определяет, что граница должна отображаться вокруг ячеек таблицы. Атрибут граница практически не используется в HTML, в данном случае использование CSS было бы предпочтительнее и давало бы более гибкие возможности.

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

Пример таблицы, составленной на HTML.

Объединение столбцов

Объединение столбцов в элементах <td> или <th> допускается производить с помощью атрибута colspan (при этом ячейка растягивается вправо на заданное количество ячеек).

<!DOCTYPE html>
<html>
<head>
<title>Пример объединения столбцов в таблицах</title>
</head>
<body>
	<table border = "1"> <!--начало содержимого таблицы-->
		<caption>Элементарная таблица</caption>  <!--наименование таблицы-->
		<tr> <!--описываем первую строку-->
			<th colspan = "2">Ячейка заголовка 1</th> <!--растягиваем на 2 ячейки-->
			<th>Ячейка заголовка 2</th> 
		</tr> 
		<tr> <!--описываем вторую строку-->
			<td>Ячейка данных 1 Строка 2</td>
			<td>Ячейка данных 2 Строка 2</td>
			<td>Ячейка данных 3 Строка 2</td>
		</tr>
		<tr> <!--описываем третью строку-->
			<td>Ячейка данных 1 Строка 3</td>
			<td>Ячейка данных 2 Строка 3</td>
			<td>Ячейка данных 3 Строка 3</td>
		</tr>
	</table> <!--конец таблицы-->
</body>
</html>

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

Пример таблицы с объединёнными столбцами на HTML.

Объединение строк

Объединение строк в элементах <td> или <th> допускается с помощью атрибута rowspan (диапазон ячеек задается сверху вниз и охватывает несколько строк – ячейка растягивается вниз).

<!DOCTYPE html>
<html>
<head>
<title>Пример объединения строк в таблицах</title>
</head>
<body>
	<table border = "1"> <!-- начало содержимого таблицы-->
		<caption>Элементарная таблица</caption> <!--наименование таблицы-->
		<tr> <!--описываем первую строку-->
			<th colspan = "2">Ячейка заголовка 1</th><!--растягиваем на 2 ячейки-->
			<th>Ячейка заголовка 2</th>
		</tr>
		<tr><!--описываем вторую строку-->
			<td rowspan = "2">Ячейка данных 1 Строка 2</td>
			<td>Ячейка данных 2 Строка 2</td>
			<td>Ячейка данных 2 Строка 3</td>
		</tr>
		<tr> <!--описываем третью строку (первая ячейка занята предыдущей строкой) -->
			<td>Ячейка данных 2 Строка 3</td>
			<td>Ячейка данных 3 Строка 3</td>
		</tr>
	</table> <!--конец таблицы-->
</body>
</html>

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

Пример таблицы с объединёнными столбцами и строками на HTML.

Отличия HTML 4.01 от HTML 5

В HTML 5 была прекращена поддержка 8 атрибутов и одного в 5.1.

Значение CSS по умолчанию

table {
display : table;
border-collapse : separate;
border-spacing : 2px;
border-color : gray;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

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

Элемент поддерживает «атрибуты событий».

HTML теги

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


Пример

Компания Контакт Страна
Альфредс Футтеркисте Мария Андерс Германия
Коммерческий центр 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 :


Таблица 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 (четный) {
цвет фона: #eee;
}
# t01 tr: nth-child (нечетный) {
цвет фона: #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-теги таблиц

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

    .

    : Элемент Table - веб-технологии для разработчиков

    Элемент HTML

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

    Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

    элементов,
  • необязательный элемент
  • ,
  • либо одно из следующих:
    • ноль или более
  • элементов
  • один или несколько элементов
  • необязательный элемент
  • Категории контента Расход
    Разрешенное содержание В этом порядке:
    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 к элементу

    со значением collapse, а свойство padding - к элементам
    .

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

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

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

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

    рама

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

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

    правила

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

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

    , , , или .

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

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

    Примеры

    Простой стол

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

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

     

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

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

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

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

    Таблица с colgroup

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

    Таблица с colgroup и col

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

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

    <таблица> Замечательная подпись Отличные данные
     стол
    {
    граница-коллапс: коллапс;
    интервал границы: 0 пикселей;
    }
    таблица, th, td
    {
    отступ: 5 пикселей;
    граница: сплошной черный 1px;
    } 

    Проблемы доступности

    Подписи

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

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

    Объем строк и столбцов

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

    Пример
     <таблица>
       Названия и значения цветов 
      
        
           Имя 
           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 и заголовков , чтобы программно связать каждую ячейку таблицы с заголовком (ами), с которым связана ячейка.

    Технические характеристики

    Совместимость с браузером

    Обновите данные совместимости на GitHub
    Desktop Mobile
    Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Chrome для Android Firefox Opera для Android Safari на iOS Samsung Internet
    таблица Chrome Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    выровнять Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    bgcolor Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    бордюр Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    обивка ячейки Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    расстояние между ячейками Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    рама Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    правила Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    сводка Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    ширина Хром Полная поддержка 1 Кромка Полная поддержка
    .

    HTML: тег

    Документ HTML5

    Если вы создали новую веб-страницу в HTML5, ваш тег

    может выглядеть так:

      
    
    
    
    
     Пример HTML5 от www.techonthenet.com 
    
    
    
    <таблица>
      
    Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
    Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2
    Данные в столбце 1, строке 3 Данные в столбце 2, строке 3 Данные в столбце 3, строке 3
    Данные в столбце 1, строке 4 Данные в столбце 2, строке 4 Данные в столбце 3, строке 4

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

    , который имеет 3 столбца и 4 строки.Строка 1 таблицы определяется с помощью первого тега . Он имеет 3 ячейки заголовка таблицы, определенные с помощью тега
    . В строках 2–4 таблицы используется тег для определения стандартных ячеек таблицы.

    HTML 4.01 Переходный документ

    Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег

    может выглядеть так:

      
    
    
    
    
     HTML 4.01 Переходный пример от www.techonthenet.com 
    
    
    
    <таблица>
      
    Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
    Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2
    Данные в столбце 1, строке 3 Данные в столбце 2, строке 3 Данные в столбце 3, строке 3
    Данные в столбце 1, строке 4 Данные в столбце 2, строке 4 Данные в столбце 3, строке 4

    В этом HTML 4.01 Пример переходного документа, мы создали таблицу с помощью тега

    , который имеет 3 столбца и 4 строки. Строка 1 таблицы определяется с помощью первого тега . Он имеет 3 ячейки заголовка таблицы, определенные с помощью тега
    . В строках 2–4 таблицы используется тег для определения стандартных ячеек таблицы.

    Переходный документ XHTML 1.0

    Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег

    может выглядеть так:

      
    
    
    
    
     Переходный пример XHMTL 1.0 от www.techonthenet.com 
    
    
    
    <таблица>
      
    Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
    Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2
    Данные в столбце 1, строке 3 Данные в столбце 2, строке 3 Данные в столбце 3, строке 3
    Данные в столбце 1, строке 4 Данные в столбце 2, строке 4 Данные в столбце 3, строке 4

    В этом XHTML 1.0 Пример переходного документа, мы создали таблицу с помощью тега

    , который имеет 3 столбца и 4 строки. Строка 1 таблицы определяется с помощью первого тега . Он имеет 3 ячейки заголовка таблицы, определенные с помощью тега
    . В строках 2–4 таблицы используется тег для определения стандартных ячеек таблицы.

    Строгий документ XHTML 1.0

    Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег

    может выглядеть так:

      
    
    
    
    
     Строгий пример XHTML 1.0 от www.techonthenet.com 
    
    
    
    <таблица>
      
    Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
    Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2
    Данные в столбце 1, строке 3 Данные в столбце 2, строке 3 Данные в столбце 3, строке 3
    Данные в столбце 1, строке 4 Данные в столбце 2, строке 4 Данные в столбце 3, строке 4

    В этом XHTML 1.0 Пример строгого документа, мы создали таблицу с помощью тега

    , который имеет 3 столбца и 4 строки. Строка 1 таблицы определяется с помощью первого тега . Он имеет 3 ячейки заголовка таблицы, определенные с помощью тега
    . В строках 2–4 таблицы используется тег для определения стандартных ячеек таблицы.

    XHTML 1.1, документ

    Если вы создали новую веб-страницу в XHTML 1.1, ваш тег

    может выглядеть так:

      
    
    
    
    
     XHTML 1.1 Пример с сайта www.techonthenet.com 
    
    
    
    <таблица>
      
    Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
    Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2
    Данные в столбце 1, строке 3 Данные в столбце 2, строке 3 Данные в столбце 3, строке 3
    Данные в столбце 1, строке 4 Данные в столбце 2, строке 4 Данные в столбце 3, строке 4

    В этом XHTML 1.1 Пример документа, мы создали таблицу с помощью тега

    , который имеет 3 столбца и 4 строки. Строка 1 таблицы определяется с помощью первого тега . Он имеет 3 ячейки заголовка таблицы, определенные с помощью тега
    . В строках 2–4 таблицы используется тег для определения стандартных ячеек таблицы.

    .

    Отправить ответ

    avatar
      Подписаться  
    Уведомление о