Ejemplo de tabla en HTML con bordes CSS

Introducción

Hoy veremos cómo crear una tabla en HTML pero de la manera correcta, porque incluso en estos tiempos es un poco confuso la manera de crear una tabla, o al menos la sintaxis a seguir para tener un lugar de donde copiar y pegar, o un ejemplo simple.

Veremos cómo ponerle bordes, poner encabezados y otras cosas.

Ejemplo de una tabla en HTML con bordes

Ya no podemos usar el atributo border="1" porque es algo obsoleto, soportado, sí, pero obsoleto. Para agregar bordes a una tabla de la manera correcta usamos CSS.

Pero antes de eso, vamos a ver cómo es una tabla en HTML.

Una tabla (que se representa con <table>) lleva un encabezado, definido por la etiqueta <thead>, y un cuerpo definido por <tbody>. Y dentro lleva table rows o filas de tabla, con la etiqueta <tr>. Si es un encabezado lleva table headers o <th> y si es cuerpo lleva table data con la etiqueta <td>.

Finalmente, podemos agregar un <tfoot> y dentro de él más filas y datos.

Código HTML de tabla estructurada

Veamos este código que crea una simple tabla de materias con calificaciones (tomar en cuenta que son datos para ejemplificar, y puede que no sean verídicos):

Vemos que en el encabezado usamos <th> en lugar de <td>. Luego, en el cuerpo utilizamos las bien conocidas <tr> con <td> dentro de ellas.

Al final, agregamos un pie con <tfoot> para mostrar el promedio.

Que quede claro que el encabezado y el pie son opcionales, pero existen y puede que algún día los necesitemos para que nuestro documento esté bien estructurado.

Hasta ahora, nuestra tabla se ve así:

Ejemplo de tabla en HTML
Ejemplo de tabla en HTML

Se ve bien estructurada, pero faltan los bordes.

Código CSS para agregar bordes a tabla

Finalmente podemos agregar código CSS. Ya sea en una hoja de estilos externa o en la cabecera de nuestro documento. En mi caso haré lo segundo porque es un ejemplo.

Por lo tanto, dentro de <head> abro una etiqueta de <style> y dentro pego:

Lo que hacemos primero es colapsar los bordes para que no se vean dobles. Después, únicamente a las filas y celdas les ponemos un borde negro de un pixel.

Finalmente, también agregamos un padding para que haya una separación entre los datos y los bordes.

Tabla completa con estilos

Finalmente si deseas explorar el código completo y verlo online, aquí dejo un plunker:

https://run.plnkr.co/plunks/aVla5ITAjHHhPhlssQ3h/

Conclusión

Así de fácil es crear una tabla. Si la creamos bien, podremos seguir los estándares. Además, algunos frameworks CSS agregan estilos dependiendo de la etiqueta, por ejemplo, pueden agregar automáticamente letras negritas en los <th> y si los ponemos como <td> ese estilo no se agregaría automáticamente.

Recomiendo saber bien la estructura de los elementos de HTML antes de usar un framework CSS.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario