diff options
Diffstat (limited to 'files/es/web/html/element/tr/index.html')
| -rw-r--r-- | files/es/web/html/element/tr/index.html | 232 |
1 files changed, 232 insertions, 0 deletions
diff --git a/files/es/web/html/element/tr/index.html b/files/es/web/html/element/tr/index.html new file mode 100644 index 0000000000..6e57c8d5e0 --- /dev/null +++ b/files/es/web/html/element/tr/index.html @@ -0,0 +1,232 @@ +--- +title: <tr> +slug: Web/HTML/Elemento/tr +tags: + - Element + - Elemento + - HTML + - Reference + - Referencia + - Tabla + - Tablas + - Web +translation_of: Web/HTML/Element/tr +--- +<h2 id="Resumen">Resumen</h2> + +<p>El elemento HTML <em>fila de tabla</em> (<em>table row</em>) <code><tr></code> define una fila de celdas en una tabla. Estas pueden ser una mezcla de elementos {{HTMLElement("td")}} y {{HTMLElement("th")}}.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Content categories</a></td> + <td>Ninguno</td> + </tr> + <tr> + <td>Contenido permitido</td> + <td>Cero o más {{HTMLElement("td")}} o elementos {{HTMLElement("th")}}, o una mezcla de ellos</td> + </tr> + <tr> + <td> + <p>Omisión de Etiqueta </p> + </td> + <td>La etiqueta de inicio es obligatoria. La etiqueta final puede ser omitida si el elemento {{HTMLElement("tr")}} va inmediatamente seguido por un elemento {{HTMLElement("tr")}}, o si el grupo de tabla pariente ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} o el elemento {{HTMLElement("tfoot")}}) no tiene mas contenido</td> + </tr> + <tr> + <td>Elementos padres permitidos</td> + <td>{{HTMLElement("table")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} o el elemento {{HTMLElement("tfoot")}}</td> + </tr> + <tr> + <td>Documento de normativa</td> + <td><a class="external" href="http://www.whatwg.org/html/#the-tr-element">HTML, "The <code>tr</code> element"</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento incluye los </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>Este atributo enumerado especifica como será gestionado el alineamiento horizontal del contenido de cada celda. Hay varios valores: + <ul> + <li><font face="Consolas, Liberation Mono, Courier, monospace">left</font>, alinea el contenidoa la izquierda de las celdas</li> + <li><font face="Consolas, Liberation Mono, Courier, monospace">center</font>, centra el contenido en las celdas</li> + <li><font face="Consolas, Liberation Mono, Courier, monospace">right</font>, alinea el contenido a la derecha de las celdas</li> + <li><font face="Consolas, Liberation Mono, Courier, monospace">justify</font>, amplia los espacios en el contenido textual de hecho el contenido es justificado in las celdas</li> + <li><code>char</code>, alinea el contenido textual en un carácter especial con una mínima inclinación definida por el {{htmlattrxref("char", "tr")}} y {{htmlattrxref("charoff", "tr")}} atributos {{unimplemented_inline("2212")}}</li> + </ul> + + <p>Si este atributo no está establecido, se hereda el valor del nodo principal.</p> + + <div class="note"><strong>Nota: No utilice este atributo, ya que es obsoleta (no soportado) en el último estándar</strong>. + + <ul> + <li>Para lograr el mismo efecto que los valores <code>left</code>, <code>center</code>, <code>right</code> o <code>justify</code>, utilice la propiedad CSS {{cssxref("text-align")}}.</li> + <li>Para lograr el mismo efecto que el valor char, en CSS3, puede utilizar el valor de la {{htmlattrxref("char", "tr")}} como el valor de la {{cssxref("text-align")}} propiedad {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>Este atributo define el color de fondo de cada celda de la fila. Puede ser un código de #RRGGBB o una palabra clave de color de SVG. + <div class="note"><strong>Nota de uso:</strong> el elemento {{HTMLElement("tr")}} debe ser de estilo con CSS. Para dar un efecto similar al atributo bgcolor, utilice la propiedad CSS {{cssxref("background-color")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>Este atributo es utilizado para establecer el caracter para alinear las celdas de una columna. Los valores típicos para éste incluyen un punto (.) al intentar alinear los números o valores monetarios. Si {{htmlattrxref("align", "tr")}} no se ha ajustado a char, este atributo se ignora. + <div class="note"><strong>Nota:</strong> No utilice este atributo, ya que es obsoleta (y no es compatible) en el último estándar<strong>.</strong> Para lograr el mismo efecto que el {{htmlattrxref("char", "tr")}}, en CSS3, puedes utilizar el juego de carácteres utilizando el atributo {{htmlattrxref("char", "tr")}} como el valor de la referencia externa {{cssxref("text-align")}} propiedad {{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>Este atributo se utiliza para indicar el número de caracteres para compensar los datos de la columna de los carácteres de alineación especificado por el atributo char. + <div class="note"><strong>Nota:</strong> No utilice este atributo, ya que está obsoleto (y no es compatible) en el último estándar.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>Este atributo especifica la alineación vertical del texto dentro de cada fila de las celdas de la cabecera de la tabla. Los valores posibles para este atributo son: + <ul> + <li><code>baseline</code>, que pondrá el texto tan cerca del fondo de la celda, ya que es posible, pero corresponda con el <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> de los caráctere en lugar de la parte inferior de ellos. Si los carácteres son todos del tamaño, esto tiene el mismo efecto que la parte inferior.</li> + <li><code>bottom</code>,que pondrá el texto tan cerca de la parte inferior de la célula como sae posible;</li> + <li><code>middle</code>,que centrará el texto en la celda;</li> + <li>y <code>top</code>, que pondrá el texto como cerca de la parte superior de la célula como es posible.</li> + </ul> + + <div class="note"><strong>Nota:</strong> No utilice este atributo, ya que está obsoleto (y no es compatible) en el último estándar: {{cssxref("vertical-align")}} en su lugar establecer la propiedad CSS en él.</div> + </dd> +</dl> + +<h2 id="Interfaz_DOM">Interfaz DOM</h2> + +<p>Este elemento implementa el interfaz{{domxref("HTMLTableRowElement")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Ver {{HTMLElement("table")}} para ejemplos de <code><tr></code>.</p> + +<h2 id="Compatibilidad_con_Navegador">Compatibilidad con Navegador</h2> + +<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>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}} [1]</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}} [2]</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> + </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>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}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [2]</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>[1] See {{bug(915)}}.</p> + +<p>[2] See {{bug(2212)}}.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Otros elementos relacionados con tablas HTML: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}};</li> + <li>Las propiedades CSS y pseudo-clases que pueden ser especialmente útiles para el estilo del elemento <tr>: + <ul> + <li>El {{cssxref(":nth-child")}} pseudo-clase para establecer la alineación en las células de la columna;</li> + <li>El {{cssxref("text-align")}} propiedad para alinear todas las células contenidos en el mismo carácter, como '.'. <</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> |