Capitulo 7 ➜ Tablas HTML

Aprender a crear tablas y agregar contenido dentro de sus celdas.

Crear tablas HTML.

Organizar contenido de mi página web.

 Las tablas HTML permiten organizar los datos en filas y columnas.

La etiqueta define una tabla HTML

• Cada fila de la tabla se define con una etiqueta

• Cada encabezado de la tabla se define con una etiqueta

Mi primera página web

En HTML, puedes crear tablas para organizar datos en filas y columnas utilizando las etiquetas <table>, <tr> (fila), <th> (encabezado de columna) y <td> (celda de datos). Aquí tienes un ejemplo de cómo crear una tabla sencilla:

<table>
    <tr>
        <th>Nombre</th>
        <th>Edad</th>
        <th>País</th>
    </tr>
    <tr>
        <td>Juan</td>
        <td>25</td>
        <td>España</td>
    </tr>
    <tr>
        <td>Maria</td>
        <td>30</td>
        <td>México</td>
    </tr>
    <tr>
        <td>Carlos</td>
        <td>22</td>
        <td>Argentina</td>
    </tr>
</table>

En este ejemplo:

• <table>: Define la tabla.
• <tr>: Define una fila de la tabla.
• <th>: Define una celda de encabezado de columna, que generalmente se muestra en negritas y centrada.
• <td>: Define una celda de datos, que contiene información específica.

Puedes personalizar tu tabla agregando más filas y columnas, así como aplicando estilos con CSS para mejorar la apariencia. A continuación, te muestro cómo agregar bordes a la tabla utilizando CSS:

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

El CSS anterior establece un borde sólido en todas las celdas de la tabla y ajusta el espaciado interior de las celdas. También hace que la tabla ocupe el 100% del ancho disponible.

Recuerda que este es un ejemplo básico de cómo crear una tabla en HTML. Puedes personalizar aún más tu tabla, agregar encabezados adicionales, combinar celdas y aplicar estilos según tus necesidades y preferencias. Las tablas son útiles para mostrar datos de manera organizada en tu página web.