Resumen

ElElemento de Tabla HTML (<table>) representa datos en dos o mas dimensiones.

Contexto de uso

Atributos

Al igual que otros elementos HTML, este elemento también soportaatributos globales.

alignObsoleto

Este atributo enumerativo indica como va a encontrarse alineada la tabla respecto al contenido del documento en cuestión, pudiendo tener los siguientes valores:

• left,significa que la tabla será mostrada a la izquierda del documento;
• center, significa que la tabla será mostrada al centro del documento;
• right, significa que la tabla será mostrada a la derecha del documento.

Nota:

• No usar este atributo, ya que ha sido declarado obsoleto: el elemento<table> debe ser estilizado usandoCSS. A fin de dar un efecto similar al atributo align, las propiedadestext-align yvertical-align deben ser usadas.
• Antes de la version 4 de Firefox, este ya soportaba sólo en el modo quirks (compatibilidad con navegadores antiguos) los valoresmiddle,absmiddle, andabscenter como sinónimos decenter.

bgcolorObsoleto

Este atributo define el color de fondo de la tabla . Es un código hexadecimal como el dado en el formatosRGB (bajo el prefijo '#'). Uno de los 16 colores predefinidos podía ser usado:

	black (negro) = "#000000"		green (verde) = "#008000"
	silver (plata) = "#C0C0C0"		lime (lima) = "#00FF00"
	gray (gris) = "#808080"		olive (oliva) = "#808000"
	white (blanco) = "#FFFFFF"		yellow (amarillo) = "#FFFF00"
	maroon (marrón) = "#800000"		navy (azul marino) = "#000080"
	red (rojo) = "#FF0000"		blue (azul) = "#0000FF"
	purple (púrpura) = "#800080"		teal (verde esmeralda) = "#008080"
	fuchsia (fucsia) = "#FF00FF"		aqua (verde agua) = "#00FFFF"

Nota:No usar este atributo, dado que ha sido declarado obsoleto. El elemento<table> debe ser estilizado utilizandoCSS. A fin de dar un efecto similar al atributo bgcolor, la propiedadCSSbackground-color debe ser usada.

borderObsoleto

Este atributo entero define el tamaño del cuadro alrededor de la tabla . Si estuviese puesta en 0, implicaría que dicho atributo sería nulo.

Nota:No usar este atributo en CSS dado que es obsoleto: el elemento<table> debe ser estilizado usandoCSS. A fin de dar un efecto similar al atributo, las propiedades CSS nativasborder,border-color,border-width yborder-style deben ser usadas.

cellpaddingObsoleto

Este atributo define el espacio entre el contenido de una celda y su borde (mostrado o no), si fuese la longitud de un pixel, dicho espacio será aplicado en los 4 costados, caso que fuese un porcentaje, el contenido será centrado y todo el espacio vertical representará a este porcentaje. Lo mismo será válido para todo el espacio horizontal

Nota:No usar este atributo en CSS dado que es obsoleto: el elemento<table> debe ser estilizado usandoCSS. Para dar un efecto similar al atributo border, use la propiedad CSSborder-collapse con el valor collapse en el mismo elemento<table>, y la propiedadpadding en el elemento<td>.

cellspacingObsoleto

Este atributo define el espacio entre el contenido de una celda y su borde (mostrado o no), si fuese la longitud de un pixel, dicho espacio será aplicado en los 4 costados, caso que fuese un porcentaje, el contenido será centrado y todo el espacio vertical representará a este porcentaje. Lo mismo será válido para todo el espacio horizontal.

Nota:No usar este atributo en CSS dado que es obsoleto: el elemento<table> debe ser estilizado usandoCSS. Para dar un efecto similar al atributo border, use la propiedadborder-collapse con el valor collapse en el mismo elemento<table>, y la propiedadmargin en el elemento<td>.

frameObsoleto

Este atributo enumerativo define cual lado del cuadro alrededor de la tabla será mostrada. Puede tener los siguientes valores:

	above		below
	hsides		vsides
	lhs		rhs
	border		box
	void

Nota:No usar este atributo en CSS dado que es obsoleto: el elemento<table> debe ser estilizado usandoCSS. Para dar un efecto similar al atributo frame use las propiedades CSSborder-style yborder-width.

rulesObsoleto

Este atributo enumerativo define donde aparecen las reglas en la tabla, por ejemplo líneas. Puede tener los siguientes valores:

• none, indica que ninguna regla se mostrará, es el valor por defecto;
• groups, mostrará el número de reglas a mostrarse entre grupos de filas (defined by the<thead>,<tbody> y<tfoot> elements) y entre grupos de columnas (defined by the<col> y<colgroup> elements) solamente;
• rows, que mostrará las reglas entre filas;
• columns, que mostrará las reglas entre columnas;
• all, que mostrará las reglas entre filas y columnas.

Nota:

• El estilo de las reglas depende del navegador usado y no puede ser modificado.
• Nota de uso: No usar este atributo en CSS dado que es obsoleto: el elemento<table> debe ser estilizado usandoCSS. Use la propiedadborder en los elementos adecuados<thead>,<tbody>,<tfoot>,<col> o<colgroup>.

summaryObsoleto

Este atributo define un texto alternativo para describir una tabla en un usuario incapaz de mostrarlo, corrientemente contiene una descripcion de él que posibilita a discapacitaos visulaes (como invidentes navegando en pantallas braile) a obtener la información que necesitan.Si la información añadida en este atributo puede ser útil a otras personas, considere el utilizar el elemento<caption> en vez de este. instead. El atributo de resumen no es obligatorio usuarlo, pudiendo ser omitido si un elemento<caption> realiza similar labor.

Nota:No use este atributo, dado que ha sido declarado obsoleto. En su lugar, use alguna de estas formas de describir una tabla:

• En prosa, rodeando la tabla (esta es la forma menos semántica de lograrlo).
• En el elemento<caption> de la tabla.
• En un elemento<details>, dentro del elemento<caption> de la tabla.
• Incluye el elemento<table> en un elemento<figure> y añada la descripción en prosa al lado de él.
• Incluya el elemento<table> en un elemento<figure> y añada la descripción en prosa dentro de un elemento<figcaption>.
• Ajuste la tabla de manera que la descripción no sea necesaria, usando los elementos<th> y<thead> por ejemplo.

widthObsoleto

Este atributo define el ancho de una tabla, pudiendo contener una longitud de píxeles o un porcentaje, que representa un porcentaje de anchura del contenedor que la tabla debiera usar.

Nota:No usar este atributo en CSS dado que es obsoleto: el elemento<table> debe ser estilizado usandoCSS. Para dar un efecto similar al atributo frame use la propiedad CSSwidth en su lugar.

Interfaz DOM

Este elemento implementa la interfazHTMLTableElement.

Ejemplos

<!-- Simple table --><table>  <tr>    <td>John</td>    <td>Doe</td>  </tr>  <tr>    <td>Jane</td>    <td>Doe</td>  </tr></table><!-- Simple table with header --><table>  <tr>    <th>First name</th>    <th>Last name</th>  </tr>  <tr>    <td>John</td>    <td>Doe</td>  </tr>  <tr>    <td>Jane</td>    <td>Doe</td>  </tr></table><!-- Table with thead, tfoot, and tbody --><table>  <thead>    <tr>      <th>Header content 1</th>      <th>Header content 2</th>    </tr>  </thead>  <tfoot>    <tr>      <td>Footer content 1</td>      <td>Footer content 2</td>    </tr>  </tfoot>  <tbody>    <tr>      <td>Body content 1</td>      <td>Body content 2</td>    </tr>  </tbody></table><!-- Table with colgroup --><table>  <colgroup span="4"></colgroup>  <tr>    <th>Countries</th>    <th>Capitals</th>    <th>Population</th>    <th>Language</th>  </tr>  <tr>    <td>USA</td>    <td>Washington D.C.</td>    <td>309 million</td>    <td>English</td>  </tr>  <tr>    <td>Sweden</td>    <td>Stockholm</td>    <td>9 million</td>    <td>Swedish</td>  </tr></table><!-- Table with colgroup and col --><table>  <colgroup>    <col />    <col span="2" />  </colgroup>  <tr>    <th>Lime</th>    <th>Lemon</th>    <th>Orange</th>  </tr>  <tr>    <td>Green</td>    <td>Yellow</td>    <td>Orange</td>  </tr></table><!-- Simple table with caption --><table>  <caption>    Awesome caption  </caption>  <tr>    <td>Awesome data</td>  </tr></table>

* {  border-collapse: collapse;}table {  width: 100%;  margin-top: 1rem;}td,th {  border: 1px solid black;}

Especificaciones

Compatibilidad con navegadores