
El elemento html table representa datos tabulares, es decir, información expresada a través de una tabla bidimensional.
Las tablas no deben usarse para crear un diseño de página, algunos desarrolladores web antiguos cometieron el error de usarlas para este propósito, pero se debe usar CSS para crear el diseño de la página.
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 >
Ejemplo de una tabla simple con un encabezado (elemento <th>
):
< table > < tr > < th > nombre </ th > < th > número de universidad </ th > < th > promedio </ th > </ tr > < tr > < td > xxxx </ td > < td > 15 </ td > < td > 95,5 </ td > </ tr > < tr > < td > wwww </ td > < td > 100 </ td > < td > 84.2 </ td > </ tr > </ table >
Ejemplo de una tabla con tres secciones: encabezado (a través del elemento <thead>
), cuerpo (a través del elemento <tbody>
) y pie de página (a través del elemento <tfoot>
):
< table > < thead > < tr > < th > encabezado 1 </ th > < th > encabezado 2 </ th > </ tr > </ thead > < tbody > < tr > < td > celda normal 1 </ td > < td > celda normal 2 </ td > </ tr > </ tbody > < tfoot > < tr > < th > Apéndice 1 </ th > < th > Apéndice 2 </ th > </ tr > </ tfoot > </ table >
Ejemplo de una tabla con un conjunto de columnas (a lo largo del elemento <colgroup>
) que abarcan cuatro columnas (propiedad span
):
< table > < colgroup span = "4" > </ colgroup > < tr > < th > país </ th > < th > capital </ th > < th > población </ th > < th > idioma </ th > </ tr > < tr > < td >Estados Unidos </ td> < td > Washington </ td > < td > 309 millones </ td > < td > inglés </ td > </ tr > < tr > < td > Suecia </ td > < td > Estocolmo </ td > < td > 9 millones </ td > < td > sueco </ td > </ tr > </ table >
Un ejemplo de una tabla con un conjunto de columnas (el elemento <colgroup>
) y definimos una columna (el elemento <col>
) con un color de fondo verde:
< table > < colgroup > < col style = "background-color: # 0f0" > </ colgroup > < tr > < th > manzana </ th > < th > limón </ th > < th > naranja </ th > </ tr > < tr > < td > verde </ td > < td >amarillo </ td > < td > naranja </ td > </ tr > </ table >
Ejemplo de una tabla con un título en el elemento <caption>
:
< table > < caption > título de la tabla </ caption > < tr > < td > datos en él </ td > </ tr > </ table >
Etiqueta html table
Clasificaciones de contenido | elemento organizativo. |
---|---|
Contenido permitido | Los siguientes elementos están en orden: Opcional elemento <caption> . Elemento <colgroup> cero veces o más. Opcional elemento <thead>. Uno de los dos elementos siguientes: elemento <tbody> cero veces o más. Un artículo <tr> una o más veces. Opcional elemento <tfoot> . |
Acrónimo | Las etiquetas de inicio o finalización no se pueden omitir. |
Elementos del padre | Cualquier elemento que acepte contenido normativo. |
Interfaz DOMO | HTMLTableElement |
Soporte de navegadores
Chrome | Firefox | Edge | Safari | Ópera |
---|---|---|---|---|
Soportado | Soportado | Soportado | Soportado | Soportado |
Características
En este elemento html table se pueden utilizar propiedades globales.
align
Esta propiedad se utiliza para especificar cómo se alinea la tabla con respecto al documento y acepta uno de los siguientes valores:
left
: Muestra la tabla en el extremo izquierdo del documentocenter
: Centra la mesa en el documento.right
: Muestra la tabla en el extremo derecho del documento
Es importante mencionar que esta propiedad se descuida en HTML 4 y eliminado en HTML5, no puede ser utilizado, pero debe coordinar elemento <table>
con CSS, por lo que mediante el ajuste de la propiedad margin-left
y margin-right
al auto
o uso de la propiedad margin
con el valor 0 auto
.
bgcolor
Esta propiedad define el color de fondo de la tabla 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 <table>
debe formatearse con CSS. Se puede aplicar un efecto similar a esta propiedad mediante el uso de background-color
.
border
Esta propiedad acepta números enteros que representan el 0
tamaño de píxel del marco que rodea la tabla y, si esta propiedad es, el valor de la propiedad se establecerá frame
en void
.
Vale la pena señalar que esta propiedad se ha convertido en obsoleto y no puede ser utilizado, pero el elemento <table>
debe ser formateada usando CSS, a través de las propiedades border
, border-color
, border-width
y border-style
.
cellpadding
Esta propiedad define la cantidad de espacio entre el contenido de la celda y su marco (si el marco se muestra o no). Si el valor de esta propiedad se define en un píxel, se agregará un espacio a los cuatro lados de la celda, pero si el valor es un porcentaje, el contenido de la celda estará centrado y todo el espacio vertical (superior e inferior) representará este valor, y lo mismo se aplica a la distancia horizontal (derecha e izquierda).
Vale la pena señalar que esta propiedad se ha vuelto obsoleta y no puede usarse, pero el elemento <table> debe formatearse usando CSS, aplicando la propiedad border-collapse
al elemento <table>
y estableciendo su valor en collapse
, y usando la propiedad padding
en el elemento <td>
.
cellspacing
Esta propiedad define la cantidad de espacio entre dos celdas, ya sea en píxeles o como un porcentaje, y el valor de esta propiedad se aplicará horizontal y verticalmente al espacio entre la parte superior de la tabla y las celdas de la primera línea, entre la izquierda. de la tabla y la primera columna, la derecha de la tabla y la última columna, y la parte inferior de la tabla y la última línea.
Vale la pena señalar que esta propiedad ha quedado obsoleta y no se puede usar, pero el elemento <table>
debe formatearse usando CSS, aplicando la propiedad border-spacing
al elemento <table>
, una propiedad que border-spacing
no tendrá ningún efecto si la propiedad se establece border-collapse
en collapse
.
frame
Esta propiedad determina qué lado de la tabla debe mostrarse y puede tomar uno de los siguientes valores:
above
below
hsides
vsides
lhs
rhs
border
box
void
Vale la pena señalar que esta propiedad ha quedado obsoleta y no puede usarse, pero el elemento debe formatearse <table>
usando CSS, aplicando las dos propiedades border-style
y border-width
.
rules
Esta propiedad especifica cuándo deben aparecer las líneas (reglas o líneas) en la tabla y puede aceptar una de las siguientes:
none
: significa que no se debe mostrar ninguna fuente, y este es el valor predeterminado.groups
: Conducen a mostrar líneas entre grupos de conocimiento a través de los elementos<thead>
,<tbody>
,<tfoot>
y los elementos<col>
y<colgroup>
.rows
: Muestra las líneas entre las líneas.columns
: Muestra las líneas entre columnas.all
: Muestra las líneas entre líneas y columnas.
Vale la pena señalar que esta propiedad ha quedado obsoleta y no se puede usar, pero se debe usar CSS, aplicando la propiedad border
al elemento <thead>
, <tbody>
, <tfoot>
, <col>
o <colgroup>
según sea necesario.
summary
Esta propiedad define un texto alternativo que resume el contenido de la tabla y permite a los visitantes del sitio con discapacidades visuales que pueden estar navegando por el sitio a través de una pantalla Braille.
La información agregada a esta tabla no solo es útil para los visitantes con problemas visuales, sino también para otros. Tenga en cuenta que esta función ha quedado obsoleta y puede elegir uno de los siguientes métodos para agregar una descripción a la tabla:
- Agregue la explicación alrededor de la mesa (pero este método no está estructurado).
- Agregue la explicación dentro de un elemento
<caption>
dentro de la tabla. - Agregue la explicación dentro del elemento
<details>
dentro del elemento<caption>
dentro de la tabla. - Coloque el elemento
<table>
dentro del elemento<figure>
y agregue la anotación después de él. - Coloque el elemento
<table>
dentro del elemento<figure>
y agregue la explicación dentro del elemento<figcaption>
. - Modifique la tabla para que no necesite su propia explicación (por ejemplo, use los elementos
<th>
y<thead>
).
width
Esta propiedad especifica el ancho de la tabla, este valor se puede establecer en píxeles o porcentaje, y si usa un porcentaje, es parte del contenedor en el que se encuentra el objeto <table>
.
Vale la pena señalar que esta propiedad ha quedado obsoleta y no se puede usar, pero el elemento <table>
debe formatearse usando CSS, a través de la propiedad width
.
Formato predeterminado
La mayoría de los navegadores muestran el elemento <table>
con la propiedad establecida display
en table
, la propiedad border-collapse
en separate
, la propiedad border-spacing
en 2px
y la propiedad establecida border-color
en gray
:
table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; }
- 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