
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; }
- Elemento summary en HTML
- Elemento details en HTML
- Elemento meter en HTML
- Elemento legend en HTML
- Elemento textarea en HTML
- Elemento select en HTML
- Elemento progress en HTML
- Elemento output en HTML
- Elemento option en HTML
- Elemento optgroup en HTML
- Elemento track en HTML
- Elemento label en HTML
- Elemento input en HTML
- Elemento form en HTML
- Elemento fieldset en HTML
- Elemento datalist en HTML
- Elemento button en HTML
- Elemento tr en HTML
- Elemento thead en HTML
- Elemento th en HTML
- Elemento tbody en HTML
- Elemento tfoot en HTML
- Elemento table en HTML
- Elemento td en HTML
- Elemento colgroup en HTML
- Elemento col en HTML
- Elemento caption en HTML
- Elemento del en HTML
- Elemento script en HTML
- Elemento noscript en HTML
- Elemento canvas en HTML
- Elemento picture en HTML
- Elemento ins en HTML
- Elemento video en HTML
- Elemento source en HTML
- Elemento param en HTML
- Elemento object en HTML
- Elemento embed en HTML
- Elemento map en HTML
- Elemento img en HTML
- Elemento audio en HTML
- Elemento area en HTML