Elemento td

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento td representa a una celda de datos de una tabla (table). En HTML, las tablas están formadas por un conjunto de filas donde cada una contiene a un número de celdas. Por lo tanto, este elemento se encuentra habitualmente dentro de un elemento de fila (tr).

Los atributos colspan y rowspan pueden ser usados para hacer que las celdas abarquen dos o más celdas en dirección horizontal o vertical, respectivamente.

El elemento td, junto con el elemento th, sólo puede estar presente como hijo de un elemento tr.

En versiones previas del estándar, el elemento td tenía varios atributos de presentación que han sido eliminados en HTML5. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplos

El siguiente ejemplo representa una tabla (table) con un número de filas que contienen celdas de datos (td) y celdas de encabezado (th).

<table class="egt">
  <tr>
    <th>Libro</th>
    <th>Autor</th>
    <th>Año</th>
  </tr>
  <tr>
    <td>Dune</td>
    <td>Frank Herbert</td>
    <td>1965</td>
  </tr>
  <tr>
    <td>2001: Odisea del espacio</td>
    <td>Arthur C. Clarke</td>
    <td>1968</td>
  </tr>
  <tr>
    <td>Fundación</td>
    <td>Isaac Asimov</td>
    <td>1951</td>
  </tr>
</table>
Libro Autor Año
Dune Frank Herbert 1965
2001: Odisea del espacio Arthur C. Clarke 1968
Fundación Isaac Asimov 1951

Ahora, haremos que un par de celdas abarquen el espacio de otras en la misma fila. Esta es una tarea bastance sencilla, ya que sólo precisamos especificar el número de celdas hacia la derecha que estaremos unificando (en el atributo colspan) y luego continuar con la declaración de celdas teniendo en cuenta el número de celdas unificadas.

<table class="egt">
  <tr>
    <th>Cuenta básica</th>
    <th>Cuenta full</th>
    <th>Cuenta premium</th>
  </tr>
  <tr>
    <td>64 kbps</td>
    <td>96 kbps</td>
    <td>128 kbps</td>
  </tr>
  <tr>
    <td>20 conexiones</td>
    <td>50 conexiones</td>
    <td>100 conexiones</td>
  </tr>
  <tr>
    <td colspan="2">Soporte por tickets</td>
    <td>Soporte por tickets/teléfono</td>
  </tr>
  <tr>
    <td>Sin panel de control</td>
    <td colspan="2">Panel de control Broadcaster</td>
  </tr>
</table>
Cuenta básica Cuenta full Cuenta premium
64 kbps 96 kbps 128 kbps
20 conexiones 50 conexiones 100 conexiones
Soporte por tickets Soporte por tickets/teléfono
Sin panel de control Panel de control Broadcaster

Por último, unificaremos algunas celdas en la misma columna. Esta vez, tendrás que prestar atención a las celdas unificadas mientras defines filas subsiguientes, para evitar declarar más celdas de las necesarias. Esto puede resultar algo confuso al principio, debido a la estructura de las tablas en HTML que consiste en un conjunto de filas (y no columnas) que contienen celdas.

<table class="egt">
  <tr>
    <th>Mes</th>
    <th>Ingresos</th>
  </tr>
  <tr>
    <td>Enero</td>
    <td>$504.00</td>
  </tr>
  <tr>
    <td rowspan="2">Febrero</td>
    <td>$305.50</td>
  </tr>
  <tr>
    <td>$156.50</td>
  </tr>
</table>
Mes Ingresos
Enero $504.00
Febrero $305.50
$156.50

Nota como en la tercera fila del ejemplo anterior, hemos declarado solo una celda, aún cuando la tabla tiene dos columnas. Esto es así, debido a que la primera celda en la segunda fila ha ocupado el lugar de la que tiene debajo (la que no ha sido declarada).

Cuando se usan juntos en una tabla, los atributos colspan y rowspan deben ser cuidadosamente declarados de forma que no produzcan celdas superpuestas.

Atributos

Atributos específicos

colspan

El número de celdas hacia la derecha que esta celda debería abarcar. Como resultado, esta celda tendrá un ancho igual a su ancho original más el ancho de las celdas que está abracando.

Cuando se usan juntos en una tabla, los atributos colspan y rowspan deben ser cuidadosamente declarados de forma que no produzcan celdas superpuestas.

Ejemplo

<table class="egt">
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
  <tr>
    <td colspan="2">Celda 3</td>
  </tr>
</table>
Celda 1 Celda 2
Celda 3

rowspan

El número de celdas hacia abajo que esta celda debería abarcar. Si este atributo toma el valor cero ("0"), la celda abarcará todas las celdas restantes en el grupo de filas (thead, tbody o tfoot). Como resultado, esta celda tendrá una altura igual a su altura original más la altura de las celdas que está abracando.

Cuando se usan juntos en una tabla, los atributos colspan y rowspan deben ser cuidadosamente declarados de forma que no produzcan celdas superpuestas.

Ejemplo

<table class="egt">
  <tr>
    <td rowspan="2">Celda 1</td>
    <td>Celda 2</td>
  </tr>
  <tr>
    <td>Celda 3</td>
  </tr>
</table>
Celda 1 Celda 2
Celda 3

headers

Una lista de identificadores únicos separados por espacios, cada uno de los cuales concuerda con el atributo id de una celda de encabezado (th) en la misma tabla. Las celdas apuntadas en este atributo proveerán información de encabezado para esta celda.

Este atributo es rara vez necesario, y sólo se requiere en tablas muy complejas. En la mayoría de los casos el atributo scope de las celdas de encabezado (th) será suficiente para lograr tablas accesibles.

Ejemplo

<td headers="jack-allen edad">28 años</td>

scope

Un grupo de celdas para las cuales esta celda brinda información de encabezado. Los valores posibles (insensibles a mayúsculas/minúsculas) son:

  • row: todas la celdas en la misma fila.
  • col: todas la celdas en la misma columna.
  • rowgroup: todas la celdas en el mismo grupo de filas (thead, tbody o tfoot).
  • colgroup: todas la celdas en el mismo grupo de columnas (colgroup).

Este atributo se ha vuelto obsoleto para el elemento td. Los autores pueden recurrir a celdas de encabezado (th) para brindar información de encabezado.

Ejemplo

<td scope="colgroup">

axis

Una lista de nombres de categorías separados por comas a las que esta celda pertenece. Estas categorías conceptuales pueden formar grupos de celdas que muestran información relacionada bajo algún punto de vista. Los navegadores pueden usar la información en este atributo para mostrar y relacionar estas categorías.

Este atributo se ha vuelto obsoleto en HTML5 y, por lo tanto, su uso ya no es válido. Los autores deberían reemplazarlo con el atributo scope de las celdas de encabezado (th).

Ejemplo

<td axis="income benefit financial">

abbr

Una versión más corta del contenido de la celda, que puede ser usada por los navegadores cuando resulte apropiado. Un buen uso para este atributo podría ser como reemplazo del contenido de la celda cuando el espacio para la representación de ésta es reducido.

Este atributo se ha vuelto obsoleto en HTML5 y, por lo tanto, su uso ya no es válido. Los autores deberían reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<td abbr="Income">Income from goods and services</td>

align

La alineación horizontal del texto en la celda. Existen cinco valores posibles (insensibles a mayúsculas/minúsculas):

  • left: el texto se alinea a la margen izquierda. Este es el valor predeterminado para celdas de datos (td).
  • center: el texto es centrado. Este es el valor predeterminado para celdas de encabezado (th).
  • right: el texto se alinea a la margen derecha.
  • justify: el texto es justificado o alineado a ambas márgenes.
  • char: el texto se alinea a un carácter específico. Se utiliza en conjunto con el atributo char.

Este atributo se ha vuelto obsoleto en HTML5 y, por lo tanto, su uso ya no es válido. Los autores deberían reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<td align="center">

char

Un carácter que actuará como eje para la alineación del texto. Está pensado para trabajar junto con el atributo align cuando presenta el valor "char". En otras situaciones será completamente ignorado.

Este atributo se ha vuelto obsoleto en HTML5 y su uso es consecuentemente inválido. Se aconseja a los autores reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<td align="char" char="c">

charoff

Un desplazamiento, desde la primera aparición del carácter de alineación (especificado en el atributo char) y en la dirección del texto. El carácter resultante de este cálculo será el eje para la alineación del texto.

Para que este atributo sea considerado, el valor del atributo align debe ser "char" y el atributo char debe estar presente.

Este atributo es considerado obsoleto por HTML5 y su uso ya no es recomendado. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplo

<td align="char" char="t" charoff="7">

valign

La alineación vertical del texto en la celda. Existen cuatro valores posibles (insensibles a mayúsculas/minúsculas):

  • top: el texto se alinea a la margen superior.
  • middle: el texto es centrado verticalmente.
  • bottom: el texto se alinea a la margen inferior.
  • baseline: todas las celdas en una fila con esta misma alineación deberían tener su primera línea de texto en una línea base común.

Este atributo es obsoleto de acuerdo con el estándar HTML5 y, por lo tanto, inválido. Se aconseja a los autores evitar su uso y reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<td valign="top">

width

Un valor que indica el ancho de la celda, en píxeles o como un porcentaje relativo al espacio horizontal disponible. Los navegadores pueden adaptar este valor de acuerdo a la disponibilidad del espacio.

Este atributo se ha vuelto obsoleto en HTML5 debido a su naturaleza visual. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplo

<td width="25%">

height

Un número de píxeles que indica la altura recomendada para la celda. Los navegadores pueden adaptar este valor de acuerdo al conetido de la celda.

Este atributo se ha vuelto obsoleto en HTML5 debido a su naturaleza visual. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplo

<td height="110">

nowrap

Un valor booleano que indica si los navegadores deberían deshabilitar el quiebre automático de texto para el contenido de la celda.

Este atributo se ha vuelto obsoleto en HTML5 debido a su naturaleza visual. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplo

<td nowrap>

bgcolor

Un color para rellenar el fondo del elemento.

El atributo bgcolor ha sido eliminado del estándar HTML5 debido a su naturaleza visual. Sus resultados pueden ser perfectamente logrados con hojas de estilo.

Ejemplo

<td bgcolor="#00ccee">

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.