Introducción

Las tablas en HTML son una herramienta poderosa para organizar y presentar datos de manera estructurada. En esta lección, aprenderás cómo crear una tabla básica, entenderás la estructura fundamental de una tabla en HTML y cómo utilizar las etiquetas principales.

Conceptos Clave

Etiquetas de Tabla:
- <table>: Define el contenedor de la tabla.
- <tr>: Define una fila en la tabla.
- <th>: Define una celda de encabezado en la tabla.
- <td>: Define una celda de datos en la tabla.
Estructura Básica:
- Una tabla se compone de filas (<tr>), y cada fila contiene celdas de encabezado (<th>) o celdas de datos (<td>).

Ejemplo Práctico

Vamos a crear una tabla simple que muestre información sobre algunos productos.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabla Básica</title>
</head>
<body>
    <h1>Lista de Productos</h1>
    <table border="1">
        <tr>
            <th>Producto</th>
            <th>Precio</th>
            <th>Cantidad</th>
        </tr>
        <tr>
            <td>Manzanas</td>
            <td>$1.00</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Plátanos</td>
            <td>$0.50</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Naranjas</td>
            <td>$0.80</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

Explicación del Código

Encabezado del Documento:
- <head>: Contiene metadatos sobre el documento.
- <meta charset="UTF-8">: Define la codificación de caracteres.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Asegura que la página se vea bien en todos los dispositivos.
- <title>: Define el título de la página.
Cuerpo del Documento:
- <h1>: Encabezado principal de la página.
- <table border="1">: Define una tabla con un borde de 1 píxel.
- <tr>: Define una fila en la tabla.
- <th>: Define una celda de encabezado en la tabla. En este caso, "Producto", "Precio" y "Cantidad".
- <td>: Define una celda de datos en la tabla. En este caso, los datos de los productos.

Ejercicio Práctico

Ejercicio 1: Crear una Tabla de Empleados

Crea una tabla que muestre información sobre empleados. La tabla debe tener las siguientes columnas: "Nombre", "Puesto" y "Salario".

Solución

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabla de Empleados</title>
</head>
<body>
    <h1>Lista de Empleados</h1>
    <table border="1">
        <tr>
            <th>Nombre</th>
            <th>Puesto</th>
            <th>Salario</th>
        </tr>
        <tr>
            <td>Juan Pérez</td>
            <td>Gerente</td>
            <td>$3000</td>
        </tr>
        <tr>
            <td>María López</td>
            <td>Asistente</td>
            <td>$1500</td>
        </tr>
        <tr>
            <td>Carlos García</td>
            <td>Desarrollador</td>
            <td>$2500</td>
        </tr>
    </table>
</body>
</html>

Retroalimentación

Error Común: Olvidar cerrar las etiquetas <tr>, <th>, o <td>. Asegúrate de que cada etiqueta de apertura tenga su correspondiente etiqueta de cierre.
Consejo: Usa la propiedad border en la etiqueta <table> para visualizar mejor la estructura de la tabla durante el desarrollo.

Conclusión

En esta lección, has aprendido la estructura básica de una tabla en HTML y cómo utilizar las etiquetas principales para crear una tabla simple. Practica creando diferentes tablas con diversos datos para familiarizarte con la estructura y las etiquetas. En la próxima lección, exploraremos cómo añadir encabezados y pies de tabla para mejorar la organización y presentación de tus datos.

Estructura Básica de una Tabla

Introducción

Conceptos Clave

Ejemplo Práctico

Explicación del Código

Ejercicio Práctico

Ejercicio 1: Crear una Tabla de Empleados

Solución

Retroalimentación

Conclusión

Curso de HTML

Módulo 1: Introducción a HTML

Módulo 2: Formateo de Texto en HTML

Módulo 3: Enlaces y Medios en HTML

Módulo 4: Tablas en HTML

Módulo 5: Formularios en HTML

Módulo 6: Elementos Semánticos de HTML5

Módulo 7: Técnicas Avanzadas de HTML

Módulo 8: Integración de HTML y CSS

Módulo 9: Diseño Web Responsivo

Módulo 10: Mejores Prácticas y Accesibilidad

Módulo 11: Proyecto: Construyendo un Sitio Web Completo