El elemento html tr define una línea que contiene celdas en una tabla, y esas celdas están representadas por los elementos
y
.
Ejemplo de una tabla simple con dos líneas y dos columnas transversales
con elementos
:
< table >
< tr >
< td > la primera celda en la primera línea
< td > la segunda celda en la primera línea
< tr >
< td > la primera celda en la segunda línea
< td > la segunda celda en la segunda línea
Consulte la página del artículo
para ver más ejemplos.
Etiqueta html tr
Clasificaciones de contenido
No hay.
Contenido permitido
Cero o más veces de los dos componentes
o
, o una mezcla entre ellos.
Acrónimo
No se puede omitir la etiqueta de inicio. La etiqueta final de un elemento
se puede omitir si un elemento está directamente detrás de él
, o si no hay más contenido en el elemento principal ( , o ).
Elementos del padre
Elementos
, , o .
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
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 > Número de universidad
< th > Fecha de inscripción
< th > Promedio
< tr >
< td > AAA
< td > 1
< td> < time datetime = "2011-09-01" > Septiembre de 2011
< td > 98.5
< tr >
< td > BBB
< td > 2
< td > < time datetime = "2012-05-01" > Mayo de 2012
95.2
< tr >
< td > CCC
< td > 3
< td > < time datetime = "2013-08-01" > Agosto de 2012
< td > 93,2
Agregaremos código CSS simple para agregar un marco border a la tabla y las 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 rowpan = "2" > número de universidad
< th colspan = "2" > vida universitaria
< th rowpan = "2" > tasa
< th >Fecha de inscripción
< th > fecha de graduación
< tr >
< td > AAA
< td > 1
< td > < time datetime = "2011-09- 01 " > Septiembre de 2011
< td > < time datetime = "2016-06-01 " >Junio de 2016
< td > 98.5
< tr >
< td > BBB
< td > 2
< td > < time datetime = " 2018-09-01 " > Septiembre de 2018
< td > Aún no graduado
95.2
< tr >
< td > CCC
< td > 3
< td > < time datetime = "2013-09-01" > Septiembre de 2013
< td > < time datetime = "2018-05-01" > Mayo de 2018
< td > 93,0
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
con el conjunto de propiedades display de table-row y los valores de heredar las dos propiedades vertical-align y border-color:
