Tablas html - HTML5 básico - Capítulo 5


En este capítulo vas a aprender a crear tablas html. Es un poco más complicado que todo lo que has visto hasta ahora. No te preocupes, iremos paso por paso y si te quedan dudas, no te lo pienses, déjame un comentario.

Las tablas se utilizan principalmente para organizar datos en ellas y presentarlos de una forma clara.

Para empezar, mira esta imagen. Este es un ejemplo de como se crea cada una de las celdas que forman la tabla. También te recomiendo mirar el vídeo, ya que siempre va bien ver el uso práctico de lo que vas aprendiendo en teórica.

Esquema de una tabla html

Las etiquetas table

Las etiquetas <table> </table> generan la tabla y encapsulan en ellas todo el contenido.

Las etiquetas de tabla tr

Para crear cada fila de la tabla lo harás con las etiquetas <tr> </tr> de table row (fila de tabla).

Dentro de las etiquetas de fila (tr) tienes dos opciones, poner etiquetas th o td. Esto es aplicable a todas las filas, incluída la primera de la tabla.

Las etiquetas de tabla th

Las etiquetas <th> </th> de table header (cabecera de tabla) son las etiquetas que se ponen para especificar la cabecera de la tabla. Es como en la imagen, ahí van los títulos como producto, categoría y precio en el ejemplo. Cada celda deberá tener su apertura y cierre, en este caso, se utilizan tres etiquetas th para tres celdas.

Las etiquetas de tabla td

Para crear cada celda de información como teclados, placa base AMD, 29€, gráficas, etc. de la tabla lo harás con las etiquetas <td> </td> de table data (dato de tabla).

Eso es todo con las tablas en este curso básico. Aquí tienes la tabla del vídeo en formato html para que hagas prácticas con ella.

Etiquetas HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tablas html</title>
</head>

<body>

    <table>
        <!--FILA 1-->
        <tr>
            <th>Producto</th>
            <th>Categoría</th>
            <th>Precio</th>
        </tr>

        <!--FILA 2-->
        <tr>
            <td>Teclado gaming</td>
            <td>Teclados</td>
            <td>29 €</td>
        </tr>

        <!--FILA 3-->
        <tr>
            <td>Portátil i3</td>
            <td>Portátiles</td>
            <td>315 €</td>
        </tr>

        <!--FILA 4-->
        <tr>
            <td>Monitor 24"</td>
            <td>Monitores</td>
            <td>124 €</td>
        </tr>

        <!--FILA 5-->
        <tr>
            <td>Tarjeta gráfica 8 GB</td>
            <td>Gráficas</td>
            <td>450 €</td>
        </tr>

        <!--FILA 6-->
        <tr>
            <td>Placa base AMD</td>
            <td>Placas base</td>
            <td>95 €</td>
        </tr>

</body>
</html>

Resultado en el navegador

Tabla html sin estilos

Las tablas en html son así, sin color y sin estilos. Para darle color y un aspecto personalizado tendrás que aprender CSS, es un curso que ya tengo empezado y que podrías hacer perfectamente al acabar este y el de html avanzado. No obstante, aunque aprendas CSS, debes aprender a crear el "esqueleto" con html y con CSS le darás la "piel".


Ejercicios de html

11- Crea una tabla de 4x5 (4 columnas y 5 filas). Esta tabla deberá llevar una cabecera, por lo que te queda una fila para la cabecera y cuatro para los datos. En la cabecera debes colocar lo siguiente: Vehículo, Precio, Velocidad y color en ese orden. En las 4 filas restantes, inventa modelos de coche (pueden ser reales si los conoces) y dales el precio que quieras y una velocidad máxima (o utiliza los de la imagen, aquí te doy a escoger). Debe quedar así:

Tabla de ejercicios html

La solución la encontrarás aquí: Haz click aquí.


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre Python, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.