<tr>
Tablas
Fila de tabla. Contenedor obligatorio de celdas (<td> y <th>); va dentro de <table> directamente o dentro de <thead>, <tbody> o <tfoot>. Las columnas de la tabla emergen de la posición de las celdas dentro de cada fila.
<tr> (table row, fila de tabla) es el contenedor de las celdas de una tabla. Toda celda — ya sea <td> o <th> — debe vivir dentro de un <tr>. No hay otro camino: un <td> o <th> directamente dentro de <table> o de <thead> sin su <tr> es HTML inválido. El <tr> es la unidad de construcción de la tabla: la tabla se arma fila por fila, y las columnas emergen de la posición de las celdas en cada fila.
El número de columnas de la tabla lo determina la fila con más celdas. Si una fila tiene tres <td> y otra tiene dos, la tabla tendrá tres columnas y la segunda fila quedará con la tercera columna vacía. Cuando las celdas usan colspan o rowspan (ver <td>/<th>), el conteo de columnas se vuelve implícito — el navegador calcula cuántas columnas “reales” ocupa cada celda.
<tr> puede vivir directamente dentro de <table> (en cuyo caso el navegador inserta un <tbody> implícito en el DOM), o dentro de <thead>, <tbody> o <tfoot>. La práctica recomendada es siempre envolverlo en una de las tres secciones para que la semántica de la tabla sea explícita y los lectores de pantalla puedan navegar directamente al cuerpo de datos.
Cómo funciona
El navegador procesa los <tr> en orden de arriba hacia abajo. Por cada <tr>, distribuye sus celdas en las columnas disponibles de izquierda a derecha, teniendo en cuenta los spans activos de filas anteriores (si alguna celda de una fila anterior tiene rowspan, esa posición ya está ocupada y se salta). El resultado es una grilla bidimensional en la que cada celda tiene una posición fija de fila y columna.
<table>
<thead>
<tr>
<th scope="col">Mes</th>
<th scope="col">Ventas</th>
<th scope="col">Devoluciones</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Enero</th>
<td>1.200</td>
<td>34</td>
</tr>
<tr>
<th scope="row">Febrero</th>
<td>980</td>
<td>21</td>
</tr>
</tbody>
</table>| Mes | Ventas | Devoluciones |
|---|---|---|
| Enero | 1.200 | 34 |
| Febrero | 980 | 21 |
Modelo de contenido
<tr> puede contener cero o más elementos <td> y/o <th>. No puede contener directamente texto ni otros elementos que no sean celdas de tabla. Va dentro de <table>, <thead>, <tbody> o <tfoot>.
Display por defecto: table-row.
Atributos
<tr> no tiene atributos propios de uso moderno. Los atributos align, valign, bgcolor, char, charoff son todos legacy desde HTML5 — hoy se controlan con CSS (text-align, vertical-align, background-color).
Accesibilidad
<tr> tiene el rol implícito row en el árbol de accesibilidad. Los lectores de pantalla usan ese rol para permitir la navegación por filas. Su valor de accesibilidad real depende de las celdas que contiene (sus <th scope> determinan qué contexto se anuncia al leer cada <td>).
Notas, gotchas e interacción
- Nunca poner texto directo dentro de
<tr>. Solo<td>y<th>son hijos válidos. Texto libre entre celdas es ignorado o produce comportamiento indefinido. - El conteo de celdas cambia con
colspan/rowspan. Si una celda tienecolspan="2", ocupa dos posiciones pero es un solo elemento<td>. La fila siguiente que tiene unrowspanactivo de arriba tendrá menos<td>literales que el número de columnas. <tr>directo en<table>inserta un<tbody>implícito. El DOM siempre tiene el<tbody>, aunque no lo escribas. Las reglas CSS y JavaScript que busquentable > trpueden no encontrar nada si buscan sin pasar portbody.
Vigente / legacy
<tr> es completamente vigente. Sus atributos de presentación (align, valign, bgcolor) son legacy — reemplazados por CSS.
Aprendelo en el recorrido
Esta entrada complementa la lección La tabla semántica del módulo Tablas, donde <tr> se practica como parte de la estructura completa table → thead/tbody → tr → td/th.