
El elemento html td identifica una celda en la tabla que lo contiene. Ejemplo de una tabla simple con dos líneas y dos columnas (transversales <tr>
y elementos <td>
):
< table > < tr > < td > la primera celda en la primera línea </ td > < td > la segunda celda en la primera línea </ td > </ tr > < tr > < td > la primera celda en la segunda línea </ td > < td > la segunda celda en la segunda línea </ td > </ tr > </ table >
Consulte la página del artículo <table>
para ver más ejemplos.
Etiqueta html td
Clasificaciones de contenido | No hay. |
---|---|
Contenido permitido | Contenido organizacional. |
Acrónimo | No se puede omitir la etiqueta de inicio. Puede borrarse marcando el final de la elemento <td> si vino directamente del elemento <td> o <th> , si no hay otro tipo de contenido en el elemento padre. |
Elementos del padre | Elemento <tr> . |
Interfaz DOMO | HTMLTableDataCellElement |
Soporte de navegadores
Chrome | Firefox | Edge | Safari | Ópera |
---|---|---|---|---|
Soportado | Soportado | Soportado | Soportado | Soportado |
Características
En este elemento html td se pueden utilizar propiedades globales.
abbr
Esta función contiene una breve explicación del contenido de la celda y algunos programas, como los lectores de pantalla, pueden mostrar esta explicación antes que el contenido en sí.
Vale la pena señalar que esta característica ha sido eliminada en HTML5, tenga en cuenta que la celda comienza con una explicación del contenido antes de su contenido o escribe una descripción larga de la celda y la coloca dentro de la propiedad title
.
align
Esta propiedad se utiliza para especificar cómo se alinea la celda y acepta uno de los siguientes valores:
left
: Muestra el contenido a la izquierda de la celdacenter
: centra el contenido en la celdaright
: Muestra el contenido a la derecha de la celdajustify
: Muestra el contenido de la línea completa.
Vale la pena señalar que esta característica ha sido descuidada en HTML 4 y eliminada en HTML5, y no está permitido su uso, pero debe formatearse usando CSS, asignando uno de los valores left
o center
o right
o justify
a la propiedad text-align
.
axis
Esta propiedad contiene una lista de cadenas separadas por un espacio, y cada cadena representa el ID de un grupo de celdas al que se aplica el encabezado. Tenga en cuenta que esta propiedad se omite en HTML5 y que debe utilizarse en su lugar scope
.
bgcolor
Esta propiedad define el color de fondo de la celda y puede aceptar valores hexadecimales sRGB, precedidos por un carácter #
. Se pueden utilizar los siguientes nombres de colores predefinidos:
black = «# 000000» | green = «# 008000» |
silver = «# C0C0C0» | lime = «# 00FF00» |
gray = «# 808080» | olive = «# 808000» |
white = «#FFFFFF» | yellow = «# FFFF00» |
maroon = «# 800000» | navy = «# 000080» |
red = «# FF0000» | blue = «# 0000FF» |
purple = «# 800080» | teal = «# 008080» |
fuchsia = «# FF00FF» | aqua = «# 00FFFF» |
Vale la pena señalar que esta función no es estándar y solo la utilizan algunas versiones de Internet Explorer, pero el elemento debe formatearse <td>
con CSS. Se puede aplicar un efecto similar a esta propiedad utilizando la propiedad background-color
.
colspan
Esta propiedad contiene un número entero positivo que indica el número de columnas sobre las que se extiende la celda. El valor predeterminado es 1
, y si este valor se establece en la 0
celda se extenderá hasta el último elemento del conjunto de columnas ( <colgroup>
), los valores superiores a 1000 serán invalidados por el navegador y se establecerán en el valor predeterminado ( 1
).
Ejemplo de uso de la propiedad colspan
para hacer que una celda de tabla abarque dos columnas:
< table > < tr > < th > mes </ th > < th > gastos </ th > </ tr > < tr > < td > enero </ td > < td > $ 100 </ td > </ tr > < tr > < td > febrero </ td > <td > $ 80</ td > </ tr > < tr > < td colspan = "2" > Total: $ 180 </ td > </ tr > </ table >
headers
Esta propiedad contiene una lista de cadenas separadas por un espacio, y cada cadena es una propiedad id
de los elementos <th>
que se aplican a ese elemento.
Ejemplo de asignación de un identificador a id
elementos <th>
, luego usar el valor de ese identificador con la propiedad headers
en elementos <td>
para indicar a qué encabezado pertenece esta celda:
< table > < tr > < th id = "nombre" > nombre </ th > < th id = "email" > correo electrónico </ th > < th id = "phone" > número de teléfono </ th > < th id = "addr" > Título </ th > </ tr > < tr > < td encabezados= "name" > Jon Doe </ td > < td headers = "email" > doe@gmail.com </ td > < td headers = "phone" > 6483***** </ td > < td headers = "addr "" > El pueblo </ td > </ tr > </ table >
rowspan
Esta propiedad contiene un número entero positivo que indica el número de líneas que abarca la celda, y el valor predeterminado es 1
, si esta propiedad se establece en 0
, extenderá la celda hasta el final de la partición de la tabla ( <thead>
o <tbody>
o <tfoot>
) a la que pertenece la celda. Cualquier valor superior a 65534 se convertirá en 65534.
Un ejemplo similar al ejemplo de la propiedad colspan
para una celda que abarca dos líneas:
< table > < tr > < th > mes </ th > < th > gastos </ th > < th > suministros para fiestas </ th > </ tr > < tr > < td > enero </ td > < td > $ 100 </ td > < td rowspan = "2" >$ 50 </ td> </ tr > < tr > < td > tick </ td > < td > $ 80 </ td > </ tr > </ table >
scope
Esta propiedad define con qué se relaciona la celda definida en el elemento <td>
o <th>
y toma uno de los siguientes valores:
row
: El encabezado se relaciona con todas las celdas de la línea a la que pertenece.col
: El encabezado está asociado con todas las celdas de la columna a la que pertenece.rowgroup
: El encabezado se relaciona con un grupo de líneas y se vincula a todas las celdas de ese grupo.colgroup
: Un encabezado se relaciona con un grupo de columnas y enlaces a todas sus celdas.auto
.
valign
Esta propiedad se usa para especificar qué tan verticalmente es la alineación de cada celda de la línea y acepta uno de los siguientes valores:
baseline
: Muestra el contenido lo más cerca posible de la parte inferior de la celda, pero la alineación estará en la línea de base de los caracteres en lugar de en la parte inferior, y si los caracteres son del mismo tamaño, este valor tendrá el mismo efecto que el valorbottom
.bottom
: Muestra el contenido lo más cerca posible de la parte inferior de la celda.middle
: Centra el texto en la celda verticalmente.top
: Muestra el contenido lo más cerca posible de la parte superior de la celda.
Vale la pena señalar que esta función se ha descuidado en HTML 4 y se ha eliminado en HTML5, y no está permitido su uso, pero debe formatearse con CSS a través de la propiedad vertical-align
.
width
Esta propiedad se utiliza para especificar el ancho de celda recomendado, y si la celda es demasiado estrecha y no contiene suficiente contenido, el ancho aumentará según sea necesario.
Tenga en cuenta que esta propiedad está obsoleta en HTML 4 y se omite en HTML5 y, en su lugar, debe utilizarse una propiedad width
CSS.
Formato predeterminado
La mayoría de los navegadores muestran el elemento <td>
con el conjunto de propiedades display
a table-cell
y hereda valor de la propiedad vertical-align
:
td { display: table-cell; vertical-align: inherit; }
- Resumen General de Listas en HTML
- Qué son los Atributos HTML
- Introducción al Lenguaje de Programación HTML
- Elementos h1 al h6 en HTML
- Elemento wbr en HTML
- Elemento video en HTML
- Elemento var en HTML
- Elemento ul en HTML
- Elemento u en HTML
- Elemento track en HTML
- Elemento tr en HTML
- Elemento title en HTML
- Elemento time en HTML
- Elemento thead en HTML
- Elemento th en HTML
- Elemento tfoot en HTML
- Elemento textarea en HTML
- Elemento td en HTML
- Elemento tbody en HTML
- Elemento table en HTML
- Elemento summary en HTML
- Elemento sub en HTML
- Elemento style en HTML
- Elemento strong en HTML
- Elemento span en HTML
- Elemento source en HTML
- Elemento small en HTML
- Elemento select en HTML
- Elemento section en HTML
- Elemento script en HTML
- Elemento samp en HTML
- Elemento s en HTML
- Elemento q en HTML
- Elemento progress en HTML
- Elemento pre en HTML
- Elemento picture en HTML
- Elemento param en HTML
- Elemento p en HTML
- Elemento output en HTML
- Elemento option en HTML
- Elemento optgroup en HTML
- Elemento ol en HTML