¿Como funciona el comando en HTML5: 'td'?

La etiqueta <td> en HTML5 es usada para definir una celda en una tabla. Esta etiqueta es fundamental cuando se está trabajando con tablas, ya que cada celda de una fila de la tabla se representa mediante un <td>. En términos simples, <td> significa "table data" o "datos de la tabla".

Atributos de <td>

Al igual que muchas otras etiquetas HTML, <td> puede incluir varios atributos para controlar su apariencia y comportamiento. A continuación, se detallan los atributos más importantes y utilizados, junto con sus descripciones:

1. colspan: Este atributo define el número de columnas que la celda debe abarcar. Es útil para crear celdas que se extienden a lo largo de múltiples columnas.

   • Ejemplo: <td colspan="2">Texto</td>

2. rowspan: Similar a colspan, pero abarca filas en lugar de columnas. Permite que una celda cubra varias filas.

   • Ejemplo: <td rowspan="3">Texto</td>

3. headers: Especifica el id de una celda del encabezado <th> a la que esta celda está asociada. Este atributo es importante para la accesibilidad, especialmente para aquellos que usan lectores de pantalla.

   • Ejemplo: <td headers="header1">Datos</td>

4. abbr: Proporciona una versión abreviada de los datos en la celda, que puede ser utilizada por tecnologías asistivas.

   • Ejemplo: <td abbr="Abrev">Texto completo</td>

5. scope: Este atributo es más comúnmente utilizado con <th>, pero también puede usarse con <td> en algunos casos para especificar el alcance de la celda (row, col, rowgroup, colgroup).

6. align: Especifica la alineación horizontal del contenido de la celda (izquierda, derecha, centro, justificado). Aunque este atributo está en desuso en favor de CSS.

   • Ejemplo: <td align="center">Texto centrado</td>
   • Nota: Este atributo se debe evitar y en su lugar usar CSS para la alineación.

7. valign: Especifica la alineación vertical del contenido de la celda (arriba, media, abajo, baseline). Este atributo también está en desuso en favor de CSS.

   • Ejemplo: <td valign="top">Texto arriba</td>
   • Nota: Al igual que align, es mejor usar CSS para este propósito.

8. bgcolor: Define el color de fondo de la celda. Este atributo también está obsoleto y debería ser reemplazado por CSS.

   • Ejemplo: <td bgcolor="#ff0000">Texto</td>
   • Nota: Se recomienda utilizar CSS en lugar de este atributo.

Ejemplos de uso de <td> en HTML5

A continuación, se presentan algunos ejemplos sencillos que ilustran cómo usar <td> en una tabla HTML:

Ejemplo básico de una tabla con celdas <td>:

<table border="1">
  <tr> <!-- Fila 1 -->
    <td>Celda 1, Fila 1</td>
    <td>Celda 2, Fila 1</td>
  </tr>
  <tr> <!-- Fila 2 -->
    <td>Celda 1, Fila 2</td>
    <td>Celda 2, Fila 2</td>
  </tr>
</table>

Ejemplo usando colspan y rowspan:

<table border="1">
  <tr>
    <td>Celda 1, Fila 1</td>
    <td colspan="2">Celda 2 que abarca dos columnas</td>
  </tr>
  <tr>
    <td rowspan="2">Celda 1 que abarca dos filas</td>
    <td>Celda 2, Fila 2</td>
    <td>Celda 3, Fila 2</td>
  </tr>
  <tr>
    <td>Celda 2, Fila 3</td>
    <td>Celda 3, Fila 3</td>
  </tr>
</table>

Ejemplo usando estilos CSS para la presentación:

<style>
  .highlight {
    background-color: #ff0;
    text-align: center;
  }
</style>
<table border="1">
  <tr>
    <td class="highlight">Celda destacada</td>
    <td>Celda normal</td>
  </tr>
  <tr>
    <td>Celda normal</td>
    <td class="highlight">Celda destacada</td>
  </tr>
</table>

En estos ejemplos, se puede observar cómo la etiqueta <td> es utilizada para definir celdas dentro de una tabla, y cómo los atributos pueden modificar el comportamiento y la apariencia de esas celdas. Además, el uso de CSS se muestra como una alternativa más moderna y preferible para el diseño y estilo visual.