Etiqueta tr en HTML: filas de una tabla
La etiqueta <tr> representa una fila de celdas en una tabla HTML. Sirve para reunir los datos que pertenecen a un mismo registro: por ejemplo, el nombre de un curso y su duración. Úsala dentro de una tabla cuando necesites relacionar esos datos con los encabezados de sus columnas.
Ejemplo mínimo: dos filas y dos columnas
<table>
<tr><th scope="col">Curso</th><th scope="col">Horas</th></tr>
<tr><td>HTML</td><td>12</td></tr>
</table>Pega este fragmento en el cuerpo de un documento HTML. Verás dos filas: la primera contiene los encabezados «Curso» y «Horas»; la segunda relaciona HTML con 12 horas. Cada fila tiene dos celdas, alineadas en dos columnas. Sin CSS, no se dibujan necesariamente bordes.
<tr> crea la fila; <th> identifica un encabezado y <td> contiene un dato. scope="col" indica que cada encabezado corresponde a su columna. Cambiar 12 por 14 modifica el dato, no la estructura.
Al analizar este HTML, el navegador inserta un <tbody> alrededor de las filas en el DOM. Por eso table > tr puede no seleccionarlas; table > tbody > tr sí encuentra esas filas. Compruébalo en el panel de elementos del navegador, además de mirar el código fuente.
Sintaxis y contexto válido
Escribe <tr>…</tr> dentro de <thead>, <tbody> o <tfoot>. También puede escribirse directamente dentro de <table> después de cualquier <caption>, <colgroup> y <thead>, siempre que la tabla no tenga cuerpos <tbody> explícitos. No mezcles ambas formas en el mismo nivel.
El modelo de contenido de tr en el estándar HTML admite cero o más celdas <th> y <td>, además de elementos de apoyo a scripts, como <script> y <template>. Los datos van dentro de las celdas: ni un <div> ni texto suelto son contenido de datos válido directamente bajo <tr>.
La apertura no se omite. El cierre </tr> puede omitirse si inmediatamente sigue otra fila <tr> o si no queda contenido en el padre; estos ejemplos lo escriben para que los límites sean claros. <tr /> no autocierra una fila en HTML.
Cómo se forman las filas y columnas
En el ejemplo mínimo, la primera posición de cada fila forma la columna «Curso» y la segunda, «Horas». Una fila nueva añade otro registro; no añade una columna. Para añadir «Plazas», incorpora una celda de encabezado y la celda correspondiente en cada fila de datos.
Las filas no tienen que contener siempre el mismo número de etiquetas de celda: una celda puede ocupar varias posiciones. Lo que debes comprobar es la cuadrícula resultante. No uses filas vacías para crear espacio ni tablas para distribuir las secciones de una web.
Caso práctico: cursos, totales y una nota combinada
Guarda este documento como cursos-tr.html con codificación UTF-8 y ábrelo en el navegador. Incluye todo el CSS y no necesita servidor, recursos externos ni JavaScript. Los datos son ficticios.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Filas de la oferta de cursos</title>
<style>
body {
max-width: 48rem;
margin: 2rem auto;
padding: 0 1rem;
font-family: sans-serif;
line-height: 1.5;
color: #222;
background: #fff;
}
.cursos-scroll { max-width: 100%; overflow-x: auto; }
.cursos-scroll:focus-visible {
outline: 3px solid #1554ad;
outline-offset: 3px;
}
.cursos {
width: 100%;
min-width: 32rem;
border-collapse: collapse;
}
.cursos caption { padding: 0.75rem; text-align: left; }
.cursos th, .cursos td {
border: 1px solid #666;
padding: 0.75rem;
text-align: left;
}
.cursos tbody tr:nth-child(even) { background-color: #f2f6fb; }
.cursos thead tr, .cursos tfoot tr { background-color: #eaf2ff; }
.cursos .numero { text-align: right; }
</style>
</head>
<body>
<h1>Oferta de cursos</h1>
<p>Si la tabla no cabe, llega a su región con Tab y usa
las flechas izquierda y derecha para desplazarte.</p>
<div class="cursos-scroll" tabindex="0" role="region"
aria-labelledby="tr-cursos-titulo">
<table class="cursos">
<caption id="tr-cursos-titulo">
Cursos: duración en horas y plazas disponibles
</caption>
<thead>
<tr>
<th scope="col">Curso</th>
<th scope="col">Horas</th>
<th scope="col">Plazas</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">HTML básico</th><td class="numero">12</td><td class="numero">20</td></tr>
<tr><th scope="row">CSS</th><td class="numero">16</td><td class="numero">15</td></tr>
<tr><th scope="row">JavaScript</th><td class="numero">20</td><td class="numero">12</td></tr>
</tbody>
<tfoot>
<tr><th scope="row">Total de la oferta</th><td class="numero">48</td><td class="numero">47</td></tr>
<tr><td colspan="3">Las plazas suman los cupos de los cursos, no personas distintas.</td></tr>
</tfoot>
</table>
</div>
</body>
</html>Primero identifica la fila de encabezados, las tres de datos y las dos del pie: son seis filas y tres columnas. Después comprueba las sumas: 12 + 16 + 20 = 48 horas y 20 + 15 + 12 = 47 plazas. Los totales están escritos a mano; cambiar una cifra no los recalcula.
La cuadrícula queda así; la última celda cubre las tres posiciones:
Curso | Horas | Plazas
HTML básico | 12 | 20
CSS | 16 | 15
JavaScript | 20 | 12
Total de la oferta | 48 | 47
Nota: una celda que ocupa las tres columnasPrueba a retirar colspan="3": la nota ocupa solo la primera columna y quedan dos posiciones sin celda en esa fila. Si añades otra celda sin reducir el colspan, extenderás la cuadrícula más allá de las tres columnas previstas. Revisa las posiciones antes de corregirlo con CSS.
Qué cambia al retirar una fila
Elimina el <tr> completo del curso CSS, incluido su contenido: desaparece ese registro. Si retiras solo las etiquetas de apertura y cierre, dejas celdas sin su padre válido. El analizador puede crear una fila o unirlas a otra durante la reparación; la apariencia resultante no demuestra que el código sea correcto. Compara fuente y DOM.
Celdas combinadas: colspan y rowspan
colspan amplía una celda horizontalmente y rowspan la extiende sobre filas. Ambos son atributos de <th> o <td>, nunca de <tr>. La fila sigue siendo una fila aunque una de sus celdas ocupe varias columnas.
Con rowspan="2", una celda ocupa su posición en dos filas: en la segunda no añadas otra celda para esa misma posición. Mantén la combinación dentro del mismo grupo de filas y evita solapamientos, como exige el modelo de celdas combinadas del estándar. Para los detalles y valores especiales, consulta la guía de td.
Atributos, CSS y lectura accesible
<tr> no tiene atributos específicos vigentes. Admite globales como id, class y lang. Los antiguos bgcolor, align y valign deben sustituirse por CSS: background-color para el fondo y text-align o vertical-align en las celdas para la alineación. MDN documenta estos atributos obsoletos de tr.
En el ejemplo, class es un atributo HTML; background-color y text-align son propiedades CSS. En JavaScript, fila.cells sería una propiedad DOM que devuelve sus celdas, no un atributo que debas escribir en <tr>.
Una fila no convierte sus celdas en encabezados por estar en <thead>. Utiliza <th> y scope: «CSS» encabeza su fila y «Plazas», su columna. Así el 15 tiene contexto. <caption> identifica la tabla, y la nota escrita comunica su significado sin depender del color. El tutorial de W3C WAI sobre encabezados de fila y columna explica este patrón.
La tabla conserva semántica nativa sin roles redundantes. La región exterior permite desplazamiento por teclado: a 375 px, llega con Tab, comprueba el foco y usa las flechas hasta «Plazas»; sal con Tab o Shift+Tab. A 1280 px, las tres columnas caben. Sin JavaScript se mantienen datos y desplazamiento. Comprueba también la lectura con tecnología de asistencia; el anuncio concreto depende del navegador y del lector de pantalla.
Errores y preguntas frecuentes
¿Tr crea una fila o una columna? Una fila. Las columnas se forman por las posiciones ocupadas por sus celdas.
¿Puedo poner texto directamente en tr? Los datos deben estar en <th> o <td>. El analizador puede desplazar texto suelto fuera de la tabla. Un <div> con datos va dentro de una celda, no directamente en la fila.
¿Por qué mi fila aparece fuera de lugar? Revisa primero el padre y las etiquetas de celda; después cuenta las posiciones ocupadas por colspan y rowspan; por último, inspecciona el DOM reparado y los selectores CSS. No simules encabezados con celdas de datos en negrita ni sustituyas la fila por un <div> esperando conservar sus relaciones.
Compatibilidad y guías relacionadas
Consulta realizada el 4 de octubre de 2026: el estándar HTML y la referencia de tr en MDN registran soporte amplio en los navegadores actuales. Los ejemplos no dependen de una API JavaScript. La comprobación local en Chromium 153 verifica estructura, lectura visible y teclado; no cubre todos los motores ni los anuncios de cada lector de pantalla.
La guía de table explica el conjunto; la de th, sus encabezados, y la de tbody, los grupos de datos. <tr> reúne una sola fila dentro de esa estructura.