Las tablas HTML
Capítulo 5: ¿Cómo funcionan y se crean las tablas en HTML?
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, pero no te preocupes, iremos paso por paso y si te quedan dudas, no te lo pienses, déjame un comentario.
Las tablas html 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.
Las etiquetas table de html
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 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 teclado gaming, 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.
<!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>
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. Ten en cuenta, que aunque aprendas CSS, debes aprender a crear el "esqueleto" (estructura) con html, ya que con CSS le darás solo la "piel" (diseños).
Ejercicios de html
- Crea una tabla de 4x5 (cuatro columnas y cinco 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,VelocidadyColoren ese orden. En las cuatro 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í:
La solución la encontrarás aquí: Haz click aquí.
Comentarios
Si te quedan dudas sobre el temario, sobre html, 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.
