Etiqueta HTML <td>
La etiqueta <td> define una celda de datos estándar en una tabla HTML. Debe usarse como elemento hijo de <tr>, que define una fila en la tabla.
La etiqueta <td> especifica una celda de datos estándar en una tabla HTML. Debe usarse como elemento hijo de <tr>, que define una fila en la tabla. Para definir una celda de encabezado se utiliza la etiqueta <th>.
La etiqueta <td> puede contener texto, formularios, imágenes, tablas, etc. El contenido dentro de ella está alineado a la izquierda de forma predeterminada.
Si presentas datos tabulares en tablas, cada celda de datos debe añadirse individualmente como un elemento <td>.
Todas las filas de la tabla contienen un número igual de celdas, equivalente al número de celdas de la fila más larga. Si una fila tiene menos celdas, el navegador llenará automáticamente la fila colocando celdas vacías al final.
Si necesitas destacar que no hay datos en otras celdas, crea una celda sin contenido donde sea necesario.
Las celdas añadidas por el navegador no tienen bordes y, si van una tras otra, se mostrarán como una sola celda integrada.
Sintaxis
La etiqueta <td> va en pares. El contenido se escribe entre las etiquetas de apertura (<td>) y de cierre (</td>).
Etiqueta HTML <td>
<table>
<tr>
<td>...</td>
</tr>
</table>Ejemplo de la etiqueta HTML <td>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
background-color: lightgrey;
}
tr:first-child {
background-color: #1c87c9;
color: #fff;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>March</td>
<td>10.09.2018</td>
</tr>
<tr>
<td>June</td>
<td>18.07.2018</td>
</tr>
</table>
</body>
</html>En este ejemplo usamos la etiqueta <tr> para definir filas de tabla, <th> para definir celdas de encabezado y <td> para definir celdas de datos estándar.
Expansión de columnas y filas
Los atributos colspan y rowspan se usan habitualmente con la etiqueta <td> para permitir que una sola celda se extienda por varias columnas o filas.
colspanestablece cuántas columnas ocupa una celda. El valor debe ser un entero positivo; el valor predeterminado es1. Una celda concolspan="2"ocupa el espacio horizontal de dos celdas normales, por lo que la fila a la que pertenece debe contener un<td>menos que las demás filas.rowspanestablece cuántas filas ocupa una celda. El valor debe ser un entero positivo; el valor predeterminado es1. Una celda conrowspan="2"se extiende hacia la fila siguiente, por lo que esa fila siguiente debe omitir el<td>que quedaría debajo de ella.
Ten cuidado de no crear una extensión mayor de lo que la tabla permite. Si un colspan o rowspan supera el límite de la tabla, los navegadores lo recortarán a las columnas o filas disponibles en lugar de añadir nuevas. Por el contrario, si olvidas eliminar las celdas que una extensión solapa, la fila termina con demasiadas celdas y el diseño de la tabla se rompe.
Ejemplo de la etiqueta HTML <td> con el atributo colspan:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
background-color: #e6ebef;
}
tr:first-child {
background-color: #1c87c9;
color: #fff;
}
tr:last-child {
height: 60px;
}
tr:last-child td {
background-color: #a3cced;
vertical-align: bottom;
}
tr:last-child span {
font-size: 14px;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Company e-mail</th>
<th>Date</th>
</tr>
<tr>
<td>
<a href="#">[email protected]</a>
</td>
<td>01.09.2017</td>
</tr>
<tr>
<td colspan="2">[email protected];
<strong>01.09.2017 </strong>
<span>(received date)</span>
</td>
</tr>
</table>
</body>
</html>Resultado
Ejemplo de la etiqueta HTML <td> con el atributo rowspan:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #666;
}
thead tr {
background-color: #1c87c9;
color: #fff;
}
tbody td {
background-color: #e6ebef;
}
.year {
background-color: #a3cced;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>March</td>
<td class="year" rowspan="2">2014</td>
</tr>
<tr>
<td>April</td>
</tr>
</tbody>
</table>
</body>
</html>Asociación de celdas con encabezados para accesibilidad
En una tabla simple, los lectores de pantalla pueden asociar cada celda de datos a su encabezado de columna y de fila de forma automática. En una tabla compleja — con varios niveles de encabezados o celdas expandidas — esa asociación automática falla. Para que esas tablas sean legibles por tecnologías de asistencia, asigna un id a cada <th> y luego lista los ids correspondientes en el atributo headers de cada <td> relacionado. Una celda puede referenciar varios encabezados separando sus ids con espacios.
Ejemplo de la etiqueta HTML <td> con el atributo headers:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
margin: 30px auto;
}
th, td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th id="name">Name</th>
<th id="hours">Hours</th>
<th id="rate">Rate</th>
</tr>
<tr>
<td headers="name">Ann</td>
<td headers="hours">38</td>
<td headers="rate">$25</td>
</tr>
<tr>
<td headers="name">Bob</td>
<td headers="hours">40</td>
<td headers="rate">$30</td>
</tr>
</table>
</body>
</html>Aquí cada celda de datos apunta de vuelta al encabezado que la describe, de modo que un lector de pantalla puede anunciar, por ejemplo, "Rate: $25" en lugar de simplemente "$25".
Problemas de diseño con <td>
Por defecto, cada celda de datos se alinea verticalmente con las celdas de la misma columna en las demás filas. Añadir un <td> extra a una sola fila rompe esa alineación, porque cada celda siguiente de esa fila se desplaza una columna.
Por ejemplo, esta fila tiene tres celdas mientras que el resto de la tabla tiene dos, por lo que sus celdas ya no se alinean bajo los encabezados:
<tr>
<th>Month</th>
<th>Total</th>
</tr>
<tr>
<td>March</td>
<td>Q1</td>
<td>120</td>
</tr>La solución es fusionar celdas con colspan en lugar de añadir una columna extra. Aquí la celda "March" abarca ambas columnas sobre los totales, manteniendo la cuadrícula alineada:
<tr>
<th>Month</th>
<th>Total</th>
</tr>
<tr>
<td colspan="2">March (Q1)</td>
</tr>
<tr>
<td>April</td>
<td>120</td>
</tr>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| abbr | texto | Define una versión abreviada del contenido de una celda, o un texto alternativo. (Los agentes de usuario, como los lectores de voz, pueden presentar esta descripción antes que el propio contenido). No compatible con HTML 5. |
| align | left right center justify char | Alinea el contenido de una celda. No compatible con HTML 5. |
| axis | category_name | Categoriza celdas con contenido similar. No compatible con HTML 5. |
| background | background | Establece el fondo de una celda. No compatible con HTML 5. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Define el color de fondo de una celda. No compatible con HTML 5. |
| bordercolor | bordercolor | Establece el color del borde. No compatible con HTML 5. |
| char | character | Alinea el contenido de una celda con un carácter. Se usa únicamente si el atributo align="char". No compatible con HTML 5. |
| charoff | number | Establece el número de caracteres a los que el contenido se alineará desde el carácter especificado por el atributo char. Se usa únicamente si el atributo align="char". No compatible con HTML 5. |
| colspan | number | Define el número de columnas que debe abarcar una celda. El valor del atributo debe ser un entero positivo. El valor predeterminado es 1. |
| headers | header_id | Especifica una o más celdas de encabezado (definidas por la etiqueta <th>) con las que está relacionada una celda estándar. |
| height | % pixels | Establece la altura de una celda. No compatible con HTML 5. |
| nowrap | nowrap | Especifica que el contenido dentro de una celda no debe ajustarse. No compatible con HTML 5. |
| rowspan | number | Especifica el número de filas que debe abarcar una celda. El valor del atributo debe ser un entero positivo. El valor predeterminado es 1. No se recomienda usar valores superiores a 65534, ya que se recortarán a 65534. |
| valign | top middle bottom baseline | Especifica la alineación vertical del contenido dentro de una celda. No compatible con HTML 5. Usa la propiedad CSS vertical-align en su lugar. |
| width | % pixels | Establece el ancho de una celda. No compatible con HTML 5. |
La etiqueta <td> admite los Atributos Globales y los Atributos de Evento.
El atributo scope no es válido en <td>; pertenece al elemento <th>, donde declara si un encabezado aplica a una columna o a una fila. Usa headers en un <td> para apuntar de vuelta a sus celdas de encabezado.
Cómo dar estilo a una etiqueta HTML <td>
Los estilos más comunes de <td> controlan el espaciado, los bordes y la alineación. Aplica el estilo a td junto con th para que las celdas de encabezado y de datos compartan un aspecto coherente:
table {
border-collapse: collapse;
}
td {
padding: 10px;
border: 1px solid #666;
text-align: left;
vertical-align: middle;
}
td:hover {
background-color: #f1f7fb;
}Etiquetas relacionadas
<table>— el contenedor que alberga todas las filas y celdas.<tr>— define una fila de tabla; cada<td>debe estar dentro de una.<th>— define una celda de encabezado, vinculada con<td>a través del atributoheaders.