Etiqueta <td> HTML

Definición y uso

<td> La etiqueta define la celda de datos estándar en una tabla HTML.

Una tabla HTML tiene dos tipos de celdas:

  • Celda de título - contiene información de título (usando <th> creación del elemento)
  • Celda de datos - contiene datos (usando <td> creación del elemento)

Por defecto,<td> El texto dentro del elemento es común y alineado a la izquierda.

El texto dentro del elemento <th> se muestra por defecto en negrita y centrado.

Vea también:

Tutorial de HTML:Tabla HTML

Manual de referencia del DOM HTML:Objeto TableData

Tutorial de CSS:Configurar el estilo de la tabla

Ejemplo

Ejemplo 1

Una tabla HTML simple, con dos filas y cuatro celdas:

<table>
  <tr>
    <td>La celda A</td>
    <td>La celda B</td>
  </tr>
  <tr>
    <td>La celda C</td>
    <td>La celda D</td>
  </tr>
</table>

Prueba personalmente

Ejemplo 2

¿Cómo alinear? <td> el contenido (usando CSS):

<table style="width:100%">
  <tr>
    <th>mes</th>
    <th>ahorros</th>
  </tr>
  <tr>
    <td>enero</td>
    <td style="text-align:right">￥3400</td>
  </tr>
  <tr>
    <td>febrero</td>
    <td style="text-align:right">￥4500</td>
  </tr>
</table>

Prueba personalmente

Ejemplo 3

¿Cómo agregar un color de fondo a las celdas de una tabla (usando CSS)?

<table>
  <tr>
    <th>mes</th>
    <th>ahorros</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">enero</td>
    <td style="background-color:#00FF00">￥3400</td>
  </tr>
 </table>

Prueba personalmente

Ejemplo 4

¿Cómo establecer la altura de las celdas de la tabla (usando CSS)?:

<table>
  <tr>
    <th>mes</th>
    <th>ahorros</th>
  </tr>
  <tr>
    <td style="height:100px">enero</td>
    <td style="height:100px">￥3400</td>
  </tr>
</table>

Prueba personalmente

Ejemplo 5

¿Cómo especificar que no se realice un salto de línea en una celda de tabla (usando CSS)?:

<table>
  <tr>
    <th>poesía</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">Con las nubes del Baiyu, me despedí en el cielo, regresé a Jiangling a través de mil millas en un día. Las voces de los monos de ambas orillas no pararon, y la embarcación ligera ya había pasado por miles de montañas.</td>
  </tr>
</table>

Prueba personalmente

Ejemplo 6

¿Cómo alinear verticalmente? <td> el contenido (usando CSS):

<table style="width:50%;">
  <tr>
    <th>mes</th>
    <th>ahorros</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">enero</td>
    <td style="vertical-align:bottom">￥3400</td>
  </tr>
</table>

Prueba personalmente

Ejemplo 7

¿Cómo establecer el ancho de las celdas de la tabla (usando CSS)?:

<table style="width:100%">
  <tr>
    <th>mes</th>
    <th>ahorros</th>
  </tr>
  <tr>
    <td style="width:70%">enero</td>
    <td style="width:30%">￥3400</td>
  </tr>
</table>

Prueba personalmente

Ejemplo 8

¿Cómo crear un encabezado de tabla?:

<table>
  <tr>
    <th>nombre</th>
    <th>correo electrónico</th>
    <th>teléfono</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Prueba personalmente

Ejemplo 9

¿Cómo crear una tabla con encabezado?:

<table>
  <caption>ahorros mensuales</caption>
  <tr>
    <th>mes</th>
    <th>ahorros</th>
  </tr>
  <tr>
    <td>enero</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>febrero</td>
    <td>￥4500</td>
  </tr>
</table>

Prueba personalmente

Ejemplo 10

¿Cómo definir celdas de tabla que se extienden a través de múltiples filas o columnas?:

<table>
  <tr>
    <th>nombre</th>
    <th>correo electrónico</th>
    <th colspan="2">teléfono</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Prueba personalmente

Atributo

Atributo Valor Descripción
colspan Número Especifica el número de columnas que debe cruzar la celda.
headers header_id Especifica una o más celdas de título relacionadas con la celda.
rowspan Número Establece el número de filas que debe cruzar la celda.

Atributos globales

<td> La etiqueta también admite Atributos globales en HTML.

Atributos de evento

<td> La etiqueta también admite Atributos de evento en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los siguientes valores predeterminados <td> Elemento:

td {
  display: table-cell;
  vertical-align: inherit;
}

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte