Etiqueta tr

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.

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>

ejemplo de etiqueta tr

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>

ejemplo con celdas combinadas en 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.

vamos al inicio

¿Quieres aprender mas?, entonces también te puede interesar

Añadir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *