Тег tr html: Тег | htmlbook.ru

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

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

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

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

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

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

Пример

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

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

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

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

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

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

Пример

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

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

Пример

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

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

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

Пример

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

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

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

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

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

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

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

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

  Используйте свойство CSS border-collapse , чтобы свернуть границы ячеек

  Используйте свойство CSS padding , чтобы добавить отступ к ячейкам

  Используйте свойство CSS text-align для выравнивания текста ячейки

  Используйте свойство CSS border-spacing , чтобы установить интервал между ячейками

  Используйте атрибут colspan , чтобы ячейка охватывала несколько столбцов

  Используйте атрибут rowspan , чтобы ячейка занимала много строк

  Используйте атрибут id , чтобы однозначно определить одну таблицу

  ---

  Упражнения HTML

  ---

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

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

  HTML тег thead

  Пример

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

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

  



















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




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

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

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

  ---

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

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

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

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

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

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

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

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

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

  ---

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

  и

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

  ---

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

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

  ---

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

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

  ---

  ---

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

  Пример

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

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

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

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

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

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

  Пример

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

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

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

  Пример

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

  <таблица>
  
  
  месяц
  Экономия
  
  
  
  
  январь
  100
  
  
  февраль
  80 долларов
  
  
  

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

  ---

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

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

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

  
  

  HTML: тег

  Документ HTML5

  Если вы создали новую веб-страницу в HTML5, ваш тег может выглядеть так:

    
  
  
  
  
  
  
  
  
  <таблица>
    
       Заголовок столбца 1 
       Заголовок столбца 2 
    
    
       Данные в столбце 1, строке 2 
       Данные в столбце 2, строке 2 
    
    
       Данные в столбце 1, строке 3 
       Данные в столбце 2, строке 3 
    
   
  
    

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

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

    
  
  
  
  
  
  
  
  
  <таблица>
    

  . В строках 2 и 3 таблицы используется тег	для определения стандартных ячеек таблицы. HTML 4.01 Переходный документ Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег
  Заголовок столбца 1	Заголовок столбца 2
  Данные в столбце 1, строке 2	Данные в столбце 2, строке 2
  Данные в столбце 1, строке 3	Данные в столбце 2, строке 3

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

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

     w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
  
  
  
  
  
  
  
  
  <таблица>
    

  . В строках 2 и 3 таблицы используется тег	для определения стандартных ячеек таблицы. Переходный документ XHTML 1.0 Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег
  Заголовок столбца 1	Заголовок столбца 2
  Данные в столбце 1, строке 2	Данные в столбце 2, строке 2
  Данные в столбце 1, строке 3	Данные в столбце 2, строке 3

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

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

    
  
  
  
  
  
  
  
  
  <таблица>
    

  . В строках 2 и 3 таблицы используется тег	для определения стандартных ячеек таблицы. Строгий документ XHTML 1.0 Если вы создали новую веб-страницу в XHTML 1. 0 Strict, ваш тег
  Заголовок столбца 1	Заголовок столбца 2
  Данные в столбце 1, строке 2	Данные в столбце 2, строке 2
  Данные в столбце 1, строке 3	Данные в столбце 2, строке 3

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

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

    
  
  
  
  
  
  
  
  
  <таблица>
    

  . В строках 2 и 3 таблицы используется тег	для определения стандартных ячеек таблицы. XHTML 1.1, документ Если вы создали новую веб-страницу в XHTML 1.1, ваш тег
  Заголовок столбца 1	Заголовок столбца 2
  Данные в столбце 1, строке 2	Данные в столбце 2, строке 2
  Данные в столбце 1, строке 3	Данные в столбце 2, строке 3

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

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

  . В строках 2 и 3 таблицы используется тег	для определения стандартных ячеек таблицы. tr элемент Описание Элемент tr представляет строку в таблице . В HTML таблицы формируются набором строк, каждая из которых содержит определенное количество ячеек.Следовательно, этот элемент обычно содержит одну или несколько ячеек, которые могут быть ячейками заголовка (-й, ) или ячейками данных (-й, ). Этот элемент может быть дочерним по отношению к thead , tbody , tfoot или table . Если он объявлен как дочерний элемент table , он должен быть помещен после всех других элементов, кроме tfoot , и в таблице не должно быть элементов tbody . В предыдущих версиях стандарта элемент tr имел несколько атрибутов представления, которые были удалены в спецификации HTML5. Авторам следует отказаться от их использования в пользу таблиц стилей. Примеры В следующем примере представлена ​​таблица с заголовком ( thead ) и телом ( tbody ). Строки этой таблицы, представленные элементом tr , присутствуют в обоих контейнерах, описанных ранее, и содержат по три ячейки в каждой. <таблица>
  Фильм	Валовой	Год
  Аватар	2 787 965 087 долл. США	2009
  Титаник	2 186 772 302 долл. США	1997
  Мстители	1 518 594 910 долл. США	2012

  Пленка	Брутто	Год
  Аватар	$ 2 787 965 087	2009
  Титаник	2 186 772 302 долл. США	1997
  Мстители	1 518 594 910 долл. США	2012

  Теперь вставим стол без кузова .Здесь строки неявного тела объявлены как дочерние элементы самой таблицы и, как и в предыдущем примере, строки заголовка объявлены внутри раздела thead . Обратите внимание, как секция thead правильно предшествует строкам неявного тела.

    <таблица>
    
      
         Имя 
         Расчетный IQ 
      
    
    
       Сэр Исаак Ньютон 
       190 
    
    
       Леонардо да Винчи 
       180 
    
    
       Иоганн Кеплер 
       175 
    
  
    

  Имя	Расчетный IQ
  Сэр Исаак Ньютон	190
  Леонардо да Винчи	180
  Иоганн Кеплер	175

  HTML / Table Tags / создает таблицу - TAG index

  <таблица >

  Элемент TABLE определяет таблицу, а элементы TR и TD используются для определения строк и ячеек.

   
    <таблица>
  
    содержимое таблицы  
  
    
  

  Тег TABLE -

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

  Тег TR -

  Определяет строку в таблице.

  Тег TD -

  Определяет ячейку в таблице.

  Пример

  Таблица однорядная

   
          
    
    
    Row1 - Col1  
    
    Row1 - Col2  
    
    Row1 - Col3  
    
    
    
   

  Выход

  Ряд1 - Столбец

  Ряд 1 - Столбец 2

  Ряд1 - Столбец 3

  Таблица из двух строк

   
               
    
    
    Row1 - Col1  
    
    Row1 - Col2  
    
    Row1 - Col3  
    
    
    
    Row2 - Col1  
    
    Row2 - Col2  
    
    Ряд 2 - Столб 3  
    
    
    
   

  Выход

  Ряд1 - Столбец	Ряд 1 - Столбец 2	Ряд1 - Столбец 3
  Ряд 2 - Столбец	Ряд 2 - Столбец 2	Ряд 2 - Столб 3

  Если атрибут границы не указан, граница таблицы не отображается.

   
              
    
    
    Row1 - Col1  
    
    Row1 - Col2  
    
    Row1 - Col3     
    
    
    Row2 - Col1  
    
    Row2 - Col2  
    
    Row2 - Col3  
    
    
    
   

  Выход

  Ряд 1 - Столбец	Ряд 1 - Столбец 2	Ряд1 - Столбец 3
  Ряд 2 - Столбец	Ряд 2 - Столбец 2	Ряд 2 - Столб 3

  Табличные теги

  Связанный документ

  HTML tr Тег - GeeksforGeeks

  < html >

  < голова > 04 title > tr tag title >

  < style >

  body {

  выравнивание текста: по центру;

  }

  h2 {

  цвет: зеленый;

  }

  th {

  цвет: синий;

  }

  стол,

  кузов,

  td {

  граница: 1px сплошная черная;

  граница-обрушение: обрушение;

  }

  стиль >

  головка >

  <

  0 корпус

  0>

  < центр >

  < h2 > GeeksforGeeks h2 >

  < h3 > tr Tag h3 >

  < таблица >

  < борд >

  < tr >

  < 900 70 th > Имя th >

  < th > Идентификатор пользователя th >

  tr >

  зонд >

  < кузов >

  < tr > 1 < td > Shashank td >

  < td > @shashankla td >

  tr >

  < tr >

  < td > GeeksforGeeks td >

  < td > @geeks td >

  tr >

  tbody >

  таблица >

  центр >

  корпус >

  html >

  XHTML >> Теги >> tr

  Синтаксис:

  . ..

  Тег tr используется для создания строки в элементе table . Вы можете создать столько строк, сколько захотите.

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

Отдельный закрывающий тег является обязательным.

Кодовая последовательность:
... разместить здесь заголовок ...
... разместить данные здесь ...



  Примеры

  Код:

  
  
  w3.org/1999/xhtml "xml: lang =" en "lang =" en ">
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  < / tr>
  
  
  
  
  

  Как кодировать таблицу


  Используйте тег заголовка для имени таблицу и предоставить полезную информацию о содержимом

  Используйте тег th для создания заголовка, который будет отображаться жирным шрифтом
  Тег tr создает строку	Тег td создает отдельные ячейки для каждая строка
  Вы всегда должны использовать закрывающие теги	Вы можете использовать различные HTML-теги внутри ячейки
  Три новых тега таблицы: tbody, tfoot, и thead	colspan атрибут позволяет охватить более одной ячейки

  
  91 532

  Вывод:

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

  Используйте тег th , чтобы создать заголовок, который будет отображаться жирным шрифтом
  The Тег tr создает строку	Тег td создает отдельные ячейки для каждой строки
  Вы всегда должны использовать закрывающие теги	Вы можете использовать различные теги HTML внутри ячейки
  Три новых Теги таблицы: tbody, tfoot, и thead	Параметр colspan позволяет охватить более одной ячейки

  Объяснение:

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

  Язык (и): XHTML

  События

  onclick

  Синтаксис:

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

  ondblclick

  Синтаксис: ondblclick = "action"

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

  нажатие клавиши

  Синтаксис: onkeydown = "action"

  Событие onkeydown связано с нажатием клавиши на клавиатуре, когда мышь находится внутри выбранного тега (элемента) HTML. Другими словами, событие нажатия клавиши произошло, когда элемент HTML был в фокусе.Каждый раз, когда вы нажимаете клавишу, выполняется код сценария onkeydown .

  onkeypress

  Синтаксис:

  Событие onkeypress связано с нажатием клавиши на клавиатуре, когда мышь находится внутри выбранного элемента HTML. Другими словами, событие нажатия клавиши произошло, когда элемент HTML был в фокусе. Каждый раз, когда вы нажимаете клавишу, выполняется код сценария onkeypress .

  onkeyup

  Синтаксис: onkeyup = "action"

  Событие onkeyup связано с отпусканием клавиши на клавиатуре, когда мышь находится внутри выбранного HTML-тега (элемента).Другими словами, событие нажатия клавиши произошло, когда элемент HTML был в фокусе. Каждый раз, когда вы отпускаете клавишу, выполняется код сценария onkeyup .

  onmousedown

  Синтаксис: onmousedown = "action"

  Событие onmousedown связано с нажатием кнопки мыши, когда мышь находится внутри выбранного тега (элемента) HTML. Другими словами, событие нажатия мыши произошло, когда элемент HTML был в фокусе.Каждый раз, когда вы щелкаете мышью, находясь внутри элемента, выполняется код сценария onmousedown . Этот сценарий также может вызывать функции или подпрограммы, содержащие код, который вы хотите запустить при возникновении этого события.

  onmousemove

  Синтаксис: onmousemove = "action"

  Событие onmousemove связано с перемещением мыши внутри выбранного тега (элемента) HTML. Другими словами, событие перемещения мыши произошло, когда элемент HTML был в фокусе.Каждый раз, когда вы перемещаете мышь по элементу, выполняется код сценария onmousemove . Этот сценарий также может вызывать функции или подпрограммы, содержащие код, который вы хотите запустить при возникновении этого события.

  onmouseout

  Синтаксис:

  Событие onmouseout связано с перемещением указателя мыши за пределы выбранного тега (элемента) HTML. Другими словами, событие выхода мыши произошло, когда элемент HTML был в фокусе.Каждый раз, когда вы перемещаете мышь из элемента, выполняется код сценария onmouseout . Этот сценарий также может вызывать функции или подпрограммы, содержащие код, который вы хотите запустить при возникновении этого события.

  над мышью

  Синтаксис:

  Событие onmouseover связано с перемещением указателя мыши над выбранным тегом (элементом) HTML. Другими словами, событие наведения указателя мыши произошло, когда элемент HTML был в фокусе.Каждый раз, когда вы наводите указатель мыши на элемент, выполняется код сценария onmouseover . Этот сценарий также может вызывать функции или подпрограммы, содержащие код, который вы хотите запустить при возникновении этого события.

  onmouseup

  Синтаксис: onmouseup = "action"

  Событие onmouseup связано с высвобождением части щелчка мыши внутри выбранного HTML-тега (элемента).

  No related posts.