CSS: Formatar tabelas com estilo!

Gostas de musica Punk?

Este exercício é muito interessante e pode ser feito em 15 minutos!

A partir de uma tabela inicial, sem formatação e aborrecida vamos utilizar CSS para a formatar "over the top!"

Ver tabela inicial (aborrecida e sem formatação): mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html

Ver tabela "over the top!": mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html

Procedimentos

Os procedimentos para a toda a formação encontram-se no site da Mozilla. Segue os seguintes passos:

developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables

Se gostaste deste exemplo deves agora visitar o seguinte guião que explica tudo sobre o elemento Tabela:

Complete Guide to the Table Element: css-tricks.com/complete-guide-table-element/

Podes também utilizar este gerador automático de código CSS: divtable.com/table-styler/

Sabias que podes fazer toda a tabela só com DIVs e CSS?

Porquê utilizar só DIVs para fazer tabelas?

Para a página carregar mais rapidamente e permitir uma melhor adaptação aos dispositivos moveis (ecrãs mais pequenos).

Ver resposta em softwareengineering.stackexchange.com/questions/277778/why-are-people-making-tables-with-divs

Responsive data tables

[EN] Lê tudo em: css-tricks.com/responsive-data-tables/