Html tr – Таблицы в Html — теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания

Leave a Comment / Html / By /

Тег | htmlbook.ru


Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+1.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Синтаксис

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

Атрибуты

align
Определяет выравнивание содержимого ячеек по горизонтали.
bgcolor
Цвет фона ячеек.
bordercolor
Цвет рамки.
char
Выравнивание содержимого ячеек относительно заданного символа.
charoff
Смещение содержимого ячеек относительно указанного символа.
valign
Выравнивание содержимого ячеек по вертикали.

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

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

Не обязателен.

Пример

HTML 4.01IECrOpSaFx

<!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>Тег TR</title>
 </head>
 <body>

  <table border="0" cellpadding="4">
   <tr align="right" valign="top">
    <td><img src="images/book.png" alt="Книга"></td>
    <td>Lorem ipsum dolor sit amet...</td>
   </tr>
  </table>

 </body>
</html>

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

| HTML | WebReference

Элемент <tr> (от англ. table row — строка таблицы) служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки устанавливается с помощью элемента <th> или <td>.

Синтаксис

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

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

Не обязателен.

Атрибуты

align
Определяет выравнивание содержимого ячеек по горизонтали.
bgcolor
Цвет фона ячеек.
bordercolor
Цвет рамки.
char
Выравнивание содержимого ячеек относительно заданного символа.
charoff
Смещение содержимого ячеек относительно указанного символа.
valign
Выравнивание содержимого ячеек по вертикали.

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

Пример

<!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>TR</title>
 </head>
 <body>
  <table border="0" cellpadding="4">
   <tr align="right" valign="top">
    <td><img src="image/book.png" alt="Книга"></td>
    <td>Lorem ipsum dolor sit amet...</td>
   </tr>
  </table>
 </body>
</html>

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

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

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 10.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

| Справочник HTML

Элемент <tr> (от англ. «table row» ‒ «строка таблицы») служит контейнером для создания строки таблицы. Он может содержать один или несколько тегов <th> или <td>.

Элемент <tr> используется только внутри таблиц (элемент <table>) и может содержать только теги для создания ячеек, любое содержимое таблицы (текст, списки, изображения и прочие HTML-элементы) помещается внутрь тегов <td> и <th>, которые определяют содержимое ячеек.

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

Синтаксис

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

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

Не обязателен.

Атрибуты

alignУстарел в HTML5
Выравнивает содержимое в строке таблицы:
left — выравнивание содержимого ячейки по левому краю
center — выравнивание по центру
right — выравнивание по правому краю
justify — выравнивание по ширине (одновременно по правому и левому краю)
char — выравнивание по указанному символу
bgcolorУстарел в HTML5
Задает цвет фона для строки таблицы.
bordercolorУстарел в HTML5
Устанавливает цвет рамки.
charУстарел в HTML5
Выравнивает содержимое в строке таблицы по заданному символу.
Пример: <tr char=»c» align=»char»>…</tr>
charoffУстарел в HTML5
Задает смещение содержимого строки относительно заданного символа.
valignУстарел в HTML5
Вертикальная выравнивает содержимое в строке таблицы:
top — выравнивание содержимого ячейки по верхнему краю строки
middle — выравнивание по середине
bottom — выравнивание по нижнему краю
baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии

Для этого элемента доступны глобальные атрибуты и не доступны события.

Стилизация по умолчанию

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

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

Различия между HTML 4.01 и HTML5

В HTML 5 прекращена поддержка всех атрибутов тега.

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

Пример HTML:

Попробуй сам
  <table>
    <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
    <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
    <tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
  </table>

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

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

Элемент
<tr> 3+ 1+ 3.5+ 1+ 1+ 1+
Элемент
<tr> 1+ 1+ 6+ 1+

Попробуйте сами — Примеры

Как добавить рамку вокруг таблицы:
Граница таблицы

Как избавиться от «двойной рамки»:
Одинарная рамка для таблицы

Как изменить поля и интервалы таблицы:
Поля и интервалы таблицы

Как изменить ширину таблицы:
Ширина таблицы

Как объединить столбцы таблицы:
Объединение столбцов

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

Как применять теги группирования элементов таблиц:
Теги группирования элементов таблиц

Учебник HTML

HTML уроки: HTML Табицы

HTML Элементы


Тег HTML строка в таблице

Тег <tr> определяет строку (ряд) в HTML таблице. Используется в HTML таблицах определенных тегом <table>.

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

Внутри HTML тега <tr> могут быть поставлены обычные ячейки <td> и ячейки-заголовки <th>.

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

Синтаксис

<tr>ячейки td и/или th</tr>

Отображение в браузере

Строка 1: ячейка-заголовок 1 Строка 1: ячейка-залоловок 2
Строка 2: обычная ячейка 1 Строка 2: обычная ячейка 2

Пример использования <tr> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Строки в таблице</title>
</head>
<body>
<table>
<tbody>
<tr>
<th>Строка 1: ячейка-заголовок 1</th>
<th>Строка 1: ячейка-заголовок 2</th>
</tr>
<tr>
<td>Строка 2: обычная ячейка 1</td>
<td>Строка 2: обычная ячейка 2</td>
</tr>
</tbody>
</table>
</body>
</html>

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

Атрибуты

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

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

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

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

Примеры:
RGB: rgb(251,101,070), rgb(0, 40, 117).
HTML hex: #2da3d2, #bbb.
HTML colorname: yellow, blue;
valign top
middle
bottom
baseline		 Задает правило выравнивания содержимого строки по вертикали. В HTML5 используйте CSS.

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

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