HTML td

La etiqueta <td> en HTML representa una celda de una tabla. Es utilizada dentro de una fila (etiqueta <tr>) para crear una celda de datos. Puede contener cualquier tipo de contenido, como texto, imágenes, enlaces, etc.

Por defecto, el contenido dentro de una celda se alinea en el centro y se ajusta a la celda. Sin embargo, los atributos como “align” y “valign” pueden ser utilizados para cambiar la alineación del contenido.

Ejemplo de uso

Un ejemplo de uso de la etiqueta <td> en HTML podría ser el siguiente:


<table>
  <tr>
    <td>Nombre</td>
    <td>Edad</td>
    <td>Ciudad</td>
  </tr>
  <tr>
    <td>Juan</td>
    <td>30</td>
    <td>Madrid</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>25</td>
    <td>Barcelona</td>
  </tr>
</table>

Lenguaje del código: HTML, XML (xml)

En este ejemplo se crea una tabla con 3 columnas: Nombre, Edad y Ciudad y dos filas, la primera con los títulos y las siguientes con los datos. Cada celda se crea con la etiqueta <td> de HTML.

Atributos

Los atributos más importantes de la etiqueta <td> son:

  • colspan: permite especificar el número de columnas que debe ocupar la celda. Por ejemplo, si se quiere que una celda ocupe dos columnas, se puede usar <td colspan=»2″>
  • rowspan: permite especificar el número de filas que debe ocupar la celda. Por ejemplo, si se quiere que una celda ocupe dos filas, se puede usar <td rowspan=»2″>
  • headers: permite especificar qué celdas de encabezado están relacionadas con la celda actual.
  • scope: permite especificar el alcance de la celda actual. Puede ser “row”, “col” o “rowgroup”.
  • align: permite alinear el contenido de la celda a la izquierda, derecha o centro
  • valign: permite alinear el contenido de la celda arriba, abajo o en el centro.

Ejemplo


<table>
  <tr>
    <td colspan="2" align="center">Encabezado de la tabla</td>
  </tr>
  <tr>
    <td rowspan="2" headers="col1">Columna 1</td>
    <td align="center">Columna 2</td>
  </tr>
  <tr>
    <td align="center">Columna 2</td>
  </tr>
</table>

Lenguaje del código: HTML, XML (xml)

En este ejemplo se crea una tabla con dos columnas y tres filas, la primera celda de la primera fila se extiende a dos columnas y alineado al centro.

La primera celda de la segunda fila se extiende a dos filas y se relaciona con “col1” y está alineado al centro y la segunda celda de la segunda y tercera fila está alineado al centro.