Etiqueta HTML <td>
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 una tabla. Para definir una celda de encabezado se usa la etiqueta <th>.
La etiqueta <td> puede contener texto, formularios, imágenes, tablas, etc. El contenido dentro de ella se alinea a la izquierda de forma predeterminada.
TIP
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 el mismo número de celdas, que equivale al número de celdas de la fila más larga. Si hay menos celdas en una fila, el navegador la completará automáticamente, colocando celdas vacías al final de ella.
TIP
Las tablas más avanzadas pueden contener los elementos <caption>, <colgroup>, <col>, <tfoot>, <tbody> o <thead>.
Si necesitas enfatizar 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> viene en pares. El contenido se escribe entre las etiquetas de apertura (<td>) y cierre (</td>).
Etiqueta HTML <td>
<table>
<tr>
<td>...</td>
</tr>
</table>Ejemplo de la etiqueta HTML <td>:
Mes y fecha|Ejemplo de la etiqueta HTML <td>|W3Docs
<!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 la tabla, <th> para definir celdas de encabezado y <td> para definir celdas de datos estándar.
Los atributos colspan y rowspan se usan comúnmente con la etiqueta <td> para permitir que el contenido abarque varias columnas o filas.
Ejemplo de la etiqueta HTML <td> con el atributo colspan:
Correo electrónico de la empresa y fecha|Ejemplo de la etiqueta HTML <td>|W3Docs
<!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;
}
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 style="height:60px;">
<td colspan="2" valign="bottom">[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:
Ejemplo con el atributo rowspan|Etiqueta HTML <td>|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
th, td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%; margin:30px auto; border-collapse:collapse;">
<tr style="background-color:#1c87c9; color:#fff;">
<th>Month</th>
<th>Year</th>
</tr>
<tr>
<td style="background-color:#e6ebef;">March</td>
<td rowspan="2" style="background-color:#a3cced; text-align:center;">2014</td>
</tr>
<tr style="background-color:#e6ebef;">
<td style="background-color:#e6ebef;">April</td>
</tr>
</table>
</body>
</html>Problemas de diseño de <td>
De forma predeterminada, los elementos de datos de la tabla se distribuyen alineados verticalmente con los elementos de datos de la tabla de las filas anteriores y siguientes. Por ejemplo, si una tabla contiene cuatro filas de celdas de datos, la primera celda de datos de cada fila se alinea con la primera celda de datos de las demás filas. Y si añades un elemento <td> adicional a una sola fila, el resultado no será atractivo. Con la ayuda del atributo colspan puedes resolver este problema. Aquí, se indicará a las celdas que están ubicadas debajo y encima de la celda adicional que abarquen dos celdas de datos de la tabla.
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| abbr | text | 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 del 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 solo si el atributo align="char". No compatible con HTML 5. |
| charoff | number | Establece el número de caracteres desde el carácter especificado por el atributo char al que se alineará el contenido. Se usa solo 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 se relaciona 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. |
| scope | col colgroup row rowgroup | Define las celdas a las que se relaciona el elemento de encabezado (definido en <th>). No compatible con HTML 5. |
| valign | top middle bottom baseline | Especifica la alineación vertical del contenido dentro de una celda. No compatible con HTML 5. |
| width | % pixels | Establece el ancho de una celda. No compatible con HTML 5. |
La etiqueta <td> admite los atributos globales y los atributos de eventos.
Cómo dar estilo a una etiqueta HTML <td>
{
"tag_name": "td"
}Práctica
What are the attributes of the HTML <td> tag?