La Etiqueta TR

Se utiliza para definir filas dentro de una tabla. Cada fila contiene celdas de datos o encabezados, organizando la información en filas y columnas.

La etiqueta <tr> (Table Row) en HTML se utiliza para definir filas dentro de una tabla. Cada fila contiene celdas de datos (<td>) o encabezados (<th>), organizando la información en filas y columnas. Aquí te explicamos cómo implementarla correctamente, con ejemplos y buenas prácticas.

¿Qué es <tr>?

Propósito: Crear una fila dentro de una tabla HTML.

Relación:

  • <tr> es un contenedor de <td> (celdas de datos) o <th> (celdas de encabezado).

  • Se ubica dentro de <table>, <thead>, <tbody> o <tfoot>.

Semántica: Ayuda a estructurar datos tabulares de forma lógica.

Sintaxis básica

<table>
  <tr> <!-- Fila 1 -->
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
  <tr> <!-- Fila 2 -->
    <td>Celda 3</td>
    <td>Celda 4</td>
  </tr>
</table>

Resultado:

Celda 1 Celda 2
Celda 3 Celda 4

Atributos relevantes (HTML4/Obsoletos en HTML5)

Aunque HTML5 desaconseja estos atributos (usa CSS en su lugar), es útil conocerlos:

Atributo Descripción
align Alineación horizontal (ej: left, center).
valign Alineación vertical (ej: top, middle).
bgcolor Color de fondo de la fila (ej: #f0f0f0).

Casos de uso comunes

a) Tabla simple con encabezados

<table>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>25</td>
  </tr>
</table>

Resultado:

Nombre Edad
Ana 25

b) Combinar celdas con colspan y rowspan

<table border="1">
  <tr>
    <td colspan="2">Celda combinada</td>
  </tr>
  <tr>
    <td>Celda 1</td>
    <td rowspan="2">Celda vertical</td>
  </tr>
  <tr>
    <td>Celda 2</td>
  </tr>
</table>

Resultado:

Celda combinada (2 columnas)
Celda 1 Celda vertical
Celda 2  

Accesibilidad

Encabezados semánticos: Usa <th> con scope para indicar encabezados de columna (col) o fila (row).

<tr>
  <th scope="col">Producto</th>
  <th scope="col">Precio</th>
</tr>

Lectores de pantalla: Interpretan <tr> para navegar filas y columnas.

Estilización con CSS

Aplica estilos a filas o celdas para mejorar el diseño:

tr {
  background: #f8f9fa; /* Fondo de fila */
}

tr:hover {
  background: #e9ecef; /* Efecto hover */
}

td, th {
  padding: 12px;       /* Espaciado interno */
  border: 1px solid #ddd; /* Borde */
}

Ejemplo:

Producto Precio
Laptop $800

Buenas prácticas

Usa <thead>, <tbody>, y <tfoot>:

<table>
  <thead>
    <tr>...</tr> <!-- Encabezados -->
  </thead>
  <tbody>
    <tr>...</tr> <!-- Datos -->
  </tbody>
  <tfoot>
    <tr>...</tr> <!-- Resumen -->
  </tfoot>
</table>

Evita tablas para maquetación: Usa CSS Grid o Flexbox para diseños complejos.

Prioriza la accesibilidad: Vincula encabezados con id y headers en tablas complejas.

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    table {
      width: 80%;
      border-collapse: collapse;
      margin: 20px auto;
      font-family: Arial;
    }
    th, td {
      padding: 12px;
      border: 1px solid #ddd;
      text-align: left;
    }
    th {
      background: #2ecc71;
      color: white;
    }
    tr:nth-child(even) {
      background: #f9f9f9;
    }
    tr:hover {
      background: #f1f1f1;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Artículo</th>
        <th>Cantidad</th>
        <th>Precio</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Laptop</td>
        <td>1</td>
        <td>$800</td>
      </tr>
      <tr>
        <td>Mouse</td>
        <td>2</td>
        <td>$20</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">Total</td>
        <td>$820</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

Resultado:

Artículo Cantidad Precio
Laptop 1 $800
Mouse 2 $20
Total   $820

Errores comunes

Anidación incorrecta:

<tr>
  <tr> <!-- No se puede anidar <tr> dentro de <tr> -->
    <td>...</td>
  </tr>
</tr>

Olvidar cerrar la etiqueta:

<tr>
  <td>Celda 1
</tr>

Conclusión

La etiqueta <tr> es fundamental para:

  • Estructurar datos en filas dentro de tablas.

  • Mejorar la accesibilidad con encabezados claros.

  • Facilitar el estilo con CSS para diseños responsivos.

Recuerda:

  • Usa <th> para encabezados y <td> para datos.

  • Organiza la tabla con <thead>, <tbody>, y <tfoot>.

  • Prioriza la semántica y la accesibilidad en todo momento.

¡Ahora puedes crear tablas claras y profesionales con <tr>!