Elemento tr

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento tr representa a una fila de una tabla (table). En HTML, las tablas están formadas por un conjunto de filas donde cada una contiene a un número de celdas. Por lo tanto, este elemento se encuentra habitualemente conteniendo a una o más celdas, que pueden ser de encabezado (th) o de datos (td).

Este elemento puede estar presente como hijo de thead, tbody, tfoot o table. Si se declara como hijo de table, debe ubicarse luego de todos los demás elementos excepto tfoot y no debe existir ningún elemento tbody en la tabla.

En versiones previas del estándar, el elemento tr tenía varios atributos de presentación que han sido eliminados en HTML5. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplos

El siguiente ejemplo representa a una tabla (table) con un encabezado (thead) y un cuerpo (tbody). Las filas de esta tabla, representadas por el elemento tr, se encuentran presentes en ambos contenedores descriptos anteriormente y contienen a un número de tres celdas cada una.

<table class="default">
  <thead>
    <tr>
      <th>Película</th>
      <th>Recaudación</th>
      <th>Año</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Avatar</td>
      <td>$2,787,965,087</td>
      <td>2009</td>
    </tr>
    <tr>
      <td>Titanic</td>
      <td>$2,186,772,302</td>
      <td>1997</td>
    </tr>
    <tr>
      <td>The avengers</td>
      <td>$1,518,594,910</td>
      <td>2012</td>
    </tr>
  </tbody>
</table>
Película Recaudación Año
Avatar $2,787,965,087 2009
Titanic $2,186,772,302 1997
The avengers $1,518,594,910 2012

Ahora, insertaremos una tabla sin el elemento tbody. Aquí, las filas del cuerpo implícito son declaradas como hijas de la tabla misma (table) y, como en el ejemplo anterior, las filas de encabezado son declaradas dentro de la sección de encabezado (thead). Nota como la sección de encabezado se encuentra apropiadamente precediendo a las filas del cuerpo implícito.

<table class="default">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>IQ estimado</th>
    </tr>
  </thead>
  <tr>
    <td>Sir Isaac Newton</td>
    <td>190</td>
  </tr>
  <tr>
    <td>Leonardo da Vinci</td>
    <td>180</td>
  </tr>
  <tr>
    <td>Johannes Kepler</td>
    <td>175</td>
  </tr>
</table>
Nombre IQ estimado
Sir Isaac Newton 190
Leonardo da Vinci 180
Johannes Kepler 175

Atributos

Atributos específicos

align

La alineación horizontal del texto en todas las celdas de la fila. Existen cinco valores posibles (insensibles a mayúsculas/minúsculas):

  • left: el texto se alinea a la margen izquierda. Este es el valor predeterminado para celdas de datos (td).
  • center: el texto es centrado. Este es el valor predeterminado para celdas de encabezado (th).
  • right: el texto se alinea a la margen derecha.
  • justify: el texto es justificado o alineado a ambas márgenes.
  • char: el texto se alinea a un carácter específico. Se utiliza en conjunto con el atributo char.

Este atributo se ha vuelto obsoleto en HTML5 y, por lo tanto, su uso ya no es válido. Los autores deberían reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<tr align="center">

char

Un carácter que actuará como eje para la alineación del texto. Está pensado para trabajar junto con el atributo align cuando presenta el valor "char". En otras situaciones será completamente ignorado.

Este atributo se ha vuelto obsoleto en HTML5 y su uso es consecuentemente inválido. Se aconseja a los autores reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<tr align="char" char="c">

charoff

Un desplazamiento, desde la primera aparición del carácter de alineación (especificado en el atributo char) y en la dirección del texto. El carácter resultante de este cálculo será el eje para la alineación del texto.

Para que este atributo sea considerado, el valor del atributo align debe ser "char" y el atributo char debe estar presente.

Este atributo es considerado obsoleto por HTML5 y su uso ya no es recomendado. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplo

<tr align="char" char="t" charoff="7">

valign

La alineación vertical del texto en todas las celdas de la fila. Existen cuatro valores posibles (insensibles a mayúsculas/minúsculas):

  • top: el texto se alinea a la margen superior.
  • middle: el texto es centrado verticalmente.
  • bottom: el texto se alinea a la margen inferior.
  • baseline: todas las celdas en una fila con esta misma alineación deberían tener su primera línea de texto en una línea base común.

Este atributo es obsoleto de acuerdo con el estándar HTML5 y, por lo tanto, inválido. Se aconseja a los autores evitar su uso y reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<tr valign="top">

bgcolor

Un color para rellenar el fondo del elemento.

El atributo bgcolor ha sido eliminado del estándar HTML5 debido a su naturaleza visual. Sus resultados pueden ser perfectamente logrados con hojas de estilo.

Ejemplo

<tr bgcolor="#00ccee">

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.