tabla

  • Enlace amigable (slug) de la revisión: HTML/Element/table
  • Título de la revisión: tabla
  • Id de la revisión: 330205
  • Creada:
  • Creador: cortega
  • ¿Es la revisión actual? No
  • Comentario

Contenido de la revisión

Resumen

El elemento Tabla de HTML (<table>) representa data en dos o mas dimensiones.

Nota: Antes de la creación de código CSS, los elementos HTML tabla <table> eran frecuentemente utilizados para la disposición (posicionamiento) de una página. Este uso ha sido desalentado desde HTML 4, y él no debiera ser usado para dichos fines

Contexto de uso

Categoria del contenido Arbol de contenido
Contenido Permitido
En este orden:
  • un opcional {{ HTMLElement("caption") }} elemento,
  • cero o mas {{ HTMLElement("colgroup") }} elementos,
  • un opcional {{ HTMLElement("thead") }} elemento,
  • una de las dos alternativas:
    • primer {{ HTMLElement("tfoot") }} elemento, seguido por:
      • cero o mas {{ HTMLElement("tbody") }} elementos,
      • o uno o mas {{ HTMLElement("tr") }} elementos,
    • una segunda alternativa seguida por un opcional {{ HTMLElement("tfoot") }} elemento:
      • cualquier cero o mas {{ HTMLElement("tbody") }} elementos,
      • o uno o mas {{ HTMLElement("tr") }} elementos
Omisión de etiquetar None, both the start tag and the end tag are mandatory
Elementos Permitidos culaquier elemento que acepte elementos de flujo
Documento normativo HTML5, section 4.9.1 (HTML4.01, section 11.2.1)

Atributos

<style type="text/css"> </style>

Al igual que otros elementos HTML, también soporta atributos globales.

{{ htmlattrdef("align") }} {{ Deprecated_inline() }}

<style type="text/css"> </style>

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

  • izquierdo, significa que la tabla será mostrada a la izquierda del texto

  • centrado, significa que la tabla será mostrada centrada en el texto;

  • derecho, significa que la tabla será mostrada a la derecha del texto.

Nota:

  • No usar este atributo en CSS; sino modelar el elemento <table>, a fin de dar un efecto similar al align, las propiedades CSS nativas: text-align y vertical-align debieran ser utilizadas.

  • Antes de la version 4 de Firefox, este ya era soportada sólo en el modo quirks (compatibilidad con navegadores antiguos), con los valores middle, absmiddle, y abscenter como sinónimos de center.

 

{{ htmlattrdef("bgcolor") }} {{ Deprecated_inline() }}
 
<style type="text/css"> </style> 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 será usado:
 
 
  negro = "#000000"   verde = "#008000"
  plata = "#C0C0C0"   lima = "#00FF00"
  gris = "#808080"   oliva = "#808000"
  blanco = "#FFFFFF"   amarillo = "#FFFF00"
  marron = "#800000"   azul marino = "#000080"
  rojo = "#FF0000"   azul = "#0000FF"
  purpura = "#800080"   verde esmeralda = "#008080"
  fucsia = "#FF00FF"   verde agua = "#00FFFF"
<style type="text/css"> </style> Nota de uso: No usar este atributo en CSS; sino modelar el elemento <table>. A fin de dar un efecto similar al atributo bgcolor, la propiedad CSS nativa background-color debiera ser utilizada.
{{ htmlattrdef("border") }} {{ Deprecated_inline() }}
 
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 de uso:
No usar este atributo en CSS; sino modelar el elemento <table>.A fin de dar un efecto similar al atributo border, las propiedades CSS nativas: border-width y border-style debieran ser utilizadas.

{{ htmlattrdef("cellpadding") }} {{ Deprecated_inline() }}

<style type="text/css"> </style> 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
 

<style type="text/css"> </style> Nota de uso: No usar este atributo en CSS; sino modelar el elemento <table>. A fin de dar un efecto similar al atributo de borde, la propiedad CSS nativa border-collapse debiera ser utilizada, así como la propiedad padding de <td>


 {{ htmlattrdef("cellspacing") }} {{ Deprecated_inline() }}

Este atributo define un tamaño en porcentaje o píxeles del espacio entre 2 celdas (ambos horizontales o verticales) entre el inicio de la tabla y las celdas de la primera fila, la izquierda de la tabla y la primera columna, la derecha de la tabla y la última columna y el fin de la tabla y su última fila

Nota de uso: No usar este atributo en CSS; sino modelar el elemento <table>. A fin de dar un efecto similar al atributo de borde, utilizar la propiedad CSS nativa border-collapse con el valor collapse debiera ser utilizada en el elemento <table> , así como la propiedad margin de <td>

{{ htmlattrdef("frame") }} {{ Deprecated_inline() }}

 
Este atributo enumerativo define cual lado del cuadro alrededor de la tabla será mostrada, tiene los siguientes valores:
 
  above   below
  hsides   vsides
  lhs   rhs
  border   box
  void
Nota de uso: No usar este atributo en CSS; sino modelar el elemento <table>. A fin de dar un efecto similar al atributo de cuadro, utilizar las propiedades CSS nativas: border-style y border-width
{{ htmlattrdef("rules") }} {{ Deprecated_inline() }}
Este atributo enumerativo define donde aparecen las reglas en la tabla Ejm: líneas, pudiendo 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 (definido por los elementos <thead>, <tbody> y <tfoot> ) y entre grupos de columnas (definidos por los elementos <col> y <colgroup> )
  • rows, que mostrará las reglas entre filas
  • columns, que mostrará las reglas entre columnas
  • all, que mostrará las reglas entre filas y columnas.
Notas de uso:
  • El estilo de las reglas depende del navegador usado y no puede ser modificado.
  • No usar este atributo en CSS; sino modelar el elemento <table>. A fin de dar un efecto similar al atributo de cuadro, utilize la propiedad border en el adecuado elemento <thead>, <tbody>, <tfoot>, <col> o <colgroup>
{{ htmlattrdef("summary") }} {{ Deprecated_inline() }}
 
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.
 
El atributo de resumen no es obligatorio usuarlo, pudiendo ser omitido si un elemento <caption> realiza similar labor.
 

Notas de uso: No usar este atributo al estar en desuso, considérese una de estas maneras de describir una tabla respetando la sintaxis CSS:
:
  • Rodeando la tabla (esta es la forma menos semántica de lograrlo).
  • En el elemento <caption> .
  • En el componente <details> , dentro del elemento <caption> .
  • Incluir al elemento <table> dentro de <figure> , añadiendo su descripcion al lado o dentro de un elemento <figcaption>.
  • Ajustar la tablaa fin que su descripción no sea necesaría, utilizando los elementos <th> y <thead>.
{{ htmlattrdef("width") }} {{ Deprecated_inline() }}
 
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 de uso: No usar este atributo al estar en desuso, las reglas debieran respetar la sintaxis CSS, usando su propia propiedad width

Intefase DOM

Este elemento implementa la interfase HTMLTableElement interface.

Ejemples

<!-- 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>

Result

John Doe
Jane Doe
First name Last name
John Doe
Jane Doe
Header content 1 Header content 2
Footer content 1 Footer content 2
Body content 1 Body content 2
Countries Capitals Population Language
USA Washington D.C. 309 million English
Sweden Stockholm 9 million Swedish
Lime Lemon Orange
Green Yellow Orange
Awesome caption
Awesome data

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1") }} 4.0 7.0 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile("1") }} 6.0 6.0 1.0

See also

  •   <style type="text/css"> </style> Este atributo enumerativo indica como va a encontrarse alineada la tabla respecto al contenido del documento en cuestión, pudiendo tener los siguientes valores:
    • izquierdo, significa que la tabla será mostrada a la izquierda del texto

    • centrado, significa que la tabla será mostrada centrada en el texto;

    • derecho, significa que la tabla será mostrada a la derecha del texto.

    Notas:

    • No usar este atributo en CSS; sino modelar el elemento <table>, a fin de dar un efecto similar al align, las propiedades CSS nativas: text-align y vertical-align debieran ser utilizadas.

    • Antes de la version 4 de Firefox, este ya era soportada sólo en el modo quirks (compatibilidad con navegadores antiguos), con los valores middle, absmiddle, y abscenter como sinónimos de center.

  • {{ htmlattrdef("bgcolor") }} {{ Deprecated_inline() }}
  • This attribute defines the background color of the table and its content. It is one of the 6-digit hexadecimal code as defined in sRGB, prefixed by a '#'. One of the sixteen predefined color strings may be used:
      black = "#000000"   green = "#008000"
      silver = "#C0C0C0"   lime = "#00FF00"
      gray = "#808080"   olive = "#808000"
      white = "#FFFFFF"   yellow = "#FFFF00"
      maroon = "#800000"   navy = "#000080"
      red = "#FF0000"   blue = "#0000FF"
      purple = "#800080"   teal = "#008080"
      fuchsia = "#FF00FF"   aqua = "#00FFFF"
    Usage note: Do not use this attribute, as it has been deprecated: the {{ HTMLElement("table") }} element should be styled using CSS. To give a similar effect than the bgcolor attribute, the CSS property {{ cssxref("background-color") }} should be used.
    • Other table-related HTML Elements: {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }};
    • CSS properties that may be specially useful to style the <table> element:
      • {{ cssxref("width") }} to control the width of the table;
      • {{ cssxref("border") }}, {{ cssxref("border-style") }}, {{ cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-collapse") }}, {{ cssxref("border-spacing") }} to control the aspect of cell borders, rules and frame;
      • {{ cssxref("margin") }} and {{ cssxref("padding") }} to style the individual cell content;
      • {{ cssxref("text-align") }} and {{ cssxref("vertical-align") }} to define alignment of text and cell content.

Fuente de la revisión

<h2 id="Resumen">Resumen</h2>
<p><span style="font-style: italic;">El elemento Tabla de HTML</span><em> </em>(<code>&lt;table&gt;</code>) representa data en dos o mas dimensiones.</p>
<div class="note">
  <strong>Nota:</strong><strong><span style="font-weight: normal"> Antes de la creación de código</span></strong> CSS, los elementos HTML tabla <font face="Courier New, monospace">&lt;table&gt;</font> eran frecuentemente utilizados para la disposición (posicionamiento) de una página. Este uso ha sido desalentado desde HTML 4, y él no debiera ser usado para dichos fines</div>
<h2 id="Contexto_de_uso">Contexto de uso</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Categoria del contenido</a></td>
      <td>Arbol de contenido</td>
    </tr>
    <tr>
      <td>Contenido Permitido</td>
      <td>
        <div class="content-models">
          <div id="table-mdls">
            En este orden:
            <ul>
              <li>un opcional {{ HTMLElement("caption") }} elemento,</li>
              <li>cero o mas {{ HTMLElement("colgroup") }} elementos,</li>
              <li>un opcional {{ HTMLElement("thead") }} elemento,</li>
              <li>una de las dos alternativas:
                <ul>
                  <li>primer {{ HTMLElement("tfoot") }} elemento, seguido por:
                    <ul>
                      <li>cero o mas {{ HTMLElement("tbody") }} elementos,</li>
                      <li>o uno o mas {{ HTMLElement("tr") }} elementos,</li>
                    </ul>
                  </li>
                  <li>una segunda alternativa seguida por un opcional {{ HTMLElement("tfoot") }} elemento:
                    <ul>
                      <li>cualquier cero o mas {{ HTMLElement("tbody") }} elementos,</li>
                      <li>o uno o mas {{ HTMLElement("tr") }} elementos</li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>Omisión de etiquetar</td>
      <td>None, both the <span title="syntax-start-tag">start tag</span> and the <span title="syntax-end-tag">end tag</span> are mandatory</td>
    </tr>
    <tr>
      <td>Elementos Permitidos</td>
      <td>culaquier 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" target="_blank" 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>
  <style type="text/css">
<!--
		@page { margin: 0.79in }
		P { margin-bottom: 0.08in; direction: ltr; color: #000000; text-align: left; widows: 0; orphans: 0 }
		P.western { font-family: "Times New Roman", serif; font-size: 12pt; so-language: es-PE }
		P.cjk { font-family: "SimSun"; font-size: 12pt; so-language: zh-CN }
		P.ctl { font-family: "Mangal"; font-size: 12pt; so-language: hi-IN }
		A:link { so-language: zxx }
	-->  </style>
</p>
<p class="western" lang="es-PE">Al igual que otros elementos HTML, también soporta <u>atributos globales</u>.</p>
<p>{{ htmlattrdef("align") }} {{ Deprecated_inline() }}</p>
<p>
  <style type="text/css">
<!--
		@page { margin: 0.79in }
		P { margin-bottom: 0.08in; direction: ltr; color: #000000; text-align: left; widows: 0; orphans: 0 }
		P.western { font-family: "Times New Roman", serif; font-size: 12pt; so-language: es-PE }
		P.cjk { font-family: "SimSun"; font-size: 12pt; so-language: zh-CN }
		P.ctl { font-family: "Mangal"; font-size: 12pt; so-language: hi-IN }
		A:link { so-language: zxx }
	-->  </style>
</p>
<p lang="es-PE" style="margin-left: 0.39in; margin-bottom: 0in">Este atributo enumerativo indica como va a encontrarse alineada la tabla respecto al contenido del documento en cuestión, pudiendo tener los siguientes valores:</p>
<ul>
  <li>
    <p lang="es-PE" style="margin-bottom: 0in">izquierdo, significa que la tabla será mostrada a la izquierda del texto</p>
  </li>
  <li>
    <p lang="es-PE" style="margin-bottom: 0in">centrado, significa que la tabla será mostrada centrada en el texto;</p>
  </li>
  <li>
    <p lang="es-PE" style="margin-bottom: 0in">derecho, significa que la tabla será mostrada a la derecha del texto.</p>
  </li>
</ul>
<p lang="es-PE" style="margin-left: 0.39in; margin-bottom: 0in"><strong>Nota:</strong></p>
<ul>
  <li>
    <p align="LEFT" lang="es-PE" style="margin-bottom: 0in; widows: 0; orphans: 0">No usar este atributo en CSS; sino modelar el elemento <font face="Courier New, monospace">&lt;table&gt;</font>, a fin de dar un efecto similar al <font face="Courier New, monospace">align</font>, las propiedades CSS nativas: <font face="Courier New, monospace">text-align</font> y <font face="Courier New, monospace">vertical-align</font> debieran ser utilizadas.</p>
  </li>
  <li>
    <p lang="es-PE" style="margin-bottom: 0.2in">Antes de la version 4 de Firefox, este ya era soportada sólo en el modo <i>quirks </i><span style="font-style: normal">(compatibilidad con navegadores antiguos)</span>, con los valores <font face="Courier New, monospace"><span style="text-decoration: none"><b>middle</b></span></font><span style="text-decoration: none">, </span><font face="Courier New, monospace"><span style="text-decoration: none"><b>absmiddle</b></span></font><span style="text-decoration: none">, y </span><font face="Courier New, monospace"><span style="text-decoration: none"><b>abscenter</b></span></font> como sinónimos de <font face="Courier New, monospace"><b>center</b></font><em>.</em></p>
  </li>
</ul>
<p class="western" lang="es-PE" style="margin-bottom: 0in">&nbsp;</p>
<dl>
  <dt>
    {{ htmlattrdef("bgcolor") }} {{ Deprecated_inline() }}</dt>
  <dd>
    &nbsp;</dd>
  <dd>
    <style type="text/css">
<!--
		@page { margin: 0.79in }
		P { margin-bottom: 0.08in; direction: ltr; color: #000000; text-align: left; widows: 0; orphans: 0 }
		P.western { font-family: "Times New Roman", serif; font-size: 12pt; so-language: es-PE }
		P.cjk { font-family: "SimSun"; font-size: 12pt; so-language: zh-CN }
		P.ctl { font-family: "Mangal"; font-size: 12pt; so-language: hi-IN }
		A:link { so-language: zxx }
	-->    </style>
    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 será usado:<br />
    &nbsp;</dd>
  <dt>
    &nbsp;</dt>
  <dd>
    <table>
      <tbody>
        <tr>
          <td style="width: 24px; background-color: black;">&nbsp;</td>
          <td><span>negro</span> = "#000000"</td>
          <td style="width: 24px; background-color: green;">&nbsp;</td>
          <td><span>verde</span> = "#008000"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: silver;">&nbsp;</td>
          <td><span>plata</span> = "#C0C0C0"</td>
          <td style="width: 24px; background-color: lime;">&nbsp;</td>
          <td><span>lima</span> = "#00FF00"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: gray;">&nbsp;</td>
          <td><span>gris</span> = "#808080"</td>
          <td style="width: 24px; background-color: olive;">&nbsp;</td>
          <td><span>oliva</span> = "#808000"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: white;">&nbsp;</td>
          <td><span>blanco</span> = "#FFFFFF"</td>
          <td style="width: 24px; background-color: yellow;">&nbsp;</td>
          <td><span>amarillo</span> = "#FFFF00"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: maroon;">&nbsp;</td>
          <td><span>marron</span> = "#800000"</td>
          <td style="width: 24px; background-color: navy;">&nbsp;</td>
          <td><span>azul marino</span> = "#000080"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: red;">&nbsp;</td>
          <td><span>rojo</span> = "#FF0000"</td>
          <td style="width: 24px; background-color: blue;">&nbsp;</td>
          <td><span>azul</span> = "#0000FF"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: purple;">&nbsp;</td>
          <td><span>purpura</span> = "#800080"</td>
          <td style="width: 24px; background-color: teal;">&nbsp;</td>
          <td><span>verde esmeralda</span> = "#008080"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: fuchsia;">&nbsp;</td>
          <td><span>fucsia</span> = "#FF00FF"</td>
          <td style="width: 24px; background-color: aqua;">&nbsp;</td>
          <td><span>verde agua</span> = "#00FFFF"</td>
        </tr>
      </tbody>
    </table>
    <div class="note">
      <style type="text/css">
<!--
		@page { margin: 0.79in }
		P { margin-bottom: 0.08in; direction: ltr; color: #000000; text-align: left; widows: 0; orphans: 0 }
		P.western { font-family: "Times New Roman", serif; font-size: 12pt; so-language: es-PE }
		P.cjk { font-family: "SimSun"; font-size: 12pt; so-language: zh-CN }
		P.ctl { font-family: "Mangal"; font-size: 12pt; so-language: hi-IN }
		A:link { so-language: zxx }
	-->      </style>
      <font face="Times New Roman, serif"><font size="3"><strong>Nota de uso: </strong><strong><span style="font-weight: normal">No usar este atributo en CSS; sino modelar el elemento </span></strong><font face="Courier New, monospace"><span style="font-weight: normal">&lt;table&gt;.</span></font><strong><span style="font-weight: normal"> A fin de dar un efecto similar al atributo bgcolor, la propiedad CSS nativa </span></strong><strong><font face="Courier New, monospace"><span style="text-decoration: none"><span style="font-weight: normal">background-color</span></span></font></strong><strong><span style="text-decoration: none"><span style="font-weight: normal"> </span></span></strong><strong><span style="font-weight: normal">debiera ser utilizada.</span></strong></font></font></div>
  </dd>
</dl>
<dl>
</dl>
<dl>
  <dt>
    {{ htmlattrdef("border") }} {{ Deprecated_inline() }}</dt>
  <dd>
    &nbsp;</dd>
  <dd>
    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</dd>
  <dd>
    <br />
    <div class="note">
      <strong>Nota de uso: </strong><br />
      <dl>
        <dd style="margin-bottom: 0.5cm; text-align: left; widows: 0; orphans: 0">
          <strong><font color="#000000"><font size="3"><span lang="es-PE"><span style="font-weight: normal">No usar este atributo en CSS; sino modelar el elemento </span></span></font></font></strong><code class="western"><font color="#000000"><font size="3"><span lang="es-PE"><span style="font-weight: normal">&lt;table&gt;.</span></span></font></font></code><strong><font color="#000000"><font size="3"><span lang="es-PE"><span style="font-weight: normal">A fin de dar un efecto similar al atributo </span></span></font></font></strong><strong><font color="#000000"><font face="Courier New, monospace"><font size="3"><span lang="es-PE"><span style="font-weight: normal">border</span></span></font></font></font></strong><strong><font color="#000000"><font size="3"><span lang="es-PE"><span style="font-weight: normal">, las propiedades CSS nativas: </span></span></font></font></strong><strong><font color="#000000"><font face="Courier New, monospace"><font size="3"><span lang="es-PE"><span style="text-decoration: none"><span style="font-weight: normal">border-width</span></span></span></font></font></font></strong><strong><font color="#000000"><font size="3"><span lang="es-PE"><span style="font-weight: normal"> y </span></span></font></font></strong><strong><font color="#000000"><font face="Courier New, monospace"><font size="3"><span lang="es-PE"><span style="text-decoration: none"><span style="font-weight: normal">border-style</span></span></span></font></font></font></strong><strong><font color="#000000"><font size="3"><span lang="es-PE"><span style="font-weight: normal"> debieran ser utilizadas.</span></span></font></font></strong></dd>
      </dl>
    </div>
  </dd>
</dl>
<p>{{ htmlattrdef("cellpadding") }} {{ Deprecated_inline() }}</p>
<p>
  <style type="text/css">
<!--
		@page { margin: 0.79in }
		P { margin-bottom: 0.08in; direction: ltr; color: #000000; text-align: left; widows: 0; orphans: 0 }
		P.western { font-family: "Times New Roman", serif; font-size: 12pt; so-language: es-PE }
		P.cjk { font-family: "SimSun"; font-size: 12pt; so-language: zh-CN }
		P.ctl { font-family: "Mangal"; font-size: 12pt; so-language: hi-IN }
		A:link { so-language: zxx }
	-->  </style>
  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<br />
  &nbsp;</p>
<p>
  <style type="text/css">
<!--
		@page { margin: 0.79in }
		P { margin-bottom: 0.08in; direction: ltr; color: #000000; text-align: left; widows: 0; orphans: 0 }
		P.western { font-family: "Times New Roman", serif; font-size: 12pt; so-language: es-PE }
		P.cjk { font-family: "SimSun"; font-size: 12pt; so-language: zh-CN }
		P.ctl { font-family: "Mangal"; font-size: 12pt; so-language: hi-IN }
		A:link { so-language: zxx }
	-->  </style>
  <font face="Times New Roman, serif"><font size="3"><strong>Nota de uso: </strong><strong><span style="font-weight: normal">No usar este atributo en CSS; sino modelar el elemento </span></strong><font face="Courier New, monospace"><span style="font-weight: normal">&lt;table&gt;. </span></font><strong><span style="font-weight: normal">A fin de dar un efecto similar al atributo de borde, la propiedad CSS nativa </span></strong><strong><font face="Courier New, monospace"><span style="font-weight: normal">border-collapse </span></font></strong><strong><span style="text-decoration: none"><span style="font-weight: normal">de</span></span></strong><strong><span style="font-weight: normal">biera ser utilizada, así como la propiedad </span></strong><strong><font face="Courier New, monospace"><span style="font-weight: normal">padding</span></font></strong><strong><span style="font-weight: normal"> de </span></strong><strong><font face="Courier New, monospace">&lt;td&gt;</font></strong></font></font></p>
<p><br />
  <strong>&nbsp;{{ htmlattrdef("cellspacing") }} {{ Deprecated_inline() }}</strong></p>
<p>Este atributo define un tamaño en porcentaje o píxeles del espacio entre 2 celdas (ambos horizontales o verticales) entre el inicio de la tabla y las celdas de la primera fila, la izquierda de la tabla y la primera columna, la derecha de la tabla y la última columna y el fin de la tabla y su última fila</p>
<p><strong><font color="#000000"><font size="3"><span lang="es-PE">Nota de uso: </span></font></font></strong><strong><font color="#000000"><font size="3"><span lang="es-PE"><span style="font-weight: normal">No usar este atributo en CSS; sino modelar el elemento </span></span></font></font></strong><code class="western"><font color="#000000"><font size="3"><span lang="es-PE"><span style="font-weight: normal">&lt;table&gt;.</span></span></font></font></code><strong><font color="#000000"><font size="3"><span lang="es-PE"><span style="font-weight: normal"> A fin de dar un efecto similar al atributo de borde, utilizar la propiedad CSS nativa </span></span></font></font></strong><strong><font color="#000000"><font face="Courier New, monospace"><font size="3"><span lang="es-PE"><span style="font-weight: normal">border-collapse </span></span></font></font></font></strong><strong><font color="#000000"><font face="Times New Roman, serif"><font size="3"><span lang="es-PE"><span style="font-weight: normal">con el valor collapse </span></span></font></font></font></strong><strong><font color="#000000"><font face="Times New Roman, serif"><font size="3"><span lang="es-PE"><span style="text-decoration: none"><span style="font-weight: normal">de</span></span></span></font></font></font></strong><strong><font color="#000000"><font face="Times New Roman, serif"><font size="3"><span lang="es-PE"><span style="font-weight: normal">biera</span></span></font></font></font></strong><strong><font color="#000000"><font size="3"><span lang="es-PE"><span style="font-weight: normal"> ser utilizada en el elemento &lt;table&gt; , así como la propiedad </span></span></font></font></strong><strong><font color="#000000"><font face="Courier New, monospace"><font size="3"><span lang="es-PE"><span style="font-weight: normal">margin</span></span></font></font></font></strong><strong><font color="#000000"><font size="3"><span lang="es-PE"><span style="font-weight: normal"> de </span></span></font></font></strong><strong><font color="#000000"><font face="Courier New, monospace"><font size="3"><span lang="es-PE"><span style="font-weight: normal">&lt;td&gt;</span></span></font></font></font></strong></p>
<p>{{ htmlattrdef("frame") }} {{ Deprecated_inline() }}</p>
<dl>
  <dd>
    &nbsp;</dd>
  <dt style="margin-left: 0.08cm; text-indent: -0.03cm">
    Este atributo enumerativo define cual lado del cuadro alrededor de la tabla será mostrada, tiene los siguientes valores:</dt>
  <dd>
    &nbsp;</dd>
  <dd>
    <table style="width: 668px;">
      <tbody>
        <tr>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>above</span></td>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>below</span></td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>hsides</span></td>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>vsides</span></td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>lhs</span></td>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>rhs</span></td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>border</span></td>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>box</span></td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: rgb(224, 224, 224);">&nbsp;</td>
          <td><span>void</span></td>
        </tr>
      </tbody>
    </table>
    <div class="note">
      <dl>
        <dd style="margin-bottom: 0.5cm">
          <span style="color:#000000;"><span style="font-weight: normal;">No</span></span><span style="font-weight: normal;"><span style="color:#000000;">ta de uso:</span><strong><span style="font-weight: normal;"> </span></strong>No usar este atributo en CSS; sino modelar el elemento </span><code class="western"><span style="font-weight: normal">&lt;table&gt;. A</span></code><span style="font-weight: normal"> fin de dar un efecto similar al atributo de cuadro, utilizar las propiedades CSS nativas: </span><font face="Courier New, monospace"><span style="font-weight: normal">border-style</span></font><font face="Times New Roman, serif"><span style="font-weight: normal"> y</span></font><font face="Courier New, monospace"><span style="font-weight: normal"> border-width</span></font></dd>
      </dl>
    </div>
  </dd>
</dl>
<dl>
  <dt>
    {{ htmlattrdef("rules") }} {{ Deprecated_inline() }}</dt>
  <dd>
    Este atributo enumerativo define donde aparecen las reglas en la tabla Ejm: líneas, pudiendo tener los siguientes valores:
    <ul>
      <li>
        <dl>
          <dd>
            <b>none</b>, indica que ninguna regla se mostrará, es el valor por defecto</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dd>
            <b>groups</b>, mostrará el número de reglas a mostrarse entre grupos de filas (definido por los elementos <code class="western">&lt;thead&gt;</code>, <code class="western">&lt;tbody&gt;</code> y <code class="western">&lt;tfoot&gt;</code> ) y entre grupos de columnas (definidos por los elementos <code class="western">&lt;col&gt;</code> y <code class="western">&lt;colgroup&gt;</code> )</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dd>
            <b>rows</b>, que mostrará las reglas entre filas</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dd>
            <b>columns</b>, que mostrará las reglas entre columnas</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dd>
            <b>all</b>, que mostrará las reglas entre filas y columnas.</dd>
        </dl>
      </li>
    </ul>
    <div class="note">
      <strong>Notas de uso</strong>:
      <ul>
        <li>
          <dl>
            <dd>
              El estilo de las reglas depende del navegador usado y no puede ser modificado.</dd>
          </dl>
        </li>
        <li>
          <dl>
            <dd style="margin-bottom: 0.5cm">
              <strong><span style="font-weight: normal">No usar este atributo en CSS; sino modelar el elemento </span></strong><code class="western"><span style="font-weight: normal">&lt;table&gt;.</span></code><strong><span style="font-weight: normal"> A fin de dar un efecto similar al atributo de cuadro, utilize la propiedad </span></strong><strong><font face="Courier New, monospace"><span style="font-weight: normal">border </span></font></strong><strong><font face="Times New Roman, serif"><span style="font-weight: normal">en el adecuado elemento </span></font></strong><strong><font face="Courier New, monospace"><span style="font-weight: normal">&lt;thead&gt;</span></font></strong><strong><font face="Times New Roman, serif"><span style="font-weight: normal">, </span></font></strong><code class="western"><span style="font-weight: normal">&lt;tbody&gt;</span></code><strong><font face="Times New Roman, serif"><span style="font-weight: normal">, </span></font></strong><code class="western"><span style="font-weight: normal">&lt;tfoot&gt;</span></code><strong><font face="Times New Roman, serif"><span style="font-weight: normal">, </span></font></strong><code class="western"><span style="font-weight: normal">&lt;col&gt;</span></code><strong><font face="Times New Roman, serif"><span style="font-weight: normal"> o </span></font></strong><code class="western"><span style="font-weight: normal">&lt;colgroup&gt;</span></code><strong><font face="Times New Roman, serif"><span style="font-weight: normal"> </span></font></strong></dd>
          </dl>
        </li>
      </ul>
    </div>
  </dd>
</dl>
<dl>
  <dt>
    {{ htmlattrdef("summary") }} {{ Deprecated_inline() }}</dt>
  <dt>
    &nbsp;</dt>
  <dt>
    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 <font color="#000080"><span lang="zxx"><font color="#000000"><font face="Courier New, monospace"><span style="text-decoration: none">&lt;caption&gt;</span></font></font></span></font> en vez de este.</dt>
  <dt>
    &nbsp;</dt>
  <dt>
    El atributo de resumen no es obligatorio usuarlo, pudiendo ser omitido si un elemento <font color="#000080"><span lang="zxx"><font color="#000000"><font face="Courier New, monospace"><span style="text-decoration: none">&lt;caption&gt; </span></font></font></span></font><font color="#000080"><span lang="zxx"><font color="#000000"><font face="Times New Roman, serif"><span style="text-decoration: none"><span style="background: transparent">realiza similar labor</span></span></font></font></span></font><font color="#000000"><span style="text-decoration: none"><span style="background: transparent">.</span></span></font></dt>
  <dd>
    &nbsp;</dd>
  <dd>
    <br />
    <div class="note">
      <dl>
        <dd>
          <strong>Notas de uso: </strong><strong><span style="font-weight: normal">No usar este atributo al estar en desuso, considérese una de estas maneras de describir una tabla respetando la sintaxis CSS:</span></strong></dd>
      </dl>
      :
      <ul>
        <li>
          <dl>
            <dd>
              Rodeando la tabla (esta es la forma menos semántica de lograrlo).</dd>
          </dl>
        </li>
        <li>
          <dl>
            <dd>
              En el elemento <font color="#000080"><span lang="zxx"><font color="#000000"><font face="Courier New, monospace"><span style="text-decoration: none">&lt;caption&gt;</span></font></font></span></font> .</dd>
          </dl>
        </li>
        <li>
          <dl>
            <dd style="text-align: left; widows: 0; orphans: 0">
              En el componente <font color="#000080"><span lang="zxx"><font color="#000000"><font face="Courier New, monospace"><span style="font-style: normal"><span style="text-decoration: none">&lt;details&gt;</span></span></font></font></span></font> , dentro del elemento <font color="#000080"><span lang="zxx"><font color="#000000"><font face="Courier New, monospace"><font size="3"><span style="font-style: normal"><span style="text-decoration: none">&lt;caption&gt;</span></span></font></font></font></span></font> .</dd>
          </dl>
        </li>
        <li>
          <dl>
            <dd style="text-align: left; widows: 0; orphans: 0">
              Incluir al elemento <font color="#000080"><span lang="zxx"><font color="#000000"><font face="Courier New, monospace"><font size="3"><span style="font-style: normal"><span style="text-decoration: none">&lt;table&gt;</span></span></font></font></font></span></font> dentro de <font color="#000080"><span lang="zxx"><font color="#000000"><font face="Courier New, monospace"><font size="3"><span style="font-style: normal"><span style="text-decoration: none">&lt;figure&gt;</span></span></font></font></font></span></font> , añadiendo su descripcion al lado o dentro de un elemento <font color="#000080"><span lang="zxx"><font color="#000000"><font face="Courier New, monospace"><font size="3"><span style="font-style: normal"><span style="text-decoration: none">&lt;figcaption&gt;</span></span></font></font></font></span></font>.</dd>
          </dl>
        </li>
        <li>
          <dl>
            <dd style="text-align: left; widows: 0; orphans: 0">
              Ajustar la tablaa fin que su descripción no sea necesaría, utilizando los elementos <font color="#000080"><span lang="zxx"><font color="#000000"><font face="Courier New, monospace"><font size="3"><span style="font-style: normal"><span style="text-decoration: none">&lt;th&gt;</span></span></font></font></font></span></font> y <font color="#000080"><span lang="zxx"><font color="#000000"><font face="Courier New, monospace"><font size="3"><span style="font-style: normal"><span style="text-decoration: none">&lt;thead&gt;</span></span></font></font></font></span></font>.</dd>
          </dl>
        </li>
      </ul>
    </div>
  </dd>
  <dt>
    {{ htmlattrdef("width") }} {{ Deprecated_inline() }}</dt>
  <dd>
    &nbsp;</dd>
  <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</dd>
  <dt>
    &nbsp;</dt>
  <dd>
    <div class="note">
      <dl>
        <dd style="margin-bottom: 0.5cm">
          <strong>Nota de uso: </strong><strong><span style="font-weight: normal">No usar este atributo al estar en desuso, las reglas debieran respetar la sintaxis CSS, usando su propia propiedad </span></strong><font color="#000080"><span lang="zxx"><font color="#000000"><span style="text-decoration: none">width</span></font></span></font></dd>
      </dl>
    </div>
  </dd>
</dl>
<h3 id="DOM_interface">Intefase DOM</h3>
<p>Este elemento implementa la interfase <code><a href="/en/DOM/HTMLTableElement" title="en/DOM/HTMLTableElement">HTMLTableElement </a></code>interface.</p>
<h3 id="Examples">Ejemples</h3>
<pre class="brush: html">
&lt;!-- Simple table --&gt;
&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;John&lt;/td&gt;
    &lt;td&gt;Doe&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Jane&lt;/td&gt;
    &lt;td&gt;Doe&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;!-- Simple table with header --&gt;
&lt;table&gt;
  &lt;tr&gt;
    &lt;th&gt;First name&lt;/th&gt;
    &lt;th&gt;Last name&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;John&lt;/td&gt;
    &lt;td&gt;Doe&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Jane&lt;/td&gt;
    &lt;td&gt;Doe&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;!-- Table with thead, tfoot, and tbody --&gt;
&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Header content 1&lt;/th&gt;
      &lt;th&gt;Header content 2&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tfoot&gt;
    &lt;tr&gt;
      &lt;td&gt;Footer content 1&lt;/td&gt;
      &lt;td&gt;Footer content 2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Body content 1&lt;/td&gt;
      &lt;td&gt;Body content 2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;!-- Table with colgroup --&gt;
&lt;table&gt;
  &lt;colgroup span="4" class="columns"&gt;&lt;/colgroup&gt;
  &lt;tr&gt;
    &lt;th&gt;Countries&lt;/th&gt;
    &lt;th&gt;Capitals&lt;/th&gt;
    &lt;th&gt;Population&lt;/th&gt;
    &lt;th&gt;Language&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;USA&lt;/td&gt;
    &lt;td&gt;Washington D.C.&lt;/td&gt;
    &lt;td&gt;309 million&lt;/td&gt;
    &lt;td&gt;English&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Sweden&lt;/td&gt;
    &lt;td&gt;Stockholm&lt;/td&gt;
    &lt;td&gt;9 million&lt;/td&gt;
    &lt;td&gt;Swedish&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;!-- Table with colgroup and col --&gt;
&lt;table&gt;
  &lt;colgroup&gt;
    &lt;col class="column1"&gt;
    &lt;col class="columns2plus3" span="2"&gt;
  &lt;/colgroup&gt;
  &lt;tr&gt;
    &lt;th&gt;Lime&lt;/th&gt;
    &lt;th&gt;Lemon&lt;/th&gt;
    &lt;th&gt;Orange&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Green&lt;/td&gt;
    &lt;td&gt;Yellow&lt;/td&gt;
    &lt;td&gt;Orange&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;!-- Simple table with caption --&gt;
&lt;table&gt;
  &lt;caption&gt;Awesome caption&lt;/caption&gt;
  &lt;tr&gt;
    &lt;td&gt;Awesome data&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</pre>
<h4 id="Result">Result</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 class="columns" span="4">
  </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" span="2" />
  </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="Browser_compatibility">Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</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>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</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="See_also">See also</h3>
<ul>
  <li>&nbsp;
    <style type="text/css">
<!--
		@page { margin: 0.79in }
		P { margin-bottom: 0.08in; direction: ltr; color: #000000; text-align: left; widows: 0; orphans: 0 }
		P.western { font-family: "Times New Roman", serif; font-size: 12pt; so-language: es-PE }
		P.cjk { font-family: "SimSun"; font-size: 12pt; so-language: zh-CN }
		P.ctl { font-family: "Mangal"; font-size: 12pt; so-language: hi-IN }
		A:link { so-language: zxx }
	-->    </style>
    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>
        <p lang="es-PE" style="margin-bottom: 0in">izquierdo, significa que la tabla será mostrada a la izquierda del texto</p>
      </li>
      <li>
        <p lang="es-PE" style="margin-bottom: 0in">centrado, significa que la tabla será mostrada centrada en el texto;</p>
      </li>
      <li>
        <p lang="es-PE" style="margin-bottom: 0in">derecho, significa que la tabla será mostrada a la derecha del texto.</p>
      </li>
    </ul>
    <p lang="es-PE" style="margin-bottom: 0in"><strong>Notas:</strong></p>
    <ul>
      <li>
        <p align="LEFT" lang="es-PE" style="margin-bottom: 0in; widows: 0; orphans: 0">No usar este atributo en CSS; sino modelar el elemento <font face="Courier New, monospace">&lt;table&gt;</font>, a fin de dar un efecto similar al <font face="Courier New, monospace">align</font>, las propiedades CSS nativas: <font face="Courier New, monospace">text-align</font> y <font face="Courier New, monospace">vertical-align</font> debieran ser utilizadas.</p>
      </li>
      <li>
        <p lang="es-PE" style="margin-bottom: 0.2in">Antes de la version 4 de Firefox, este ya era soportada sólo en el modo <i>quirks </i><span style="font-style: normal">(compatibilidad con navegadores antiguos)</span>, con los valores <font face="Courier New, monospace"><span style="text-decoration: none"><b>middle</b></span></font><span style="text-decoration: none">, </span><font face="Courier New, monospace"><span style="text-decoration: none"><b>absmiddle</b></span></font><span style="text-decoration: none">, y </span><font face="Courier New, monospace"><span style="text-decoration: none"><b>abscenter</b></span></font> como sinónimos de <font face="Courier New, monospace"><b>center</b></font><em>.</em></p>
      </li>
    </ul>
  </li>
  <li>{{ htmlattrdef("bgcolor") }} {{ Deprecated_inline() }}</li>
  <li>This attribute defines the background color of the table and its content. It is one of the 6-digit hexadecimal code as defined in <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixed by a '#'. One of the sixteen predefined color strings may be used:
    <table>
      <tbody>
        <tr>
          <td style="width: 24px; background-color: black;">&nbsp;</td>
          <td><span>black</span> = "#000000"</td>
          <td style="width: 24px; background-color: green;">&nbsp;</td>
          <td><span>green</span> = "#008000"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: silver;">&nbsp;</td>
          <td><span>silver</span> = "#C0C0C0"</td>
          <td style="width: 24px; background-color: lime;">&nbsp;</td>
          <td><span>lime</span> = "#00FF00"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: gray;">&nbsp;</td>
          <td><span>gray</span> = "#808080"</td>
          <td style="width: 24px; background-color: olive;">&nbsp;</td>
          <td><span>olive</span> = "#808000"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: white;">&nbsp;</td>
          <td><span>white</span> = "#FFFFFF"</td>
          <td style="width: 24px; background-color: yellow;">&nbsp;</td>
          <td><span>yellow</span> = "#FFFF00"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: maroon;">&nbsp;</td>
          <td><span>maroon</span> = "#800000"</td>
          <td style="width: 24px; background-color: navy;">&nbsp;</td>
          <td><span>navy</span> = "#000080"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: red;">&nbsp;</td>
          <td><span>red</span> = "#FF0000"</td>
          <td style="width: 24px; background-color: blue;">&nbsp;</td>
          <td><span>blue</span> = "#0000FF"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: purple;">&nbsp;</td>
          <td><span>purple</span> = "#800080"</td>
          <td style="width: 24px; background-color: teal;">&nbsp;</td>
          <td><span>teal</span> = "#008080"</td>
        </tr>
        <tr>
          <td style="width: 24px; background-color: fuchsia;">&nbsp;</td>
          <td><span>fuchsia</span> = "#FF00FF"</td>
          <td style="width: 24px; background-color: aqua;">&nbsp;</td>
          <td><span>aqua</span> = "#00FFFF"</td>
        </tr>
      </tbody>
    </table>
    <div class="note">
      <strong>Usage note:&nbsp;</strong>Do not use this attribute, as it has been deprecated: the {{ HTMLElement("table") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect than the <span>bgcolor</span> attribute, the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("background-color") }} should be used.</div>
  </li>
  <!-- Simple table --><!-- Simple table with header --><!-- Table with thead, tfoot, and tbody --><!-- Table with colgroup --><!-- Table with colgroup and col --><!-- Simple table with caption -->
  <li>
    <ul>
      <li>Other table-related HTML&nbsp;Elements: {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }};</li>
      <li>CSS properties that may be specially useful to style the <span style="font-family: Courier New;">&lt;table&gt;</span> element:
        <ul>
          <li>{{ cssxref("width") }} to control the width of the table;</li>
          <li>{{ cssxref("border") }}, {{ cssxref("border-style") }}, {{ cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-collapse") }}, {{ cssxref("border-spacing") }} to control the aspect of cell borders, rules and frame;</li>
          <li>{{ cssxref("margin") }} and {{ cssxref("padding") }} to style the individual cell content;</li>
          <li>{{ cssxref("text-align") }} and {{ cssxref("vertical-align") }} to define alignment of text and cell content.</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
Revertir a esta revisión