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  y elementos ):

< table > 
  < tr > 
    < td > la primera celda en la primera línea  
    < td > la segunda celda en la primera línea  
   
  < tr > 
    < td > la primera celda en la segunda línea  
    < td > la segunda celda en la segunda línea  
   

Ejemplo de una tabla simple con un encabezado (elemento ):

< table > 
  < tr > 
    < th > nombre  
    < th > número de universidad  
    < th > promedio  
   
  < tr > 
    < td > xxxx  
    < td > 15  
    < td > 95,5  
  
  < tr > 
    < td > wwww  
    < td > 100  
    < td > 84.2  
         

Ejemplo de una tabla con tres secciones: encabezado (a través del elemento ), cuerpo (a través del elemento ) y pie de página (a través del elemento ):

< table > 
  < thead > 
    < tr > 
      < th > encabezado 1  
      < th > encabezado 2  
     
   
  < tbody > 
    < tr > 
      < td > celda normal 1  
      < td > celda normal 2  
     
  
  < tfoot > 
    < tr > 
      < th > Apéndice 1  
      < th > Apéndice 2  
     
   

Ejemplo de una tabla con un conjunto de columnas (a lo largo del elemento ) que abarcan cuatro columnas (propiedad span):

< table > 
  < colgroup  span = "4" >  
  < tr > 
    < th > país  
    < th > capital  
    < th > población  
    < th > idioma  
   
  < tr > 
    < td >Estados Unidos  
    < td > Washington  
    < td > 309 millones  
    < td > inglés  
   
  < tr > 
    < td > Suecia  
    < td > Estocolmo  
    < td > 9 millones  
    < td > sueco 
   

Un ejemplo de una tabla con un conjunto de columnas (el elemento ) y definimos una columna (el elemento ) con un color de fondo verde:

< table > 
  < colgroup > 
    < col  style = "background-color: # 0f0" > 
   
  < tr > 
    < th > manzana  
    < th > limón  
    < th > naranja  
   
  < tr > 
    < td > verde 
    < td >amarillo  
    < td > naranja  
   

Ejemplo de una tabla con un título en el elemento :

< table > 
  < caption > título de la tabla  
  < tr > 
    < td > datos en él  
   

Etiqueta html table

Soporte de navegadores

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 

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:

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 

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 

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 {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}