Etiqueta HTML <tr>
La etiqueta HTML <tr> define una fila en una tabla con celdas <th> y <td>. Aprende sus atributos y estilos CSS con ejemplos.
La etiqueta HTML <tr> define una fila en una tabla. Es un contenedor: un <tr> contiene las celdas de esa fila, y cada celda se escribe con <th> (una celda de encabezado) o <td> (una celda de datos estándar). Una tabla se construye apilando filas <tr>, y el navegador alinea las celdas de cada fila en columnas.
Esta página explica qué hace <tr>, dónde se ubica en una tabla, sus atributos (y por qué los antiguos han desaparecido) y cómo dar estilo a las filas con CSS.
<tr> debe colocarse dentro de un elemento <table> — ya sea directamente, o dentro de uno de los elementos de agrupación de filas <thead>, <tbody> o <tfoot>. Un <tr> solo puede contener celdas <td> y <th>.
Cada fila puede contener un número diferente de celdas. El navegador renderiza exactamente las celdas que escribes; no rellena automáticamente una fila corta con celdas vacías. Para dejar una celda en blanco, añade un <td> o <th> vacío.
Nota:
<tr>en sí nunca abarca columnas o filas. Los atributoscolspanyrowspanque fusionan celdas a lo largo de columnas o filas pertenecen a las celdas, no a la fila — consulta<td>y<th>.
Para controlar el aspecto de las filas y las tablas (colores, bordes, alineación), utiliza las propiedades de tabla CSS en lugar de atributos HTML.
Sintaxis
La etiqueta <tr> va en pares. El contenido se escribe entre las etiquetas de apertura (<tr>) y cierre (</tr>).
Sintaxis de la etiqueta HTML <tr>
<table>
<tr>
<td>...</td>
</tr>
</table>Ejemplo de la etiqueta HTML <tr>:
Ejemplo de la etiqueta HTML <tr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>March</td>
<td>10.09.2018</td>
</tr>
<tr>
<td>June</td>
<td>18.07.2018</td>
</tr>
</table>
</body>
</html>El primer <tr> contiene dos celdas de encabezado <th>; cada <tr> siguiente contiene dos celdas de datos <td>. Como cada fila tiene el mismo número de celdas, se alinean ordenadamente en dos columnas.
Agrupación de filas con <thead>, <tbody> y <tfoot>
Para tablas más grandes que una simple tabla trivial, agrupa tus filas. Las filas de encabezado van dentro de <thead>, las filas del cuerpo dentro de <tbody>, y las filas de resumen/pie dentro de <tfoot>. Las filas <tr> viven dentro de estos grupos. Esto hace el marcado más claro, permite que las tecnologías asistivas anuncien la tabla correctamente y te proporciona ganchos limpios para CSS.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
tfoot {
font-weight: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Coffee</td>
<td>$3</td>
</tr>
<tr>
<td>Tea</td>
<td>$2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$5</td>
</tr>
</tfoot>
</table>
</body>
</html>Atributos
La etiqueta <tr> no tiene atributos propios. Solo admite los Atributos Globales estándar (como class, id, style) y los Atributos de Evento.
Los atributos de presentación que se enumeran a continuación estaban disponibles en versiones anteriores de HTML, pero son obsoletos en HTML5. En su lugar, utiliza CSS.
| Atributo obsoleto | Qué hacía | Reemplazo CSS |
|---|---|---|
align | Alineación horizontal del contenido de la celda | text-align: left / center / right; |
valign | Alineación vertical del contenido de la celda | vertical-align: top / middle / bottom; |
bgcolor | Color de fondo de la fila | background-color: …; |
bordercolor | Color del borde | border-color: …; |
char / charoff | Alinear contenido en un carácter | Sin equivalente CSS (raramente necesario) |
No uses align, valign, bgcolor, bordercolor, char ni charoff en <tr>. Los navegadores pueden ignorarlos y son HTML5 no válido. Aplica text-align, vertical-align y background-color en CSS.
Cómo dar estilo a una etiqueta HTML <tr>
Aplica estilo a las filas con CSS apuntando al elemento <tr>. Un patrón común es el efecto cebra — sombrear filas alternas para que las tablas largas sean más fáciles de leer. El selector tr:nth-child(even) coincide con cada segunda fila:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
text-align: left;
border: 1px solid #ccc;
}
thead tr {
background-color: #333;
color: #fff;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
tbody tr:hover {
background-color: #e0f0ff;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Designer</td>
</tr>
<tr>
<td>Bob</td>
<td>Developer</td>
</tr>
<tr>
<td>Carol</td>
<td>Manager</td>
</tr>
<tr>
<td>Dave</td>
<td>Tester</td>
</tr>
</tbody>
</table>
</body>
</html>Aquí thead tr colorea la fila de encabezado, tbody tr:nth-child(even) sombrea la 2.ª y 4.ª filas del cuerpo, y tbody tr:hover resalta la fila sobre la que está el puntero.