La Etiqueta TD

Se utiliza para definir celdas de datos dentro de una tabla. Representa el contenido estándar de una tabla.

La etiqueta <td> en HTML se utiliza para definir celdas de datos dentro de una tabla. Representa el contenido estándar de una tabla, como texto, números o elementos multimedia. Junto con <tr> (filas) y <th> (encabezados), permite organizar información de manera estructurada. Aquí te explicamos cómo usarla correctamente.

Sintaxis básica

La estructura básica de una tabla con <td> es:

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

Ejemplo:

<table border="1">
  <tr>
    <td>Manzana</td>
    <td>$2</td>
  </tr>
  <tr>
    <td>Plátano</td>
    <td>$1</td>
  </tr>
</table>

Resultado:

Manzana $2
Plátano $1

Atributos clave

Aunque se recomienda usar CSS para estilos, algunos atributos son útiles:

Atributo Descripción
colspan Combina celdas horizontalmente (ejemplo: <td colspan="2">).
rowspan Combina celdas verticalmente (ejemplo: <td rowspan="2">).
headers Asocia la celda con encabezados específicos (para accesibilidad).

Combinar celdas: colspan y rowspan

Ejemplo con colspan:

<table border="1">
  <tr>
    <td colspan="2">Frutas</td>
  </tr>
  <tr>
    <td>Manzana</td>
    <td>$2</td>
  </tr>
</table>

Resultado:

Frutas (ocupa 2 columnas)
Manzana $2

Ejemplo con rowspan:

<table border="1">
  <tr>
    <td rowspan="2">Ventas</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>$200</td>
  </tr>
</table>

Resultado:

Ventas (ocupa 2 filas) $100
  $200

Estilización con CSS

Reemplaza atributos obsoletos como width o align con CSS:

<style>
  td {
    padding: 10px;          /* Espaciado interno */
    border: 1px solid #ddd; /* Borde */
    text-align: center;     /* Alineación */
    background: #f9f9f9;    /* Fondo */
  }
</style>

Accesibilidad

Encabezados (<th>): Usa <th> para titulares y vincula celdas con headers:

<table>
  <tr>
    <th id="producto">Producto</th>
    <th id="precio">Precio</th>
  </tr>
  <tr>
    <td headers="producto">Manzana</td>
    <td headers="precio">$2</td>
  </tr>
</table>

Lectores de pantalla: Interpretan <td> como datos asociados a sus encabezados.

Buenas prácticas

Usa <th> para encabezados: Mejora la semántica y accesibilidad.

Evita tablas anidadas: Dificultan la lectura y el rendimiento.

Responsive design: En móviles, usa contenedores con scroll:

<div style="overflow-x: auto;">
  <table>...</table>
</div>

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    table {
      width: 80%;
      border-collapse: collapse;
      margin: 20px auto;
    }
    th, td {
      border: 1px solid #2ecc71;
      padding: 12px;
      text-align: left;
    }
    th {
      background: #2ecc71;
      color: white;
    }
    td {
      background: #f0f8ff;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Producto</th>
      <th>Precio</th>
      <th>Stock</th>
    </tr>
    <tr>
      <td>Laptop</td>
      <td>$800</td>
      <td rowspan="2">10</td>
    </tr>
    <tr>
      <td>Tablet</td>
      <td>$300</td>
    </tr>
  </table>
</body>
</html>

Resultado:

Producto Precio Stock
Laptop $800 10 (ocupa 2 filas)
Tablet $300  

Errores comunes

Celdas fuera de una fila:

<table>
  <td>Dato suelto</td> <!-- Falta <tr> -->
</table>

Uso incorrecto de <th>:

<tr>
  <td><th>Precio</th></td> <!-- No anidar <th> dentro de <td> -->
</tr>

Conclusión

La etiqueta <td> es fundamental para:

  • Organizar datos en tablas estructuradas.

  • Facilitar la accesibilidad y SEO.

  • Permitir combinación de celdas para diseños complejos.

Recuerda:

  • Usa <th> para encabezados.

  • Aplica estilos con CSS, no con atributos obsoletos.

  • Prioriza la claridad y la semántica.

¡Ahora puedes crear tablas funcionales y accesibles con <td>!