Elemento table en HTML

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 documento
center: 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;
}