Elemento tr en HTML

El elemento html tr define una línea que contiene celdas en una tabla, y esas celdas están representadas por los elementos <td> y <th>.

Ejemplo de una tabla simple con dos líneas y dos columnas transversales <tr> con elementos <td>:

< table > 
  < tr > 
    < td > la primera celda en la primera línea </ td > 
    < td > la segunda celda en la primera línea </ td > 
  </ tr > 
  < tr > 
    < td > la primera celda en la segunda línea </ td > 
    < td > la segunda celda en la segunda línea </ td > 
  </ tr > 
</ table >

Consulte la página del artículo <table> para ver más ejemplos.

Etiqueta html tr

Clasificaciones de contenido	No hay.
Contenido permitido	Cero o más veces de los dos componentes `<td>`o `<th>`, o una mezcla entre ellos.
Acrónimo	No se puede omitir la etiqueta de inicio. La etiqueta final de un elemento <tr> se puede omitir si un elemento está directamente detrás de él `<tr>`, o si no hay más contenido en el elemento principal ( `<thead>`, `<tbody>` o `<tfoot>`).
Elementos del padre	Elementos `<table>`, `<thead>`, `<tbody>` o `<tfoot>`.
Interfaz DOMO	`HTMLTableRowElement`

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

Características

En este elemento html tr se pueden utilizar propiedades globales.

`align`

Esta propiedad se utiliza para especificar cómo se alinea cada celda y acepta uno de los siguientes valores:

left: Muestra el contenido a la izquierda de la celda
center: centra el contenido en la celda
right: Muestra el contenido a la derecha de la celda
justify: Muestra el contenido de la línea completa.

Vale la pena señalar que esta característica ha sido descuidada en HTML 4 y eliminada en HTML5, y no está permitido su uso, pero debe formatearse usando CSS, asignando uno de los valores left, center, right o justify a la propiedad text-align.

`bgcolor`

Esta propiedad define el color de fondo de cada celda de la línea y puede aceptar valores hexadecimales sRGB, precedidos por un carácter #. Se pueden utilizar los siguientes nombres de colores predefinidos:

`black` = «# 000000»	`green` = «# 008000»
`silver` = «# C0C0C0»	`lime` = «# 00FF00»
`gray` = «# 808080»	`olive` = «# 808000»
`white` = «#FFFFFF»	`yellow` = «# FFFF00»
`maroon` = «# 800000»	`navy` = «# 000080»
`red` = «# FF0000»	`blue` = «# 0000FF»
`purple` = «# 800080»	`teal` = «# 008080»
`fuchsia` = «# FF00FF»	`aqua` = «# 00FFFF»

Cabe señalar que esta función no es estándar y solo la utilizan algunas versiones de Internet Explorer, pero el elemento debe formatearse <tr> con CSS. Se puede aplicar un efecto similar a esta propiedad utilizando la propiedad background-color.

`valign`

Esta propiedad se utiliza para especificar qué tan verticalmente es la alineación de cada celda de la línea y acepta uno de los siguientes valores:

baseline: Muestra el contenido lo más cerca posible de la parte inferior de la celda, pero la alineación estará en la línea de base de los caracteres en lugar de en la parte inferior, y si los caracteres son del mismo tamaño, este valor tendrá el mismo efecto que el valor bottom.
bottom: Muestra el contenido lo más cerca posible de la parte inferior de la celda.
middle: Centra el texto en la celda verticalmente.
top: Muestra el contenido lo más cerca posible de la parte superior de la celda.

Vale la pena señalar que esta función se ha descuidado en HTML 4 y se ha eliminado en HTML5, y no está permitido su uso, pero debe formatearse con CSS a través de la propiedad vertical-align.

Ejemplos del uso tr en html

El siguiente ejemplo simple muestra una tabla con los nombres de los estudiantes y otra información sobre ellos.

El siguiente código HTML muestra la estructura más simple de la tabla, ya que no hay grupos o celdas que abarquen más de una línea o columna, ni título de tabla, y contiene solo cuatro líneas (incluida la línea del encabezado), y cada línea tiene cuatro columnas:

 < table > 
    < tr > 
      < th > Nombre </ th > 
      < th > Número de universidad </ th > 
      < th > Fecha de inscripción </ th > 
      < th > Promedio </ th > 
    </ tr > 
    < tr > 
      < td > AAA </ td > 
      < td > 1 </ td >
      < td> < time  datetime = "2011-09-01" > Septiembre de 2011 </ time > </ td > 
      < td > 98.5 </ td > 
    </ tr > 
    < tr > 
      < td > BBB </ td > 
      < td > 2 </ td > 
      < td > < time  datetime = "2012-05-01" > Mayo de 2012 </ time > </ td > 
      <td > 95.2 </ td > 
    </ tr >       
    < tr > 
      < td > CCC </ td > 
      < td > 3 </ td > 
      < td > < time  datetime = "2013-08-01" > Agosto de 2012 </ time > </ td > 
      < td > 93,2 </ td > 
    </ tr >       
  </ table >

Agregaremos código CSS simple para agregar un marco border a la tabla y las celdas:

table {
  border: 1px solid black;
}

th, td {
  border: 1px solid black;
}

Ampliar columnas y celdas

Si queremos agregar una columna para la fecha de inscripción y otra para la fecha de graduación, y queremos que estén bajo el título “Vida universitaria”, necesitamos crear celdas que abarquen más de una celda.

El código HTML será similar al código anterior, pero agregaremos la propiedad rowspan y colspan para que las celdas abarquen más de una línea o columna, y agregaremos los encabezados “Fecha de registro” y “Fecha de graduación”:

< table > 
  < tr > 
    < th  rowpan = "2" > nombre </ th > 
    < th  rowpan = "2" > número de universidad </ th > 
    < th  colspan = "2" > vida universitaria </ th > 
    < th  rowpan = "2" > tasa </ th > 
  </ tr > 
  <tr > 
    < th >Fecha de inscripción </ th > 
    < th > fecha de graduación </ th > 
  </ tr >  
  < tr > 
    < td > AAA </ td > 
    < td > 1 </ td > 
    < td > < time  datetime = "2011-09- 01 " > Septiembre de 2011 </ time > </ td > 
    < td > < time  datetime = "2016-06-01 " >Junio de 2016 </ time > </ td > 
    < td > 98.5 </ td > 
  </ tr > 
  < tr > 
    < td > BBB </ td > 
    < td > 2 </ td > 
    < td > < time  datetime = " 2018-09-01 " > Septiembre de 2018 </ time > </ td > 
    < td > Aún no graduado </ td > 
    <td > 95.2 </ td > 
  </ tr >       
  < tr > 
    < td > CCC </ td > 
    < td > 3 </ td > 
    < td > < time  datetime = "2013-09-01" > Septiembre de 2013 </ time > </ td > 
    < td > < time  datetime = "2018-05-01" > Mayo de 2018 </ time > </ td> 
    < td > 93,0 </ td > 
  </ tr >       
</ table >

Tenga en cuenta que usamos la propiedad rowspan para hacer que las celdas Nombre, Número de universidad y Tasa en dos líneas en lugar de una. Y usamos la propiedad colspan para hacer que la celda de vida universitaria abarcara dos columnas.

Formato predeterminado

La mayoría de los navegadores muestran el elemento <tr> con el conjunto de propiedades display de table-row y los valores de heredar las dos propiedades vertical-align y border-color:

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