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):

<table>
    <thead>
        <tr>
            <th>Materia</th>
            <th>Calificación</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Redes inalámbricas</td>
            <td>95</td>
        </tr>
        <tr>
            <td>Introducción a la inteligencia artificial</td>
            <td>98</td>
        </tr>
        <tr>
            <td>Compiladores e intérpretes</td>
            <td>70</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td><strong>Promedio</strong></td>
            <td>87.6</td>
        </tr>
    </tfoot>
</table>

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

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:

table {
    border-collapse: collapse;
}
 
table,
th,
td {
    border: 1px solid black;
}
 
th,
td {
    padding: 5px;
}

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

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.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/