Aprendizaje activo: Aplica estilo a tu tabla
En este punto, nos gustaría que tomes nuestro ejemplo de tabla HTML (¡o que uses uno propio!) y que le apliques estilo para obtener algo considerablemente mejor diseñado y menos llamativo que nuestra tabla.
Consejos rápidos para el diseño de tablas
Antes de seguir adelante, creemos que tendríamos que proporcionar una lista rápida de los puntos más útiles que acabamos de ilustrar:
- Haz el marcado de la tabla lo más simple posible y mantén las cosas flexibles. Por ejemplo, con el uso de porcentajes, para que el diseño sea más adaptativo.
- Usa tablelayout (enUS)"): fixed para crear un diseño de tabla más predecible que te permita establecer con facilidad los anchos de columna configurando width en sus encabezados (<th>).
- Usa bordercollapse: collapse para que los bordes de los elementos de la tabla colapsen entre sí y proporcionen una apariencia más ordenada y más fácil de controlar.
- Usa <thead> (enUS)"), <tbody> (enUS)") y <tfoot> (enUS)") para dividir la tabla en fragmentos lógicos y proporcionar lugares adicionales para aplicarle CSS, para superponer estilos entre sí con más facilidad, si es necesario.
- Usa rayas de cebra en filas alternativas para facilitar la legibilidad.
- Usa textalign para alinear el texto en tus elementos <th> y <td>, para ordenar los elementos y facilitar su legibilidad.