Espaciado y distribución

Lo primero que hay que hacer es solucionar los aspectos de espaciado/distribución; ¡el estilo por defecto de la tabla es tan apretado! Para ello, añadimos el CSS siguiente al archivo style.css:

Las partes más importantes que destacamos son:

• En general es una buena idea establecer un valor tablelayout (enUS)") en fixed para la tabla porque le proporciona un comportamiento predeterminado predecible. Normalmente se tiende a dar un tamaño de columna según la cantidad de contenido que haya en estas, lo que suele producir resultados extraños. Con tablelayout: fixed, puedes dar a las columnas un tamaño de acuerdo con el ancho de sus celdas de encabezado y a continuación gestionar los contenidos de la forma que te parezca más adecuada. Por esto hemos seleccionado los cuatro encabezados con el selector thead th:nthchild(n) (:nthchild) (Seleccionar el descendiente enésimo que es un elemento <th> en una secuencia dentro del elemento <thead> (enUS)")) y, dados estos, asignar los porcentajes de anchura.

Hemos emparejado esto con un width del 100%, que significa que la tabla llenará cualquier contenedor en la que se ubique, y presentará unas buenas características adaptativas (aunque podría requerir algo más de trabajo para que se vea bien en pantallas de anchuras estrechas).

• Un valor bordercollapse de collapse es una buena práctica estándar para cualquier tarea de aplicación de estilo a tablas. Por defecto, cuando estableces los bordes de los elementos de la tabla, quedará un espacio entre ellos, como se muestra en la imagen siguiente.

Esto no presenta un aspecto agradable (aunque puede ser el aspecto que buscas, ¡quién sabe!). Si estableces border-collapse: collapse;, los bordes se reducen a uno, y así presenta un aspecto mucho más agradable:

• Hemos puesto un borde (border) alrededor de la tabla, que es necesario, porque vamos a poner bordes en la cabecera de la tabla y después en el pie; queda raro e inconexo si no pones ningún borde a la tabla que la delimite del resto de los elementos del exterior y quedan huecos.
• Hemos puesto área de relleno (padding) en los elementos <th> y <td>; esto da a los datos espacio para que respiren y mejora la legibilidad de la tabla.

En este punto, nuestra tabla ya presenta un aspecto mucho más agradable: