Go to main content
Bypass navigation bar Referencia HTML Tags HTML Tutoriales HTML
Bypass language selection
Bypass location bar

Location: Inicio > Referencia HTML > Tags HTML > Tag HTML td

Bypass main content

Tag HTML td

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

Bypass main content

Descripción

El elemento HTML td inserta una celda de datos en una tabla (elemento HTML table).

Pueden existir dos tipos de celdas en una tabla: una celda de datos o una celda de encabezado (elemento HTML th). Se supone, que las celdas de encabezado proveen información de encabezado para las celdas de datos, sin embargo, hay casos en que las celdas de datos también pueden proveer información de encabezado. Esto puede lograrse mediante los atributos "headers" y "scope" en (o apuntando a) celdas de datos.

Nota que los atributos "width", "height", "nowrap" y "bgcolor" han sido desaprobados en HTML 4.01 debido a su naturaleza presentacional. Por lo tanto, su uso ya no es recomendable.

Ejemplos

Código
<table>
<thead>
<tr>
<th>Usuario</th>
<th>Puntos</th>
<th>Activo</th>
</tr>
</thead>
<tbody>
<tr>
<td>sammy</td>
<td>248</td>
<td>Sí</td>
</tr>
<tr>
<td>jhon45</td>
<td>146</td>
<td>Sí</td>
</tr>
</tbody>
<tbody>
<tr>
<td>ackbard</td>
<td>801</td>
<td>No</td>
</tr>
<tr>
<td>jacks34</td>
<td>248</td>
<td>No</td>
</tr>
</tbody>
</table>
Vista
Usuario Puntos Activo
sammy 248
jhon45 146
ackbard 801 No
jacks34 248 No

Atributos

id (name)

El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente).

<p id="parrafo1">Este es el primer párrafo, llamado "parrafo1". Para cambiar dinámicamente sus prpiedades usa este identificador.</p>

class (cdata)

El atributo "class" asigna un nombre de clase (o una lista de nombres de clases separadas por espacios) al elemento contenedor. Es usado junto con hojas de estilos y le dice al navegador la clase (o clases) a las que el elemento está asociado.

Una clase da atributos presentacionales a los elementos (lee más en el tutorial "Hojas de estilo en cascada").

<p class="referencias">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks</p>
<p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks... y es más importante que el anterior.</p>

style (style)

Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos es particularmente útil, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo "class". De este modos, se mejora la separación de las partes semántica y presentacional de tu documento.

Puedes encontrar más información acerca de los atributos presentacionales en el tutorial "Hojas de estilo en cascada".

<p style="color: #0000FF; font-size: 12pt">Este es un párrafo con un estilo definido.</p>
<p>Y este es otro texto sin estilo.</p>

title (text)

El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al posar el mouse encima del contenido del elemento por un pequeño período de tiempo.

Código
<a title="HTMLQuick.com" href="http://www.htmlquick.com/es/">Código HTML</a>
Vista

lang (langcode)

Especifica el lenguaje del contenido de un elemento. El valor por defecto es "desconocido".

Al escribir documentos XHTML 1.0, el atributo usado para especificar el lenguaje de un elemento es "xml:lang". Para compatibilidad con los dos tipos de estándar ambos atributos pueden ser usados simultáneamente como en el ejemplo a continuación. Nota que en XHTML 1.1, el atributo "lang" ha sido completamente reemplazado por "xml:lang" y su uso ya no es válido.

<p lang="en" xml:lang="en">This is a paragraph in English.</p>
<p lang="es" xml:lang="es">Este es un párrafo en español.</p>

dir

Este atributo indica la dirección en que el texto del elemento debe ser leído. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:

  • RTL: derecha a izquierda.
  • LTR: izquierda a derecha.
<q lang="he" dir="rtl">...una cita en Hebreo...</q>

colspan (number)

Especifica el número de columnas a ser unificadas con esta celda. El valor por defecto es "1".

El valor "0" significa que esta celda se unificará con todas las celdas de la fila, desde su posición hasta la última columna o sección contenedora (elemento HTML colgroup).

Código
<table>
<tr>
<td rowspan="2">Celda1</td>
<td>Celda2</td>
</tr>
<tr>
<td>Celda3</td>
</tr>
</table>
Vista
Celda1 Celda2
Celda3

rowspan (number)

Especifica el número de filas que se unificarán con esta celda. El valor por defecto es "1".

El valor "0" significa que esta celda se unificará con todas las celdas de la columna, desde su posición hasta la última fila (elemento HTML thead, elemento HTML tbody ó elemento HTML tfoot).

Código
<table>
<tr>
<td>Celda1</td>
<td>Celda2</td>
</tr>
<tr>
<td colspan="2">Celda3</td>
</tr>
</table>
Vista
Celda1 Celda2
Celda3

headers (idref)

Contiene una lista separada por espacios de identificadores (atributos "id") que corresponden a otras celdas que proveen información de encabezado para la actual.

<td headers="estados-unidos produccion">15,434</td>

scope

Especifica un grupo de celdas para las que la celda actual provee información de encabezado. Los valores posibles son (insensibles a mayúsculas/minúsculas):

<th scope="colgroup">Producción</th>

axis (cdata)

Este atributo provee una lista separada por comas de nombres de categorías, a las cuales la celda actual pertenece. Estas categorías conceptuales pueden formar grupos de celdas que muestran información relacionada desde algún punto de vista.

Los agentes de usuario pueden usar la información en este atributo para proveer alguna funcionalidad a la hora de mostrar y relacionar estas categorías.

<td axis="Producción total,Bienes,Ventas">1,154</td>

abbr (text)

Provee una alternativa más corta para el contenido de la celda, que puede ser utilizada por los navegadores cuando sea apropiado. Un buen uso para este atributo podría ser al reemplazar el contenido de la celda cuando el espacio para la presentación es reducido.

<td abbr="Ingresos">Ingresos proveniente de los bienes y servicios</td>

align

Establece la alineación para el texto dentro de una celda. Puede tomar uno de los siguientes valores insensibles a mayúsculas/minúsculas:

  • left: la información es alineada a la izquierda. Este es el valor por defecto para las celdas comunes (tag HTML td).
  • center: la información es centrada. Este es el valor por defecto para las celdas de encabezado (tag HTML th).
  • right: la información es alineada a la derecha.
  • justify: la información es justificada, es decir, alineada a ambos márgenes.
  • char: el texto es alineado según un carácter específico. se utiliza junto con el atributo "char".
<tbody align="center">

valign

Establece la alineación vertical para el texto dentro de una celda. Puede tomar uno de los siguientes valores insensibles a mayúsculas/minúsculas:

  • top: la información es alineada a la margen superior.
  • middle: la información es centrada verticalmente.
  • bottom: la información es alineada a la margen inferior.
  • baseline: todas las celdas en una fila que contengan esta alineación deberían tener su primera línea de texto en una base común.
<tbody valign="top">

char (character)

Especifica un carácter que actuará como eje para la alineación del texto. Para que este valor sea considerado, el atributo "align" debe presentar el valor "char".

Nota que a los navegadores no se les requiere soporte para este atributo. Esto, sumado a su naturaleza presentacional, constituye una buena razón para no confiar en el.

<tbody align="char" char=".">

charoff (length)

Especifica un desplazamiento para el carácter de alineación (primera aparición) en cada línea. La dirección del texto, establecida con el atributo "dir", debe ser tenida en cuenta a la hora de decidir cuál será la primera aparición.

Nota que a los navegadores no se les requiere soporte para este atributo. Esto, sumado a su naturaleza presentacional, constituye una buena razón para no confiar en el.

<tbody align="char" char="." charoff="1">

height (length)

Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.

Provee una altura recomendada para la celda.

<td width="20">Contenido</td>

nowrap

Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.

Cuando este atributo booleano está presente, los agentes de usuario deshabilitan el quiebre de línea automático para el contenido de la celda.

Recuerda que en XHTML, los atributos booleanos deben tomar a sus propios nombres por valor (por ejemplo, nombreatributo="nombreatributo").

<td nowrap="nowrap">Este texto será mostrado en una sola línea.</td>

bgcolor (color)

Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.

Define el color que será usado como fondo de la celda.

<td bgcolor="green">Contenido</td>

Eventos

  • onclick
  • ondblclick
  • onmousedown
  • onmouseup
  • onmouseover
  • onmousemove
  • onmouseout
  • onkeypress
  • onkeydown
  • onkeyup

Ve a la lista completa de eventos en HTML.

Diseño y desarrollo: Latitud29.com

Vínculos y logos|Contacto|Más allá de HTML|Herramientas y recursos|Mapa del sitio|Webmaster|Dona