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.
Tabla de contenidos
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.
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="default">
<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="default">
<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="default">
<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).
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="default">
<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="default">
<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
otfoot
). - 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.