August 22, 2024

Crear una Tabla en HTML

HTML/CSS

Elementos

// Abierto desde el padre
321b7f4a836344e18d0e0d3736388348?p=9d08c56e36124d8bab8ef8c42afcda9f&pm=c

// Original
9d08c56e36124d8bab8ef8c42afcda9f

Elementos de una Tabla en HTML

<table>: Es el contenedor principal de la tabla. Todo el contenido de la tabla debe estar dentro de este elemento.

<thead> (Table Head): Agrupa el conjunto de filas del encabezado de la tabla.

<tbody> (Table Body): Agrupa el conjunto de filas del cuerpo de la tabla.

<tfoot> (Table Foot): Agrupa el conjunto de filas del pie de la tabla, que suele contener resúmenes o totales.

<tr> (Table Row): Define una fila en la tabla. Cada fila de la tabla se crea con un elemento <tr>.

<th> (Table Header): Define una celda de cabecera en una fila. Estas celdas suelen contener encabezados para las columnas y, por defecto, su texto aparece en negrita y centrado.

<td> (Table Data): Define una celda de datos en una fila. Estas celdas contienen los datos de la tabla.

Estructura Completa de una Tabla

Vamos a ver cómo se combinan estos elementos para crear una tabla completa.

Paso 1: Crear la Estructura de la Tabla

Primero, definimos la estructura básica de la tabla con el elemento <table>:

htmlCopiar código
<table>
</table>

Paso 2: Agregar Secciones de la Tabla

Dentro de la tabla, agregamos las secciones usando <thead>, <tbody> y <tfoot>:

htmlCopiar código
<table>
    <thead>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Paso 3: Agregar Filas de Cabecera

Dentro de <thead>, agregamos filas de cabecera con el elemento <tr> y celdas de cabecera con <th>:

htmlCopiar código
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Paso 4: Agregar Filas de Datos

Dentro de <tbody>, agregamos filas de datos con el elemento <tr> y celdas de datos con <td>:

htmlCopiar código
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Paso 5: Agregar Filas de Pie de Tabla

Dentro de <tfoot>, agregamos filas de pie de tabla con el elemento <tr> y celdas de datos o cabecera con <td> o <th> según corresponda:

htmlCopiar código
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
            <td>Footer 3</td>
        </tr>
    </tfoot>
</table>

Ejemplo Completo

Aquí tienes un ejemplo completo de una tabla simple en HTML con todas las secciones:

htmlCopiar código
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table Example</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #000;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        tfoot td {
            font-weight: bold;
        }
    </style>
</head>
<body>

<h2>Example of an HTML Table</h2>

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
            <td>Footer 3</td>
        </tr>
    </tfoot>
</table>

</body>
</html>

Explicación del Ejemplo

Cabecera de la Tabla:

<thead>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
</thead>

Esta sección contiene una fila con tres celdas de cabecera (<th>), que actúan como encabezados de las columnas.

Cuerpo de la Tabla:

<tbody>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
    </tr>
    <tr>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
    </tr>
</tbody>

Esta sección contiene dos filas de datos, cada una con tres celdas de datos (<td>).

Pie de la Tabla:

<tfoot>
    <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
        <td>Footer 3</td>
    </tr>
</tfoot>

Esta sección contiene una fila con tres celdas, que pueden usarse para totales o resúmenes.

Estilos CSS:

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #000;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
    tfoot td {
        font-weight: bold;
    }
</style>

Estos estilos hacen que la tabla ocupe el 100% del ancho disponible, colapsan los bordes, agregan padding y borde a las celdas, establecen un color de fondo para las celdas de cabecera y hacen que el texto en el pie de la tabla sea en negrita.

Written by Pol Valle

I am particularly drawn to developing applications that are not only functional but also visually appealing and easy to use. I accomplish this by implementing SOLID principles and clean architecture, and applying testing to ensure quality.