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