TABLAS EN HMTL

Índice

CONCEPTO DE TABLAS EN HTML
- Ejemplo de tablas en HTML:
CELDA DE ENCABEZADO
EL ATRIBUTO SCOPE
EL ATRIBUTO COLSPAN

En este presente pagina hablaremos sobre las tablas en HTML, analizaremos su estructura y sus propiedades. nos enfocaremos en las tablas que utilizamos al realizar documentos, sistemas, aplicaciones de paginas web y etc.

CONCEPTO DE TABLAS EN HTML

Una tabla es una forma de organizar datos en filas y columnas, a la agrupación de la tabla se le conoce con la etiqueta <table>, para crear una fila es la etiqueta, <tr> y para crear una columna es la etiqueta <td>. Tengan en cuenta una tabla es una agrupación de filas y columnas.

Ejemplo de tablas en HTML:

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

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

    table {
        color: black;
    }
</style>

<body>
    <table style="width: 100%; background-color: aqua">
        <tr>
            <td>fila 1 columna 1</td>
            <td>fila 1 columna 2</td>
            <td>fila 1 columna 3</td>
        </tr>
        <tr>
            <td>fila 2 columna 1</td>
            <td>fila 2 columna 2</td>
            <td>fila 2 columna 3</td>
        </tr>
    </table>
</body>

</html>

CELDA DE ENCABEZADO

Ya teniendo conocimientos básicos sobre una tabla, nos toca hacer tablas con mas utilidades.

Una celda de encabezado, es una manera de agrupar celdas por clases o tipos, de una manera ordenada y podemos agrupar poniendo encabezado por fila o columna.

Su representación de una celda de encabezado es con la etiqueta <th>, esto es ubicado en la primera fila de la tabla, es decir ubicados encima de las celdas comunes.

Para major entendimiento les dejo un ejemplo con celda de encabezado.

<!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;
    }
</style>

<body>
    <table style="width: 100%; background-color: aqua">
       <tr>
           <th>encabezado 1</th>
           <th>encabezado 2</th>
           <th>encabezado 3</th>
       </tr>
        <tr>
            <td>fila 1 columna 1</td>
            <td>fila 1 columna 2</td>
            <td>fila 1 columna 3</td>
        </tr>
        <tr>
            <td>fila 2 columna 1</td>
            <td>fila 2 columna 2</td>
            <td>fila 2 columna 3</td>
        </tr>
    </table>
</body>

</html>

EL ATRIBUTO SCOPE

El atributo scope nos ayuda a definir si una celda de encabezado <th> es un encabezado para una columna, para una fila o un grupo de columnas y filas.

<!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;
    }
</style>

<body>
    <table style="width: 100%; background-color: aqua">
       <tr>
           <th scope="col">encabezado 1</th>
           <th scope="col">encabezado 2</th>
           <th scope="col">encabezado 3</th>
       </tr>
        <tr>
            <td>fila 1 columna 1</td>
            <td>fila 1 columna 2</td>
            <td>fila 1 columna 3</td>
        </tr>
        <tr>
            <td>fila 2 columna 1</td>
            <td>fila 2 columna 2</td>
            <td>fila 2 columna 3</td>
        </tr>
    </table>
</body>

</html>

En nuestro caso estamos indicando con el valor "col" el elemento <th> es el encabezado de una columna. es decir el "encabezado 1" es encabezado "de columna 1", "encabezado 2" es encabezado de "columna 2" y el "encabezado 3" es encabezado de "columna 3".

EL ATRIBUTO COLSPAN

El atributo colspan define el numero de columnas que un encabezado <th> abarcará en el caso el "encabezado 1" del ejemplo es de 2 columnas.

<!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;
    }
</style>

<body>
    <table style="width: 100%; background-color: aqua">
       <tr>
           <th scope="col" colspan="2">encabezado 1</th>
           <th scope="col">encabezado 2</th>
           <th scope="col">encabezado 3</th>
       </tr>
        <tr>
            <td>lunes</td>
            <td>martes</td>
            <td>miercoles</td>
            <td>jueves</td>
        </tr>
        <tr>
            <td>4 horas</td>
            <td>5 horas</td>
            <td>3 horas</td>
            <td>2 horas</td>
        </tr>
    </table>
</body>

</html>

En este caso el "encabezado 1", contiene dos columnas como se ve en el imagen superior y con los de mas encabezados no hay ningún problema, por que solo contienen una columna.