diff options
Diffstat (limited to 'files/es/web/html/element/table/index.html')
| -rw-r--r-- | files/es/web/html/element/table/index.html | 525 |
1 files changed, 525 insertions, 0 deletions
diff --git a/files/es/web/html/element/table/index.html b/files/es/web/html/element/table/index.html new file mode 100644 index 0000000000..1dffe0d7c2 --- /dev/null +++ b/files/es/web/html/element/table/index.html @@ -0,0 +1,525 @@ +--- +title: tabla +slug: Web/HTML/Elemento/table +translation_of: Web/HTML/Element/table +--- +<h2 id="Resumen">Resumen</h2> +<p>El <em>Elemento de Tabla HTML</em> (<code><table></code>) representa datos en dos o mas dimensiones.</p> +<div class="note"> + <strong>Nota: </strong>Antes de la creación de <a href="/es/docs/CSS" title="CSS">CSS</a>, los elementos HTML {{HTMLElement("table")}} eran frecuentemente utilizados para la disposición (posicionamiento) de una página. Este uso ha sido desalentado desde HTML 4, y el elemento <span style="font-weight: bold;">no debe</span> ser usado para dichos fines.</div> +<h2 id="Contexto_de_uso">Contexto de uso</h2> +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/es/docs/HTML/Content_categories" title="HTML/Content categories">Categoria del contenido</a></td> + <td><a href="/es/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flujo del contenido</a></td> + </tr> + <tr> + <td>Contenido permitido</td> + <td> + <div class="content-models"> + <div id="table-mdls"> + En este orden: + <ul> + <li>un elemento opcional {{HTMLElement("caption")}},</li> + <li>cero o mas elementos {{HTMLElement("colgroup")}},</li> + <li>un elemento opcional {{HTMLElement("thead")}},</li> + <li>una de las dos alternativas: + <ul> + <li>un elemento {{HTMLElement("tfoot")}}, seguido por: + <ul> + <li>cero o mas elementos {{HTMLElement("tbody")}},</li> + <li>o uno o mas elementos {{HTMLElement("tr")}},</li> + </ul> + </li> + <li>una segunda alternativa seguida por un elemento opcional {{HTMLElement("tfoot")}}: + <ul> + <li>cualquier cero o mas elementos {{HTMLElement("tbody")}},</li> + <li>uno o mas elementos {{HTMLElement("tr")}}</li> + </ul> + </li> + </ul> + </li> + </ul> + </div> + </div> + </td> + </tr> + <tr> + <td>Omisión de etiqueta</td> + <td>Ninguna, ambas la <span title="syntax-start-tag">etiqueta de inicio</span> y <span title="syntax-end-tag">de fin</span> son obligatorias</td> + </tr> + <tr> + <td>Elementos padre permitidos</td> + <td>cualquier elemento que acepte elementos de flujo</td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element">HTML5, section 4.9.1</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE" title="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE">HTML4.01, section 11.2.1</a>)</td> + </tr> + </tbody> +</table> +<h3 id="Atributos">Atributos</h3> +<p>Al igual que otros elementos HTML, este elemento también soporta <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">atributos globales</a>.</p> +<dl> + <dt> + {{htmlattrdef("align")}} {{Deprecated_inline}}</dt> + <dd> + Este atributo enumerativo indica como va a encontrarse alineada la tabla respecto al contenido del documento en cuestión, pudiendo tener los siguientes valores: + <ul> + <li><span>left</span>,significa que la tabla será mostrada a la izquierda del documento;</li> + <li><span>center</span>, significa que la tabla será mostrada al centro del documento;</li> + <li><span>right</span>, significa que la tabla será mostrada a la derecha del documento.</li> + </ul> + <div class="note"> + <strong>Nota: </strong> + <ul> + <li><strong>No usar este atributo</strong>, ya que ha sido declarado obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. A fin de dar un efecto similar al atributo <span>align</span>, las propiedades {{cssxref("text-align")}} y {{cssxref("vertical-align")}} deben ser usadas.</li> + <li>Antes de la version 4 de Firefox, este ya soportaba sólo en el modo quirks (compatibilidad con navegadores antiguos) los valores <code>middle</code>, <code>absmiddle</code>, and <code>abscenter</code> como sinónimos de <code>center</code><em>. </em></li> + </ul> + </div> + </dd> +</dl> +<dl> + <dt> + {{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd> + Este atributo define el color de fondo de la tabla . Es un código hexadecimal como el dado en el formato <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a> (bajo el prefijo '#'). Uno de los 16 colores predefinidos podía ser usado: + <table> + <tbody> + <tr> + <td style="width: 24px; background-color: black;"> </td> + <td><span>black (negro)</span> = "#000000"</td> + <td style="width: 24px; background-color: green;"> </td> + <td><span>green (verde)</span> = "#008000"</td> + </tr> + <tr> + <td style="width: 24px; background-color: silver;"> </td> + <td><span>silver (plata)</span> = "#C0C0C0"</td> + <td style="width: 24px; background-color: lime;"> </td> + <td><span>lime (lima)</span> = "#00FF00"</td> + </tr> + <tr> + <td style="width: 24px; background-color: gray;"> </td> + <td><span>gray (gris)</span> = "#808080"</td> + <td style="width: 24px; background-color: olive;"> </td> + <td><span>olive (oliva)</span> = "#808000"</td> + </tr> + <tr> + <td style="width: 24px; background-color: white;"> </td> + <td><span>white (blanco)</span> = "#FFFFFF"</td> + <td style="width: 24px; background-color: yellow;"> </td> + <td><span>yellow (amarillo)</span> = "#FFFF00"</td> + </tr> + <tr> + <td style="width: 24px; background-color: maroon;"> </td> + <td><span>maroon (marrón)</span> = "#800000"</td> + <td style="width: 24px; background-color: navy;"> </td> + <td><span>navy (azul marino)</span> = "#000080"</td> + </tr> + <tr> + <td style="width: 24px; background-color: red;"> </td> + <td><span>red (rojo)</span> = "#FF0000"</td> + <td style="width: 24px; background-color: blue;"> </td> + <td><span>blue (azul)</span> = "#0000FF"</td> + </tr> + <tr> + <td style="width: 24px; background-color: purple;"> </td> + <td><span>purple (púrpura)</span> = "#800080"</td> + <td style="width: 24px; background-color: teal;"> </td> + <td><span>teal (verde esmeralda)</span> = "#008080"</td> + </tr> + <tr> + <td style="width: 24px; background-color: fuchsia;"> </td> + <td><span>fuchsia (fucsia)</span> = "#FF00FF"</td> + <td style="width: 24px; background-color: aqua;"> </td> + <td><span>aqua (verde agua)</span> = "#00FFFF"</td> + </tr> + </tbody> + </table> + <div class="note"> + <strong>Nota de uso: </strong>No usar este atributo, dado que ha sido declarado obsoleto. El elemento {{HTMLElement("table")}} debe ser estilizado utilizando <a href="/es/docs/CSS" title="CSS">CSS</a>. A fin de dar un efecto similar al atributo <span>bgcolor</span>, la propiedad <a href="/es/docs/CSS" title="CSS">CSS</a> {{cssxref("background-color")}} debe ser usada.</div> + </dd> +</dl> +<dl> + <dt> + {{htmlattrdef("border")}} {{Deprecated_inline}}</dt> + <dd> + Este atributo entero define el tamaño del cuadro alrededor de la tabla . Si estuviese puesta en <span>0</span>, implicaría que dicho atributo sería <span>nulo</span>. + <div class="note"> + <strong>Nota de uso: </strong>No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. A fin de dar un efecto similar al atributo, las propiedades CSS nativas {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} y {{cssxref("border-style")}} deben ser usadas.</div> + </dd> +</dl> +<dl> + <dt> + {{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt> + <dd> + 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 + <div class="note"> + <strong>Nota de uso: </strong>No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. Para dar un efecto similar al atributo <span>border</span>, use la propiedad CSS {{cssxref("border-collapse")}} con el valor collapse en el mismo elemento {{HTMLElement("table")}}, y la propiedad {{cssxref("padding")}} en el elemento {{HTMLElement("td")}}.</div> + </dd> +</dl> +<dl> + <dt> + {{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt> + <dd> + 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. + <div class="note"> + <strong>Nota de uso: </strong>No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. Para dar un efecto similar al atributo <span>border</span>, use la propiedad {{cssxref("border-collapse")}} con el valor collapse en el mismo elemento {{HTMLElement("table")}}, y la propiedad {{cssxref("margin")}} en el elemento {{HTMLElement("td")}}.</div> + </dd> +</dl> +<dl> + <dt> + {{htmlattrdef("frame")}} {{Deprecated_inline}}</dt> + <dd> + Este atributo enumerativo define cual lado del cuadro alrededor de la tabla será mostrada. Puede tener los siguientes valores: + <table style="width: 668px;"> + <tbody> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>above</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>below</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>hsides</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>vsides</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>lhs</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>rhs</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>border</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>box</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>void</span></td> + </tr> + </tbody> + </table> + <div class="note"> + <strong>Nota de uso: </strong>No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. Para dar un efecto similar al atributo <span>frame</span> use las propiedades CSS {{cssxref("border-style")}} y {{cssxref("border-width")}}.</div> + </dd> +</dl> +<dl> + <dt> + {{htmlattrdef("rules")}} {{Deprecated_inline}}</dt> + <dd> + Este atributo enumerativo define donde aparecen las reglas en la tabla, por ejemplo líneas. Puede tener los siguientes valores: + <ul> + <li><span>none</span>, indica que ninguna regla se mostrará, es el valor por defecto;</li> + <li><span>groups</span>, mostrará el número de reglas a mostrarse entre grupos de filas (defined by the {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} y {{HTMLElement("tfoot")}} elements) y entre grupos de columnas (defined by the {{HTMLElement("col")}} y {{HTMLElement("colgroup")}} elements) solamente;</li> + <li><span>rows</span>, que mostrará las reglas entre filas;</li> + <li><span>columns</span>, que mostrará las reglas entre columnas;</li> + <li><span>all</span>, que mostrará las reglas entre filas y columnas.</li> + </ul> + <div class="note"> + <strong>Nota</strong>: + <ul> + <li>El estilo de las reglas depende del navegador usado y no puede ser modificado.</li> + <li>Nota de uso: No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. Use la propiedad {{cssxref("border")}} en los elementos adecuados {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} o {{HTMLElement("colgroup")}}.</li> + </ul> + </div> + </dd> +</dl> +<dl> + <dt> + {{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> + <dd> + 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 {{HTMLElement("caption")}} en vez de este. instead. El atributo de resumen no es obligatorio usuarlo, pudiendo ser omitido si un elemento {{HTMLElement("caption")}} realiza similar labor.<br> + <div class="note"> + <strong>Nota de uso: </strong>No use este atributo, dado que ha sido declarado obsoleto. En su lugar, use alguna de estas formas de describir una tabla: + <ul> + <li>En prosa, rodeando la tabla (esta es la forma menos semántica de lograrlo).</li> + <li>En el elemento {{HTMLElement("caption")}} de la tabla.</li> + <li>En un elemento {{HTMLElement("details")}}, dentro del elemento {{HTMLElement("caption")}} de la tabla.</li> + <li>Incluye el elemento {{HTMLElement("table")}} en un elemento {{HTMLElement("figure")}} y añada la descripción en prosa al lado de él.</li> + <li>Incluya el elemento {{HTMLElement("table")}} en un elemento {{HTMLElement("figure")}} y añada la descripción en prosa dentro de un elemento {{HTMLElement("figcaption")}}.</li> + <li>Ajuste la tabla de manera que la descripción no sea necesaria, usando los elementos {{HTMLElement("th")}} y {{HTMLElement("thead")}} por ejemplo.</li> + </ul> + </div> + </dd> +</dl> +<dl> + <dt> + {{htmlattrdef("width")}} {{Deprecated_inline}}</dt> + <dd> + 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. + <div class="note"> + No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. Para dar un efecto similar al atributo <span>frame</span> use la propiedad CSS {{cssxref("width")}} en su lugar.</div> + </dd> +</dl> +<h3 id="Interfaz_DOM">Interfaz DOM</h3> +<p>Este elemento implementa la interfaz <code><a href="/es/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement">HTMLTableElement</a></code>.</p> +<h3 id="Ejemplos">Ejemplos</h3> +<pre class="brush: 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> +</pre> +<h4 id="Resultado">Resultado</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <tbody> + <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> + </tbody> +</table> + +<table class="standard-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 class="standard-table"> + <colgroup> + </colgroup> + <tbody> + <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> + </tbody> +</table> + +<table class="standard-table"> + <colgroup> + <col class="column1"> + <col class="columns2plus3"> + </colgroup> + <tbody> + <tr> + <th>Lime</th> + <th>Lemon</th> + <th>Orange</th> + </tr> + <tr> + <td>Green</td> + <td>Yellow</td> + <td>Orange</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + Awesome caption</caption> + <tbody> + <tr> + <td>Awesome data</td> + </tr> + </tbody> +</table> +<h3 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Consulte_también">Consulte también</h3> +<ul> + <li>Otros elementos HTML relacionados a tablas: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>Propiedades CSS que pueden ser especialmente útiles para estilizar el elemento <span style="font-family: Courier New;"><table></span>: + <ul> + <li>{{cssxref("width")}} para controlar el ancho de la tabla;</li> + <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} para controlar el aspecto de los bordes de las celdas, reglas y marco;</li> + <li>{{cssxref("margin")}} y {{cssxref("padding")}} para estilizar el contenido individual de las celdas;</li> + <li>{{cssxref("text-align")}} y {{cssxref("vertical-align")}} para definir la alineación del contenido y del texto de las celdas.</li> + </ul> + </li> +</ul> |