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, 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.

Como crear una tabla html

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.

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. 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

  1. 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, Velocidad y Color en 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í:
    2. 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.