tabla
=====

Resumen
-------

El *Elemento de Tabla HTML* (`<table>`) representa datos en dos o mas dimensiones.

**Nota:** Antes de la creación de CSS, los elementos HTML `<table>` eran frecuentemente utilizados para la disposición (posicionamiento) de una página. Este uso ha sido desalentado desde HTML 4, y el elemento no debe ser usado para dichos fines.

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categoria del contenido (en-US) | Flujo del contenido (en-US) |
| Contenido permitido | 
En este orden:
 * un elemento opcional `<caption>`,
* cero o mas elementos `<colgroup>`,
* un elemento opcional `<thead>` (en-US),
* una de las dos alternativas:
    + un elemento `<tfoot>` (en-US), seguido por:
        - cero o mas elementos `<tbody>` (en-US),
        - o uno o mas elementos `<tr>`,
    + una segunda alternativa seguida por un elemento opcional `<tfoot>` (en-US):
        - cualquier cero o mas elementos `<tbody>` (en-US),
        - uno o mas elementos `<tr>`

 |
| Omisión de etiqueta | Ninguna, ambas la etiqueta de inicio y de fin son obligatorias |
| Elementos padre permitidos | cualquier elemento que acepte elementos de flujo |
| Documento normativo | HTML5, section 4.9.1 (HTML4.01, section 11.2.1) |

### Atributos

Al igual que otros elementos HTML, este elemento también soporta atributos globales (en-US).

`align` 
Obsoleto

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 usando CSS. A fin de dar un efecto similar al atributo align, las propiedades `text-align` y `vertical-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 valores `middle`, `absmiddle`, and `abscenter` como sinónimos de `center`*.*



`bgcolor` 
Obsoleto

Este atributo define el color de fondo de la tabla . Es un código hexadecimal como el dado en el formato sRGB (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 utilizando CSS. A fin de dar un efecto similar al atributo bgcolor, la propiedad CSS `background-color` debe ser usada.



`border` 
Obsoleto

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 usando CSS. A fin de dar un efecto similar al atributo, las propiedades CSS nativas `border`, `border-color`, `border-width` y `border-style` deben ser usadas.



`cellpadding` 
Obsoleto

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 usando CSS. Para dar un efecto similar al atributo border, use la propiedad CSS `border-collapse` con el valor collapse en el mismo elemento `<table>`, y la propiedad `padding` en el elemento `<td>`.



`cellspacing` 
Obsoleto

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 usando CSS. Para dar un efecto similar al atributo border, use la propiedad `border-collapse` con el valor collapse en el mismo elemento `<table>`, y la propiedad `margin` en el elemento `<td>`.



`frame` 
Obsoleto

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 usando CSS. Para dar un efecto similar al atributo frame use las propiedades CSS `border-style` y `border-width`.



`rules` 
Obsoleto

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>` (en-US), `<tbody>` (en-US) y `<tfoot>` (en-US) 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 usando CSS. Use la propiedad `border` en los elementos adecuados `<thead>` (en-US), `<tbody>` (en-US), `<tfoot>` (en-US), `<col>` o `<colgroup>`.



`summary` 
Obsoleto

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>` (en-US) por ejemplo.



`width` 
Obsoleto

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 usando CSS. Para dar un efecto similar al atributo frame use la propiedad CSS `width` en su lugar.

### Interfaz DOM

Este elemento implementa la interfaz `HTMLTableElement`.

### Ejemplos


```html
<!-- 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" class="columns"></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 class="column1" />
    <col class="columns2plus3" 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
----------------

| Specification |
| --- |
| HTML Standard # the-table-element |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.