Etiqueta <tr> de HTML

Definición y uso

<tr> etiquetas definen filas en una tabla HTML.

<tr> Los elementos <th> contienen uno o más <th> o <td> Elemento.

Véase también:

Tutorial de HTML:Tabla de HTML

Manual de referencia de HTML DOM:Objeto TableRow

Tutorial de CSS:Configuración de estilos de tabla

Ejemplo

Ejemplo 1

Una tabla HTML simple de tres filas; una fila de encabezado y dos filas de datos:

<table>
  <tr>
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥4500</td>
  </tr>
</table>

Pruebe por su propia cuenta

Ejemplo 2

¿Cómo alinear?: <tr> el contenido (usando CSS):

<table style="width:100%">
  <tr>
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr style="text-align:right">
    <td>Febrero</td>
    <td>￥3400</td>
  </tr>
</table>

Pruebe por su propia cuenta

Ejemplo 3

¿Cómo agregar un color de fondo a una fila de tabla (usando CSS)?:

<table>
  <tr style="background-color:#FF0000">
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥3400</td>
  </tr>
 </table>

Pruebe por su propia cuenta

Ejemplo 4

¿Cómo alinear verticalmente?: <tr> el contenido (usando CSS):

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr style="vertical-align:bottom">
    <td>Febrero</td>
    <td>￥3400</td>
  </tr>
</table>

Pruebe por su propia cuenta

Ejemplo 5

¿Cómo crear un encabezado de tabla?:

<table>
  <tr>
    <th>Nombre</th>
    <th>Correo electrónico</th>
    <th>Teléfono</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Pruebe por su propia cuenta

Ejemplo 6

¿Cómo crear una tabla con encabezado?:

<table>
  <caption>Ahorros mensuales</caption>
  <tr>
    <th>Mes</th>
    <th>Ahorros</th>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>￥4500</td>
  </tr>
</table>

Pruebe por su propia cuenta

Ejemplo 7

¿Cómo definir celdas de tabla que se extienden a través de múltiples filas o columnas?:

<table>
  <tr>
    <th>Nombre</th>
    <th>Correo electrónico</th>
    <th colspan="2">Teléfono</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Pruebe por su propia cuenta

Atributos globales

<tr> La etiqueta también admite Atributos globales en HTML.

Atributos de evento

<tr> La etiqueta también admite Atributos de evento en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los siguientes valores predeterminados <tr> Elemento:

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

Compatibilidad del navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte