TABLAS EN HTML

 TABLAS EN HTML

Conceptos Clave de las Tablas HTML

Las tablas HTML se construyen con varios elementos clave:

1. <table>: Es el contenedor principal de toda la tabla.
2. <tr> (Table Row): Define una fila dentro de la tabla.
3. <th> (Table Header): Define una celda de encabezado. El texto dentro de un <th> suele mostrarse en negrita y centrado por defecto. Es semánticamente importante para la accesibilidad y los motores de búsqueda.
4. <td> (Table Data): Define una celda de datos estándar.
5. <caption>: Proporciona un título o descripción para la tabla. Es importante para la accesibilidad.
6. <thead>: Agrupa el contenido del encabezado de la tabla (las filas que contienen <th>).
7. <tbody>: Agrupa el contenido del cuerpo principal de la tabla (las filas que contienen <td>).
8. <tfoot>: Agrupa el contenido del pie de la tabla (puede usarse para resúmenes, totales, etc.).

Usar <thead>, <tbody>, y <tfoot> no solo organiza tu código, sino que también permite a los navegadores renderizar la tabla de manera más eficiente, especialmente tablas largas, y es útil para aplicar estilos CSS específicos.

Tutorial: Creando una Tabla Simple y Bien Estructurada

Vamos a crear una tabla que muestre una lista de nombres de frutas, su color y su precio por kilo.

Paso 1: El Contenedor Principal <table>
Todo comienza con la etiqueta <table>.

<table>

    <!-- Aquí irá el contenido de nuestra tabla -->

</table>

Paso 2: Añadir un Título con <caption>
Es una buena práctica darle un título descriptivo a tu tabla.

<table>

    <caption>Lista de Precios de Frutas</caption>

    <!-- ... -->

</table>

Paso 3: Definir el Encabezado de la Tabla con <thead> y <th>
El encabezado contendrá los títulos de nuestras columnas. Usaremos una fila (<tr>) con celdas de encabezado (<th>).

<table>

    <caption>Lista de Precios de Frutas</caption>

    <thead>

        <tr>

            <th>Fruta</th>

            <th>Color</th>

            <th>Precio (por Kg)</th>

        </tr>

    </thead>

    <!-- ... -->

</table>

• <th>Fruta</th>: Encabezado para la columna "Fruta".
• <th>Color</th>: Encabezado para la columna "Color".
• <th>Precio (por Kg)</th>: Encabezado para la columna "Precio".

Paso 4: Añadir el Cuerpo de la Tabla con <tbody> y <td>
Aquí es donde irán los datos reales. Cada fila (<tr>) contendrá celdas de datos (<td>) correspondientes a las columnas definidas en el encabezado.

<table>

    <caption>Lista de Precios de Frutas</caption>

    <thead>

        <tr>

            <th>Fruta</th>

            <th>Color</th>

            <th>Precio (por Kg)</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Manzana</td>

            <td>Rojo</td>

            <td>$2.50</td>

        </tr>

        <tr>

            <td>Banana</td>

            <td>Amarillo</td>

            <td>$1.80</td>

        </tr>

        <tr>

            <td>Uva</td>

            <td>Morado</td>

            <td>$4.00</td>

        </tr>

        <tr>

            <td>Naranja</td>

            <td>Naranja</td>

            <td>$2.20</td>

        </tr>

    </tbody>

    <!-- ... -->

</table>

Paso 5: (Opcional pero recomendado) Añadir un Pie de Tabla con <tfoot>
El pie de tabla puede usarse para mostrar totales, promedios o notas adicionales. Para este ejemplo, podríamos poner una nota.

<table>

    <caption>Lista de Precios de Frutas</caption>

    <thead>

        <tr>

            <th>Fruta</th>

            <th>Color</th>

            <th>Precio (por Kg)</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Manzana</td>

            <td>Rojo</td>

            <td>$2.50</td>

        </tr>

        <tr>

            <td>Banana</td>

            <td>Amarillo</td>

            <td>$1.80</td>

        </tr>

        <tr>

            <td>Uva</td>

            <td>Morado</td>

            <td>$4.00</td>

        </tr>

        <tr>

            <td>Naranja</td>

            <td>Naranja</td>

            <td>$2.20</td>

        </tr>

    </tbody>

    <tfoot>

        <tr>

            <td colspan="3">Precios sujetos a cambio sin previo aviso.</td>

        </tr>

    </tfoot>

</table>

• colspan="3": Este atributo en el <td> del <tfoot> indica que esta celda debe ocupar el espacio de 3 columnas. Esto es útil cuando quieres que una celda abarque varias columnas.

Paso 6: Ejemplo Completo y Práctico:

Atentos a la explicacion para que pueda realizar el ejercicio en clase

Copie en su cuaderno:

¿Qué es una tabla en html?

Una tabla en HTML es una estructura que te permite organizar y presentar datos en filas y columnas, de manera similar a una hoja de cálculo o una tabla en un documento. Se utiliza principalmente para mostrar datos tabulares, es decir, información que se entiende mejor cuando está dispuesta en una cuadrícula.

La instrucción td colspan="3" dentro de una tabla HTML sirve para hacer que una celda de datos (<td>) se extienda horizontalmente a lo largo de varias columnas, el valor de colspan="3" indica cuantas columnas se extendera

Orientación general de la actividad:

a. Crear en su USB una carpeta llamada: TABLAS, seleccionela desde VSCode

b. Cree una archivo llamado: "tabla.html" dentro de dicha carpeta usando VSCode

c. Copie y pegue el siguiente codigo html dentro del archivo que acaba de crear

d. Use Live Server (Go Live) para ver el resultado.

e. Atienda las explicaciones del profesor y realice la tarea que se explica.

f. Presente su resultado para calificar una vez lo haya resuelto.

Codigo del archivo "tabla.html"

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Tabla de Frutas</title>

    <style>

        /* Estilos básicos para mejorar la legibilidad (opcional) */

        table {

            width: 80%; /* Ancho de la tabla */

            margin: 20px auto; /* Centrar la tabla */

            border-collapse: collapse; /* Une los bordes de las celdas */

            font-family: Arial, sans-serif;

        }

        caption {

            font-size: 1.2em;

            margin-bottom: 10px;

            font-weight: bold;

        }

        th, td {

            border: 1px solid #dddddd; /* Bordes para celdas */

            text-align: left; /* Alineación del texto */

            padding: 8px; /* Espaciado interno en celdas */

        }

        th {

            background-color: #f2f2f2; /* Color de fondo para encabezados */

        }

        tbody tr:nth-child(even) {

            background-color: #f9f9f9; /* Color de fondo para filas pares (efecto cebra) */

        }

        tfoot td {

            font-style: italic;

            text-align: center;

            background-color: #e9e9e9;

        }

    </style>

</head>

<body>

 

    <h1>Ejemplo de Tabla HTML Bien Estructurada</h1>

 

    <table>

        <caption>Lista de Precios de Frutas (Actualizado Hoy)</caption>

        <thead>

            <tr>

                <th>Fruta</th>

                <th>Color Principal</th>

                <th>Precio (por Kg)</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>Manzana Fuji</td>

                <td>Rojo</td>

                <td>$2.50</td>

            </tr>

            <tr>

                <td>Banana Cavendish</td>

                <td>Amarillo</td>

                <td>$1.80</td>

            </tr>

            <tr>

                <td>Uva Red Globe</td>

                <td>Morado</td>

                <td>$4.00</td>

            </tr>

            <tr>

                <td>Naranja Valencia</td>

                <td>Naranja</td>

                <td>$2.20</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td colspan="3">Precios sujetos a cambio sin previo aviso. Consulte en tienda.</td>

            </tr>

        </tfoot>

    </table>

 

</body>

</html>

Buenas Prácticas Adicionales:

1. Usa tablas para datos tabulares: No uses tablas para diseñar el layout de tu página (para eso están CSS Flexbox y Grid).
2. Atributo scope: En los <th>, puedes usar el atributo scope para indicar explícitamente si el encabezado es para una columna (scope="col") o una fila (scope="row"). Esto mejora la accesibilidad.

Explicar

<thead>

    <tr>

        <th scope="col">Fruta</th>

        <th scope="col">Color</th>

        <th scope="col">Precio (por Kg)</th>

    </tr>

</thead>

3. Estilo con CSS: Separa la estructura (HTML) de la presentación (CSS). El ejemplo incluye CSS básico para mostrar cómo se puede estilizar.