HTML tr
La etiqueta <tr> en HTML representa una fila en una tabla. Es utilizada dentro de una etiqueta <table> para definir una fila de celdas, las cuales son contenidas dentro de etiquetas <td> o <th> (que representan una celda de datos o una celda de encabezado, respectivamente).
Ejemplo de uso
Un ejemplo de uso de la etiqueta <tr> sería:
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
Lenguaje del código: HTML, XML (xml)En este ejemplo se crean dos filas en una tabla, cada una con tres celdas dentro. El contenido de cada celda es “Celda 1”, “Celda 2”, etc.
Atributos
La etiqueta <tr> no tiene atributos específicos, pero se pueden usar atributos como class, style y id para aplicar estilos.
También se pueden utilizar atributos como align, valign y bgcolor para alinear y cambiar el color de fondo de una fila. Sin embargo, es recomendable utilizar CSS en lugar de estos atributos para aplicar estilos, ya que son considerados obsoletos en HTML5.
Ejemplos
Aquí te muestro un ejemplo de cómo utilizar algunos de los atributos de la etiqueta <tr> en HTML5:
<!DOCTYPE html>
<html>
<head>
<style>
/* Estilos para las celdas de encabezado */
th {
background-color: #ddd;
}
/* Estilos para las celdas de datos */
td {
text-align: center;
padding: 8px;
}
/* Estilos para las filas con el ID data-row-1 */
#data-row-1 {
background-color: #f2f2f2;
}
/* Estilos para las filas con la clase highlight-row */
.highlight-row {
vertical-align: top;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr id="data-row-1" class="highlight-row">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr id="data-row-2" class="highlight-row">
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se ha utilizado el atributo id para especificar un identificador único para la fila y el atributo class para especificar una o varias clases para la fila, y se han aplicado estilos en el archivo CSS para personalizar la alineación horizontal y vertical de las celdas, y el color de fondo de una fila.
Es importante mencionar que en este caso, se ha usado las propiedades CSS background-color, vertical-align y text-align en lugar de los atributos bgcolor, valign y align respectivamente, ya que estos últimos son considerados obsoletos en HTML5, y se recomienda utilizar las propiedades CSS en su lugar para estilizar los elementos HTML.
Además, usando las propiedades CSS se tiene un mayor control y flexibilidad en la personalización de los estilos.
