Etiqueta HTML `<table>`

El tag <table> define una tabla HTML. Contiene otros elementos HTML que determinan la estructura de la tabla.

El tag <tr> determina las filas de la tabla. Una fila puede tener uno o más elementos <td> o <th>, que definen una celda de la tabla y un encabezado de tabla, respectivamente.

El tag <th> se coloca en la primera fila de la tabla. El texto en él aparece en negrita y centrado por defecto.

TIP

El tag <th> no es un elemento obligatorio en la tabla, pero recomendamos usarlo, ya que ayuda a tener un mejor diseño de la tabla y también ayuda a los motores de búsqueda a indexar mejor el contenido de la tabla.

Una tabla más compleja también puede incluir elementos <caption>, <thead>, <tbody>, <tfoot> o <colgroup>.

DANGER

Se recomienda no usar tablas para el diseño de la página. A veces las tablas se usan incorrectamente en HTML para controlar el diseño de una página. Para eso, puedes usar CSS como alternativa a las tablas HTML.

Sintaxis

El tag <table> viene en pares. El contenido se escribe entre las etiquetas de apertura (<table>) y cierre (</table>).

Ejemplo del tag HTML `<table>`:

Tag HTML <table>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>June</td>
        <td>10.06.2018</td>
      </tr>
      <tr>
        <td>July</td>
        <td>15.07.2018</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Resultado

table example

Atributos

DANGER

Los atributos del tag <table> no son compatibles con HTML5. Para dar estilo a las tablas, usa las propiedades de CSS que se enumeran a continuación.

Attribute	Value	Description	CSS property
align	left center right	Define cómo debe alinearse la tabla con respecto al texto circundante. No compatible con HTML5.	margin
bgcolor	rgb(x,x,x) #xxxxxx colorname	Define el color de fondo de una tabla. No compatible con HTML5.	background-color
border	1 0	Define el tamaño del marco que rodea la tabla. No compatible con HTML5.	border
cellpadding	pixels	Define el espacio entre la pared de la celda y el contenido de la celda. No compatible con HTML5.	padding
cellspacing	pixels	Define el espacio entre celdas. No compatible con HTML5.	border-spacing
frame	void above below hsides lhs rhs vsides box border	Define qué lado del marco que rodea la tabla debe mostrarse. No compatible con HTML5.	border-style border-width
rules	none groups rows cols all	Define qué partes de los bordes internos deben ser visibles. No compatible con HTML5.	border (Usa esta propiedad de forma correspondiente con las etiquetas HTML thead, tbody, tfoot, col o colgroup).
width	pixels	Define el ancho de una tabla. No compatible con HTML5.	width

El <table> también admite los atributos globales y los atributos de eventos.

Practice

What are the uses of the <table>, <tr>, <td>, and <th> tags in HTML?

The <table> tag is used to create a table.The <tr> tag is used to create a row in the table.The <td> tag is used to create a cell in the table.The <th> tag is used to create a header cell in the table.The <th> tag is used to create a footnote in the table.The <td> tag is used to insert images in the table.

Etiqueta HTML <table> ​

Sintaxis ​

Ejemplo del tag HTML <table>: ​

Resultado ​