<tr> en HTML5El elemento <tr> (table row o "fila de tabla") en HTML5 es parte fundamental de la estructura de una tabla. Este elemento se utiliza para definir una fila en una tabla de HTML. Cada fila puede contener uno o varios elementos <td> (table data o "dato de la tabla") y/o elementos <th> (table header o "encabezado de la tabla").
<tr>Globales: Al igual que muchos otros elementos HTML, <tr> puede utilizar los atributos globales, que proporcionan capacidades comunes entre los elementos:
data- y permiten almacenar datos adicionales en el HTML.Atributos específicos: A partir de HTML5, no se han introducido atributos específicos exclusivos para el elemento <tr>. Sin embargo, anteriormente existían algunos atributos que estaban relacionados con el diseño visual y que han sido obsoletos en HTML5. Estos atributos son:
En HTML5, para definir estilos como colores de fondo, se recomienda el uso de CSS en lugar de estos atributos obsoletos.
<tr> en HTML5 con ejemplosEl uso de <tr> es bastante sencillo y esencial para la creación de tablas en HTML. A continuación se presentan unos ejemplos para ilustrar su uso.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Básico de Tabla</title>
</head>
<body>
<table border="1">
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
<tr>
<td>Ana</td>
<td>28</td>
<td>Madrid</td>
</tr>
<tr>
<td>Juan</td>
<td>35</td>
<td>Barcelona</td>
</tr>
<tr>
<td>Marta</td>
<td>22</td>
<td>Valencia</td>
</tr>
</table>
</body>
</html>En este ejemplo, <tr> se utiliza para definir cada fila de la tabla. La primera fila contiene encabezados con elementos <th>, y las filas subsecuentes contienen datos con elementos <td>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabla con Estilos CSS</title>
<style>
.highlight {
background-color: #f2f2f2;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<table border="1">
<tr class="highlight center">
<th>Producto</th>
<th>Precio</th>
<th>Cantidad</th>
</tr>
<tr>
<td>Manzanas</td>
<td>$2.50</td>
<td>10</td>
</tr>
<tr>
<td>Naranjas</td>
<td>$3.00</td>
<td>8</td>
</tr>
<tr>
<td>Plátanos</td>
<td>$1.20</td>
<td>15</td>
</tr>
</table>
</body>
</html>En este ejemplo, se aplica una clase CSS highlight a la fila de encabezado para darle un color de fondo gris claro, y una clase center para centrar el texto.
Estos ejemplos ilustran el uso práctico del elemento <tr> en HTML5, tanto en su forma básica como junto con el uso de estilos CSS para mejorar la presentación visual de una tabla.