Trabajar con tablas en HTML

Las tablas nos sirven para tener estructurada cierta información, generar la vista de reportes, enlistar ciertos datos, etcétera y en este artículo mostraremos cómo trabajar con ellas en HTML de una manera fácil.

El lenguaje HTML se caracteriza por sus etiquetas, cada una de ellas hace una función en especifico, esta vez nos enfocaremos en las etiquetas necesarias para realizar una tabla.

Primero mostraré las etiquetas necesarias para la manipulación de tablas.

<table> – encargada de abrir una tabla
<thead> – cabecera de la tabla
<tbody> – cuerpo de la tabla
<tfoot> – pie de la tabla
<tr> – un registro o fila
<th> – una celda o columna perteneciente a la cabecera o al pie de la tabla
<td> – una celda o columna perteneciente a un registro
<caption> – define el titulo de la tabla
<colgroup> – agrupar columnas
<col> – especifica las propiedades y estilos de las columnas de un colgroup

Como sabrán en HTML cada etiqueta que se abre tiene que cerrarse o al menos la mayoría de estas, pero todas estas etiquetas enlistadas necesitan ser cerradas.

Ahora veremos un ejemplo practico del uso de una tabla.

Supongamos somos del equipo de desarrollo de una tienda, y nos dejan de tarea generar un reporte con las ventas de cada producto y el total de las sumas de estos, pero quieren que lo hagamos en HTML para publicarlo en su pagina web.

Generaríamos algo como lo siguiente.

Lo cual al momento de leerlo el navegador interpreta el código y lo muestra de la siguiente manera.

Reporte de Ventas
Nombre del producto Total vendido
Producto 1 $100.00
Producto 2 $100.00
Producto 3 $100.00
Producto 4 $100.00
Total: $400.00

Y así es como se manipulan las tablas en HTML, claro que es una tabla sin estilo, en un futuro podrán añadir estilos, dinamismo, etc.

Escrito por Edgar

Soy estudiante de Ciencias Computacionales de la Universidad Autónoma de Nuevo León y desarrollador de software enfocado a la web, especialmente, carritos y tiendas electrónicas.