Se você gosta de webdesign e alguma vez já precisou criar uma tabela em um post do wordpress, com certeza deve ter se decepcionado com a complexidade de algo tão simples. Sim, existem plugins que se integram facilmente com o TinyMCE (editor visual de posts padrão do WordPress), como o MCE Table Buttons, porém estes plugins só criam o código HTML, não possuem nenhum tipo de função de estilos visuais. Isso significa que a tabela ficará transparente, sem bordas e cores de fundo.
Então o que precisamos é de estilo para as tabelas. Você pode encontrar diversos (feios) na internet, porém a maioria tem uma implantação difícil, requer alteração manual do código HTML das tabelas (para adicionar classe), não são tão dinâmicas e algumas até requerem códigos javascript extras. Ninguém quer ter esse tipo de trabalho sacal na hora de postar.
Por isso encontrei o Sticky Table Headers, uma tabela bonita com efeitos hover feita puramente utilizando CSS. Você pode acessar a página dela e conferir a documentação, mas no geral a implantação é bastante simples, bastando adicionar alguns códigos CSS ao seu tema WordPress.
Ao adicionar o código abaixo ao seu tema, automaticamente todas as tabelas irão assumir um design melhor, com efeitos hover sobre as linhas.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
table { border-collapse: collapse; margin-bottom: 3em; width: 100%; background: #fff; } td, th { padding: 0.75em 1.5em; text-align: left; } td.err { background-color: #e992b9; color: #fff; font-size: 0.75em; text-align: center; line-height: 1; } th { background-color: #31bc86; font-weight: bold; color: #fff; white-space: nowrap; } tbody th { background-color: #2ea879; } tbody tr:nth-child(2n-1) { background-color: #f5f5f5; transition: all .125s ease-in-out; } tbody tr:hover { background-color: rgba(129,208,177,.3); } /* For appearance */ .sticky-wrap { overflow-x: auto; overflow-y: hidden; position: relative; margin: 3em 0; width: 100%; } .sticky-wrap .sticky-thead, .sticky-wrap .sticky-col, .sticky-wrap .sticky-intersect { opacity: 0; position: absolute; top: 0; left: 0; transition: all .125s ease-in-out; z-index: 50; width: auto; /* Prevent table from stretching to full size */ } .sticky-wrap .sticky-thead { box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125); z-index: 100; width: 100%; /* Force stretch */ } .sticky-wrap .sticky-intersect { opacity: 1; z-index: 150; } .sticky-wrap .sticky-intersect th { background-color: #666; color: #eee; } .sticky-wrap td, .sticky-wrap th { box-sizing: border-box; } /* Not needed for sticky header/column functionality */ td.user-name { text-transform: capitalize; } .sticky-wrap.overflow-y { overflow-y: auto; max-height: 50vh; } |
Segue abaixo um exemplo dessas tabelas em um post:
| Comparativo entre Weblink & DigitalOcean NYC3 | ||
|---|---|---|
| Provedor | Digital Ocean NYC3 | Weblink |
| Teste de CPU: sysbench –test=cpu run | ||
| Total Time | 13.1092s | 13.0176s |
| Min Request | 1.20ms | 1.29ms |
| Avg Request | 1.31ms | 1.30ms |
| Max Request | 3.27ms | 1.61ms |