Etiqueta tr

Índice

Ejemplos:

La etiqueta tr: Es la etiqueta que representa a una fila en una tabla, es decir, las tablas html están compuestas por un conjunto de filas. En conclusión la etiqueta <tr> es una etiqueta qué contiene celdas <td> y celdas de encabezado <th>.

La etiqueta <tr> podría estar presente como hijo de las siguientes etiquetas, <thead>, <tbody>, <tfoot> y <table>. En caso de que se declaren como hijo de la etiqueta <table>, debe ubicarse después de toda las etiquetas mencionadas anteriormente, excepto la etiqueta <tfoot>.

Importante: De la etiqueta <tr> en HTML5 han sido eliminados algunos atributos de versiones previas del estándar, las personas que aun usan estos atributos deberían de dejar de usar.

indice del tema

Ejemplos:

En este presente ejemplo tenemos a una tabla, dentro de ello tenemos, la parte del encabezado <thead>, asimismo tenemos la parte del cuerpo <tbody> y la parte de pie <tfoot> de la tabla. Las filas de esta tabla, son representadas con la etiqueta <tr>, esta etiqueta se encuentra presente en las tres partes de la tabla ya mencionadas anteriormente y contiene a un grupo de tres filas con sus respectivos celdas <td> o <th>. Los textos alineados, colores de cabecera, cuerpo y pie de la tabla son puestos desde la etiqueta <style>.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Tabla</title>
</head>
<style type="text/css">
    table,tr,th ,td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    table {
        color: green;
    }
    th{
        text-align: center;
    }
    td{
        text-align: center;
    }
</style>

<body>
    <table style="width: 100%; background-color: white">
      <thead style="background-color: black;">
       <tr>
           <th>ID</th>
           <th>nombre</th>
           <th>cantidad</th>
       </tr>
       </thead>
       <tbody>
        <tr>
            <td>1</td>
            <td>pedro</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2</td>
            <td>rosa</td>
            <td>3</td>
        </tr>
        </tbody>
        <tfoot></tfoot>
        <tfoot style="background-color: black">
            <tr>
           <th>ID</th>
           <th>nombre</th>
           <th>cantidad</th>
       </tr>
        </tfoot>
    </table>
</body>
</html>

En el siguiente ejemplo nos adentraremos más al tema, para ello aplicaremos algunos propiedades y atributos sobre filas <tr>.
En ocasiones tendríamos la necesidad de combinar celdas <td> en una fila <tr>, para ello tenemos los siguientes atributos:

Tenemos el atributo colspan, este atributo nos permite combinar uno o más celdas <td>.
además tenemos el atributo scope, este atributo indica que dicho celda que contiene este atributo.
Finalmente tenemos el atributo rowspan, este atributo nos permite combinar uno o más celdas celdas <td> verticalmente.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tabla</title>
</head>
<style type="text/css">
    table,tr,th ,td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    table {
        color: black;
    }
    th{
        text-align: left;
    }
    td{
        text-align: center;
    }
</style>
<body>
    <table style="width: 100%; background-color: aqua">
      <thead style="background-color: blue;">
       <tr>
           <th scope="col" colspan="2">Tabajo en ofina</th>
           <th scope="col">Trabajo en casa</th>
           <th scope="col">Estudios</th>
           <th scope="col">bagar</th>
       </tr>
       </thead>
       <tbody>
        <tr>
            <td>lunes</td>
            <td>martes</td>
            <td>miercoles</td>
            <td>jueves</td>
            <td rowspan="3">6 horas</td>
        </tr>
        <tr>
            <td>4 horas</td>
            <td>5 horas</td>
            <td>3 horas</td>
            <td>2 horas</td>
        </tr>
        <tr>
            <td colspan="4">leer</td>
        </tr>
        </tbody>
        <tfoot></tfoot>
        <tfoot style="background-color: blue">
            <tr>
           <th scope="col" colspan="2">Tabajo en ofina</th>
           <th scope="col">Trabajo en casa</th>
           <th scope="col">Estudios</th>
           <th scope="col">bagar</th>
       </tr>
        </tfoot>
    </table>
</body>
</html>

Nota: Antes de realizar tu primer tabla es importante conocer una estructura básica sobre una tabla en HTML, si usted quiere estructurar su primer tabla en HTML puede dirigirse a este link (clik), en dónde usted se entrará más información sobre tablas en HTML.