Baseline Widely available *
ResumenEl 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.
En este orden:
<caption>
,<colgroup>
,<thead>
,Al igual que otros elementos HTML, este elemento también soporta atributos globales.
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:
Nota:
<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.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 voidNota: 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:
<thead>
, <tbody>
y <tfoot>
elements) y entre grupos de columnas (defined by the <col>
y <colgroup>
elements) solamente;Nota:
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:
<caption>
de la tabla.<details>
, dentro del elemento <caption>
de la tabla.<table>
en un elemento <figure>
y añada la descripción en prosa al lado de él.<table>
en un elemento <figure>
y añada la descripción en prosa dentro de un elemento <figcaption>
.<th>
y <thead>
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.
Este elemento implementa la interfaz HTMLTableElement
.
<!-- 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 Compatibilidad con navegadores
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4