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/