Ahora arreglaremos un poco nuestro texto.
En primer lugar, hemos ido a Google Fonts y hemos encontrado un tipo de letra adecuado para una tabla sobre bandas punk. Puedes buscar uno diferente si lo deseas; solo tienes que reemplazar el elemento <link> que te hemos proporcionado y la declaración font-family personalizada por las que te proporcione Google Fonts.
Primero, añade el elemento <link> siguiente a tu encabezado HTML, justo encima del elemento <link>:
.png "carbon(313).png")
Ahora añade el CSS siguiente a tu archivo style.css, debajo de la línea añadida anterior:
.png "carbon(314).png")
En realidad aquí no hay nada que sea específico para las tablas. En general, modificamos el estilo de la letra para facilitar la lectura:
- Hemos establecido una lista global de fuentes Sans Serif. Esto es puramente una elección de estilo. También hemos configurado nuestro tipo de letra personalizada en los encabezados que hay dentro de los elementos <thead> (enUS)") y <tfoot> (enUS)") para dotarlos de una encantadora sucia estética punk.
- Hemos establecido algunos letterspacing (enUS)") en los encabezados y las celdas, porque creemos que ayuda a la legibilidad. De nuevo es, sobre todo, una elección estilística.
- Hemos establecido en el elemento <tbody> (enUS)") el centrado del texto en las celdas de la tabla para que se queden alineadas con los encabezados. Por defecto, en textalign se asigna un valor left para las celdas, y un valor center para los encabezados, pero a menudo queda mejor disponer las alineaciones de texto establecidas de la misma manera en ambos. El peso predeterminado para la negrita en los tipos de letra de los encabezados basta para diferenciar su aspecto.
- Hemos establecido el texto del encabezado alineado a la derecha en el elemento <tfoot> (enUS)") para que visualmente quede mejor asociado con sus datos.
El resultado se ve un poco más limpio:
