path: root/files/es/web/html/elemento/td/index.html

---
title: <td>
slug: Web/HTML/Elemento/td
translation_of: Web/HTML/Element/td
---
<h2 id="Resumen">Resumen</h2>

<p>El elemento <a href="/es/docs/Web/HTML">HTML</a> <em>Celda de tabla</em> (<strong><code>&lt;td&gt;</code></strong>) define la celda de una tabla que contiene datos. Esta participa en el <em>modelo de tablas</em>.</p>

<h2 id="Contexto_de_uso">Contexto de uso</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th>
   <td>Ninguna.</td>
  </tr>
  <tr>
   <th>Contenido permitido</th>
   <td>Contenido dinámico.</td>
  </tr>
  <tr>
   <th>Omision de Etiquetas</th>
   <td>La <span title="syntax-etiqueta-de-inicio">etiqueta de inicio</span> es obligatoria.<br>
    La etiqueta final puede ser omitida, si esta inmediatamente seguida por un elemento {{HTMLElement("th")}} o un {{HTMLElement("td")}} o si no hay más datos en el elemento padre.</td>
  </tr>
  <tr>
   <th>Elementos padre permitidos</th>
   <td>Un elemento {{HTMLElement("tr")}}.</td>
  </tr>
  <tr>
   <th>Documento normativo</th>
   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-td-element" rel="external">HTML5, section 4.9.9</a> (<a href="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6">HTML4.01, section 11.2.6</a>)</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributos">Atributos</h2>

<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>

<dl>
 <dt>{{htmlattrdef("abbr")}} {{obsoleteGeneric('inline','HTML5')}}</dt>
 <dd>Este atributo contiene un pequeña descripción abreviada del contenido de la celda. Algunos agentes de usuario, como los lectores de voz, pueden presentar esta descripción antes que el propio contenido.
 <div class="note"><strong>Nota:</strong> No usar este atributo ya que esta obsoleto en la ultima version del estandar.  Como alternativa, puedes poner una descripción abreviada dentro de la celda y colocar el contenido largo en el atributo <strong>title</strong>.</div>
 </dd>
 <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
 <dd>Este atributo especifíca la posición horizontal del contenido de la celda, los valores de la misma pueden ser:
 <ul>
  <li><font face="Consolas, Liberation Mono, Courier, monospace">Izquierda</font>, alínea el contenido de la celda a la izquierda</li>
  <li><font face="Consolas, Liberation Mono, Courier, monospace">Centro</font>, centra el contenido de una celda</li>
  <li><font face="Consolas, Liberation Mono, Courier, monospace">Derecha</font>, alínea el contenido de la celda a la derecha</li>
  <li><font face="Consolas, Liberation Mono, Courier, monospace">Justificado</font>, inserta espacios en el texto para que el contenido se ajuste a la celda</li>
  <li><code>char</code>, alinear el contenido a un caracter especial definido por los atributos {{htmlattrxref("char", "td")}} y {{htmlattrxref("charoff", "td")}} {{unimplemented_inline(2212)}}.</li>
 </ul>

 <p>Si este atributo no se define, se selecciona por defecto <code>left</code></p>

 <div class="note"><strong>Nota:</strong> No usar este atributo ya que esta obsoleto en la ultima version.

 <ul>
  <li>Para lograr el mismo efecto de los valores <code>left</code>, <code>center</code>, <code>right</code>, o <code>justify</code> , usa la propiedad CSS {{cssxref("text-align")}} en el.</li>
  <li>Para lograr el mismo efecto que el valor <code>char</code> , en CSS3,puedes usar el valor de la {{htmlattrxref("char", "td")}} como el valor de la propiedad {{cssxref("text-align")}}  {{unimplemented_inline}}.</li>
 </ul>
 </div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt>
 <dd>
 <pre dir="ltr" id="tw-target-text">Este atributo contiene una lista de cadenas separadas por espacios . Cada cadena es el ID de un grupo de celdas a las que esta cabecera se aplica.</pre>

 <div class="note"><strong>Nota: </strong>No usar este atributo ya que esta obsoleto en la ultima version. En su lugar use el atributo {{htmlattrxref("scope", "td")}} .</div>
 </dd>
 <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
 <dd>
 <pre dir="ltr" id="tw-target-text">Este atributo define el color de fondo de cada celda de la columna. Es uno de los códigos de 6 dígitos hexadecimales como se definen en sRGB , prefijado por un '# ' . Una de las cadenas de color predefinidos dieciséis se pueden utilizar :</pre>

 <table style="width: 80%;">
  <tbody>
   <tr>
    <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>Negro</code> = "#000000"</td>
    <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td>Verde = "#008000"</td>
   </tr>
   <tr>
    <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><font face="Consolas, Liberation Mono, Courier, monospace">Plata</font> = "#C0C0C0"</td>
    <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>Lima</code> = "#00FF00"</td>
   </tr>
   <tr>
    <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><font face="Consolas, Liberation Mono, Courier, monospace">Gris</font> = "#808080"</td>
    <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><font face="Consolas, Liberation Mono, Courier, monospace">Oliva</font> = "#808000"</td>
   </tr>
   <tr>
    <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><font face="Consolas, Liberation Mono, Courier, monospace">Blanco</font> = "#FFFFFF"</td>
    <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><font face="Consolas, Liberation Mono, Courier, monospace">Amarillo</font> = "#FFFF00"</td>
   </tr>
   <tr>
    <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>Marrón</code> = "#800000"</td>
    <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><font face="Consolas, Liberation Mono, Courier, monospace">Marino</font> = "#000080"</td>
   </tr>
   <tr>
    <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>Rojo</code> = "#FF0000"</td>
    <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>Azul</code> = "#0000FF"</td>
   </tr>
   <tr>
    <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>Purpura</code> = "#800080"</td>
    <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>Verde Azulado</code> = "#008080"</td>
   </tr>
   <tr>
    <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>Fucsia</code> = "#FF00FF"</td>
    <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>agua</code> = "#00FFFF"</td>
   </tr>
  </tbody>
 </table>

 <div class="note">Nota: No usar este atributo ya que esta obsoleto en la ultima version del estandar y solo implementado en algunas versiones de Microsoft Internet Explorer: El elemento {{HTMLElement("td")}} debe ser estilizado en CSS. <br>
 Para crear un efecto similar en CSS en su lugar use la propiedad {{cssxref("background-color")}}.</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
 <dd>
 <pre dir="ltr" id="tw-target-text">Este atributo se utiliza para establecer el carácter para alinear las celdas de una columna . Los valores típicos de esto incluyen un punto (. ) al intentar alinear los números o valores monetarios . Si { { htmlattrxref ( " align " , " td " ) } } no está ajustado a char, este atributo se ignora.</pre>

 <div class="note"><strong>Note: </strong>No usar este atributo ya que está obsoleto (y no soportado) en las últimas versiones estándares).  Para lograr el mismo que el {{htmlattrxref("char", "thead")}}, en CSS3, puedes usar el character set usando el atributo {{htmlattrxref("char", "th")}} como el valor de la propiedad {{cssxref("text-align")}}  {{unimplemented_inline}}.</div>
 </dd>
 <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
 <dd><br>
 Este atributo se utiliza para indicar el número de caracteres para compensar los datos de la columna de los personajes de alineación especificado por el atributo de carbón .
 <div class="note">Nota: No usar este atributo ya que esta obsoleto en la ultima version del estandar,</div>
 </dd>
 <dt>{{htmlattrdef("colspan")}}</dt>
 <dd>
 <pre dir="ltr" id="tw-target-text">Este atributo contiene un valor entero no negativo que indica por el número de columnas se extiende la célula. Su valor por defecto es 1 ; si su valor se establece en 0 , se extiende hasta el final de la { { HTMLElement ( " colgroup " ) } } , aunque implícitamente definido , que la célula pertenece. Los valores superiores a 1000 serán consideradas como incorrectas y se establecen en el valor predeterminado ( 1 ) .</pre>

 <div class="note"><strong>Nota: En</strong> {{HTMLVersionInline(5)}} este atributo solo acepta valores mayores que 0 this attribute only accepts values greater than zero since it <a href="http://dev.w3.org/html5/spec/single-page.html#attr-tdth-colspan">must not be used to overlap cells</a>. Además, Firefox is the only browser to support the 0 value as defined in the {{HTMLVersionInline(4.01)}} specification.</div>
 </dd>
 <dt>{{htmlattrdef("headers")}}</dt>
 <dd><br>
 Este atributo contiene una lista de cadenas separadas por espacios , cada uno correspondiente al atributo ID de la { { HTMLElement ( "th" ) } } elementos que se aplican a este elemento.</dd>
 <dt>{{htmlattrdef("rowspan")}}</dt>
 <dd><br>
 Este atributo contiene un valor entero no negativo que indica a cuántas filas se extiende la célula. Su valor por defecto es 1 ; si su valor se establece en 0 , se extiende hasta el final de la sección de la tabla ( { { HTMLElement ( " culata en T " ) } } , { { HTMLElement ( " tbody " ) } } , { { HTMLElement ( " tfoot " ) } } , incluso si define implícitamente , que la célula pertenece. los valores superiores a 65534 se recortan hasta 65534 .</dd>
 <dt>{{htmlattrdef("scope")}} {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
 <dd> </dd>
 <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
 <dd><br>
 Este atributo especifica la alineación vertical del texto dentro de cada fila de células de la cabecera de la tabla . Los valores posibles para este atributo son :
 <ul>
  <li><code>baseline</code>,<span style="background-color: #fafbfc; font-family: consolas,monaco,andale mono,monospace; font-size: 1rem; line-height: 19px; white-space: pre;"> pondrá el texto tan cerca del fondo de la celda , ya que es posible, pero alinearlo en la línea de base de los caracteres en lugar de la parte inferior de ellos. Si los caracteres son todos del mismo tamaño , esto tiene el mismo efecto que la parte inferior.</span></li>
  <li><code>bottom</code>,  pondrá el texto tan cerca del fondo de la celda , ya que es posible</li>
  <li><code>middle</code>, centra el texto de la celda</li>
  <li>and <code>top</code>, pone el texto como cerca de la parte superior de la celda como es posible .</li>
 </ul>

 <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it.</div>
 </dd>
 <dt>{{htmlattrdef("width")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}</dt>
 <dd><br>
 Este atributo se utiliza para definir una anchura de celda recomendada. Propiedades CELLSPACING y cellpadding pueden añadir espacio adicional, y el elemento { { HTMLElement ( "col " ) } } anchura pueden también tener algún efecto . En general, si el ancho de una columna es demasiado estrecha para mostrar una célula particular correctamente, y por lo tanto las células en el mismo, se puede ensanchar cuando se muestra .</dd>
 <dd>
 <div class="note"><strong>Note: </strong>Do not use this attribute in the latest standard: instead set the CSS {{cssxref("width")}} property.</div>
 </dd>
</dl>

<h2 id="DOM_interfaz">DOM interfaz</h2>

<p> </p>

<p>Este elemento implementa el interfaz {{domxref("HTMLTableDataCellElement")}}.</p>

<h2 id="Ejemplos">Ejemplos</h2>

<p> </p>

<p>Por favor, ver la página {{HTMLElement("table")}} para ejemplos de <code>&lt;td&gt;</code>.</p>

<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>

<div>{{CompatibilityTable}}</div>

<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.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>align/valign</code> attribute</td>
   <td>1.0</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>char/charoff</code> attribute</td>
   <td>1.0</td>
   <td>{{CompatNo}}<sup>[2]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>colspan</code> attribute with value 0 (extend to the end of the colgroup)</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</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>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>align/valign</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>char/charoff</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}<sup>[2]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p> </p>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li>Otros Elementos HTML relacionados con tablas: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li>
</ul>

<p>{{HTMLRef}}</p>