Muitos querem saber como essa tabela da Premier League foi criada. Abaixo est\u00e3o descritas as etapas para criar tabelas b\u00e1sicas, modernas e interativas usando wpDataTables<\/a>.<\/p>\n Esta tabela \u00e9 baseada na skin Aqua. As modifica\u00e7\u00f5es foram feitas removendo a borda circundante. A tabela \u00e9 classificada automaticamente em ordem crescente, com base nas informa\u00e7\u00f5es da primeira coluna.<\/p>\n A formata\u00e7\u00e3o condicional para a coluna "#" \u00e9 a seguinte:<\/p>\n O CSS personalizado \u00e9 o seguinte:<\/p>\n Os emblemas foram retirados da segunda coluna. O exemplo do Liverpool mostra como os emblemas foram adicionados na coluna do tipo “string":<\/p>\n O CSS personalizado define as classes “badge-1” e “badge-1.t1”:<\/p>\n O posicionamento da imagem do escudo do clube \u00e9 selecionado pela segunda classe, conforme mostrado abaixo para todos os clubes da tabela classificativa:<\/p>\n As pr\u00f3ximas colunas s\u00e3o preenchidas com n\u00fameros inteiros. A \u00faltima coluna cont\u00e9m as estat\u00edsticas de vit\u00f3rias\/derrotas\/empates. Para chegar ao layout desejado \u00e9 preciso muita formata\u00e7\u00e3o condicional:<\/p>\n A formata\u00e7\u00e3o deve ser aplicada at\u00e9 o n\u00famero 20. Este \u00e9 o exemplo para o Liverpool:<\/p>\n Os detalhes para cada equipe ser\u00e3o diferentes. Todas as outras informa\u00e7\u00f5es s\u00e3o encontradas no CSS personalizado:<\/p>\n Algum trabalho e ajustes s\u00e3o necess\u00e1rios para que pare\u00e7a exatamente o mesmo, mas \u00e9 basicamente assim que \u00e9 feito.<\/p>\n Se voc\u00ea achou este aplicativo wpDataTables interessante, tamb\u00e9m d\u00ea uma olhada em algumas das outras tabelas da se\u00e7\u00e3o de demonstra\u00e7\u00e3o.<\/p>\n wpDataTables \u00e9 usado para gerar uma representa\u00e7\u00e3o gr\u00e1fica de dados estat\u00edsticos como gr\u00e1ficos.<\/p>\n Neste exemplo, as criptomoedas s\u00e3o classificadas em uma tabela usando wpDataTables. Voc\u00ea pode adicionar esta tabela de criptografia ao seu site.<\/p>\n Esta tabela pode ser usada para compara\u00e7\u00e3o de produtos. Por exemplo, se voc\u00ea tiver um site parceiro, a tabela poder\u00e1 exibir as caracter\u00edsticas dos modelos de laptop mais populares.<\/p>\n wpDataTables \u00e9 usado aqui para construir um relat\u00f3rio meteorol\u00f3gico de resumo mensal.<\/p>\n O plugin \u00e9 usado para criar uma tabela que mostra dados financeiros por pa\u00eds.<\/p>\n Esse estilo de tabela funciona bem para um site afiliado, como uma livraria.<\/p>\n wpDataTables pode criar uma lista de fundos m\u00fatuos, classificados por desempenho.<\/p>\n wpDataTables \u00e9 usado para mostrar a configura\u00e7\u00e3o do driver.<\/p>\n Se voc\u00ea trabalha com tabelas, aqui est\u00e3o alguns motivos pelos quais uma licen\u00e7a wpDataTables atender\u00e1 \u00e0s suas necessidades.<\/p>\n As tabelas criadas com o plugin wpDataTables s\u00e3o intr\u00ednsecas e totalmente responsivas. N\u00e3o h\u00e1 restri\u00e7\u00e3o quando se trata de plataformas ou tipos de dispositivos.<\/p>\n Mesas grandes n\u00e3o s\u00e3o um problema. wpDataTables lida com tabelas com milh\u00f5es de linhas de forma r\u00e1pida e confi\u00e1vel. O servidor MySQL processa todas as opera\u00e7\u00f5es.<\/p>\n Filtros individuais para seu conjunto de dados podem ser desenvolvidos. Isso \u00e9 muito \u00fatil para restringir os dados em uma tabela do WordPress.<\/p>\n wpDataTables tem a op\u00e7\u00e3o de torn\u00e1-lo edit\u00e1vel. O conte\u00fado das tabelas do WordPress pode, portanto, ser editado inline ou em um formul\u00e1rio gerado.<\/p>\n Nosso plugin de tabelas do WordPress tem uma funcionalidade semelhante \u00e0 Formata\u00e7\u00e3o Condicional no Excel. Dependendo do conte\u00fado, voc\u00ea pode destacar colunas, linhas ou c\u00e9lulas individuais.<\/p>\n Os dados nas tabelas do WordPress podem ser usados \u200b\u200bpara gerar gr\u00e1ficos do WordPress. Tr\u00eas poderosos motores s\u00e3o usados \u200b\u200bpara gerar esses gr\u00e1ficos, que s\u00e3o atualizados em tempo real.<\/p>\n O wpDataTables resolve com sucesso diferentes tarefas para mais de 30.000 clientes por dia. Isso inclui intera\u00e7\u00e3o com banco de dados, relat\u00f3rios de neg\u00f3cios, cat\u00e1logos, pain\u00e9is cient\u00edficos e muito mais.<\/p>\n wpDataTables tem sido uma solu\u00e7\u00e3o maravilhosa para n\u00f3s! J\u00e1 est\u00e1vamos muito impressionados com os recursos do plug-in imediatamente. Os plugins TMS trabalharam conosco para personaliz\u00e1-lo especialmente para nossas necessidades. As customiza\u00e7\u00f5es nos permitiram criar uma interface intuitiva para os clientes, para entrada e edi\u00e7\u00e3o de dados. O suporte ao cliente e a capacidade de resposta s\u00e3o inigual\u00e1veis. wpDataTables \u00e9 simplesmente um \u00f3timo produto.<\/p>\n<\/blockquote>\n -Sara Woodmansee, EUA. Fot\u00f3grafo e mapeamento geogr\u00e1fico na Geo1 \/ Aerial Filmworks<\/p>\n Do ponto de vista de um desenvolvedor web e do cliente, o wpDataTables \u00e9 um dos melhores plugins que encontrei. N\u00e3o s\u00f3 o pre\u00e7o \u00e9 bom, mas tamb\u00e9m a funcionalidade \u00e9 perfeita. Extremamente f\u00e1cil de usar e muito bem desenhado. Tem muitos recursos que se adequam a qualquer pessoa, desde iniciantes at\u00e9 n\u00edveis avan\u00e7ados. Os v\u00eddeos que complementam o plugin s\u00e3o bem explicados com muitos exemplos. Eu n\u00e3o posso enfatizar o suficiente o quanto isso tornou meu desenvolvimento web mais f\u00e1cil e legal.<\/p>\n<\/blockquote>\n \u2013 Nordine Benhamari, Reino Unido. Desenvolvedor Web, Designer de Banco de Dados no Thanet Volunteer Bureau<\/p>\n Se voc\u00ea gostou de ler este artigo sobre como criar a tabela da Premier League, confira este sobre os plugins do gerador de tabelas do WordPress .<\/a><\/p>\n Tamb\u00e9m escrevemos sobre alguns assuntos relacionados, como alternativa DataTables<\/a>, biblioteca de tabelas JavaScript<\/a>, plugins de tabela WordPress<\/a>, como criar uma tabela no WordPress sem plugin<\/a>, como inserir uma tabela no WordPress<\/a> e plugins de tabela de pre\u00e7os do WordPress.<\/a><\/p>\nComo criar a tabela da Premier League<\/h3>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-198192-61e8b5d2deae4.jpg\")
<\/a><\/p>\n.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd:hover td{background-color:#fffbf1 !important;}\n.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.grey,\n.wpdt-c .wpDataTablesWrapper table.wpDataTable td.grey{background-color: #dcdcdc !important;border-left: 1px solid #dcdcdc !important;}\n.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.blue,\n.wpdt-c .wpDataTablesWrapper table.wpDataTable td.blue{background-color: #0083c2 !important;border-left: 1px solid #0083c2 !important;}\n.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.red,\n.wpdt-c .wpDataTablesWrapper table.wpDataTable td.red{background-color: #d6181f !important;border-left: 1px solid #d6181f !important;}\n.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.lightblue,\n.wpdt-c .wpDataTablesWrapper table.wpDataTable td.lightblue{background-color: rgb(91,192,222) !important;border-left: 1px solid rgb(91,192,222) !important;}\n.white-text { color: #fff !important; }\n<\/code><\/pre>\n<span class=\"badge-1 t1\"><a href=\"<\/code><\/pre>\n.badge-1 {\u00a0\u00a0\u00a0 background-image: url(<\/code><\/pre>\n.badge-1.t1 {\u00a0\u00a0\u00a0 background-position: -250px -225px;}\n.badge-1.t2 {\u00a0\u00a0\u00a0 background-position: -250px -250px;}\n.badge-1.t3 {\u00a0\u00a0\u00a0 background-position: -275px -325px;}\n.badge-1.t4 {\u00a0\u00a0\u00a0 background-position: -150px -150px;}\n.badge-1.t5{\u00a0\u00a0\u00a0\u00a0\u00a0background-position: 0 -50px;}\n.badge-1.t6{\u00a0\u00a0\u00a0 background-position: -275px -200px;}\n.badge-1.t7 {\u00a0\u00a0\u00a0\u00a0\u00a0 background-position: -350px -75px;}\n.badge-1.t8 {\u00a0\u00a0\u00a0 background-position: -50px -125px;}\n.badge-1.t9 {\u00a0\u00a0\u00a0 background-position: -250px -125px;}\n.badge-1.t10 {\u00a0\u00a0\u00a0 background-position: -350px -250px;}\n.badge-1.t11 {\u00a0\u00a0\u00a0 background-position: 0 -200px;\n}\n.badge-1.t12 {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-position: -350px -125px;}\n.badge-1.t13 {\u00a0\u00a0\u00a0 background-position: -100px -100px;}\n.badge-1.t14{\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-position: -50px -175px;}\n.badge-1.t15 {\u00a0\u00a0\u00a0 background-position: -250px -225px;}\n.badge-1.t16 {\u00a0\u00a0\u00a0 background-position: -325px -250px;}\n.badge-1.t17 {\u00a0\u00a0\u00a0 background-position: -75px -150px;}\n.badge-1.t18 {\u00a0\u00a0\u00a0 background-position: -25px -150px;}\n.badge-1.t19 {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-position: -75px -225px;}\n.badge-1.t20 {\u00a0\u00a0\u00a0 background-position: -225px -100px;\u00a0\u00a0\u00a0 }\n<\/code><\/pre>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-198192-61e8b5d3e0a87.jpg\")
<\/a><\/p>\n<div class=\"score-last-6\">\n<span class=\"score-last-one win\"><\/span>\n<span class=\"score-last-one win\"><\/span>\n<span class=\"score-last-one win\"><\/span>\n<span class=\"score-last-one win\"><\/span>\n<span class=\"score-last-one win\"><\/span>\n<span class=\"score-last-one win\"><\/span>\n<\/div><\/code><\/pre>\n.score-last-6 {\u00a0\u00a0\u00a0 margin:0 auto;\u00a0\u00a0\u00a0 border-collapse: separate;\u00a0\u00a0\u00a0 display: table;\u00a0\u00a0\u00a0 border-spacing: 3px 0;\nheight:11px;\nvertical-align: middle;\n}\n\n.score-last-one{display: table-cell;\u00a0\u00a0\u00a0 height: .7em;\u00a0\u00a0\u00a0 width: .7em;}\n\n.win {background: #0083c2;}\n\n.lose{background: #d6181f;}\n\n.equal {background: #dcdcdc;}\n<\/code><\/pre>\nTabelas de Estat\u00edsticas com Gr\u00e1ficos<\/h3>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-198192-61e8b5d4c45fd.jpg\")
<\/a><\/p>\nTabela de classifica\u00e7\u00e3o de criptomoeda<\/h3>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-198192-61e8b5d5b2380.jpg\")
<\/a><\/p>\nCat\u00e1logo de laptops on-line<\/h3>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-198192-61e8b5d6a53b8.jpg\")
<\/a><\/p>\nPrevis\u00f5es do tempo<\/h3>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-198192-61e8b5d7bf387.jpg\")
<\/a><\/p>\nRelat\u00f3rios financeiros<\/h3>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-198192-61e8b5d8b81cc.jpg\")
<\/a><\/p>\nCat\u00e1logo de livros<\/h3>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-198192-61e8b5d9a6877.jpg\")
<\/a><\/p>\nFundos m\u00fatuos<\/h3>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-198192-61e8b5da9bac4.jpg\")
<\/a><\/p>\nCat\u00e1logo de Drivers<\/h3>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-198192-61e8b5db8e6a4.jpg\")
<\/a><\/p>\nJunte-se \u00e0 comunidade wpDataTables<\/h2>\n
\n
Crie tabelas e gr\u00e1ficos responsivos do WordPress<\/h3>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-198192-61e8b5dcc2750.png\")
<\/a><\/p>\nCriar tabelas grandes<\/h3>\n
Filtros avan\u00e7ados e op\u00e7\u00f5es de pesquisa<\/h3>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-198192-61e8b5dedc0ff.png\")
<\/a><\/p>\nEditabilidade<\/h3>\n
Destaque de c\u00e9lula<\/h3>\n
Criar gr\u00e1ficos<\/h3>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-198192-61e8b5e1cb8c7.png\")
<\/a><\/p>\nAlgumas avalia\u00e7\u00f5es que recebemos ao longo dos anos<\/h3>\n
\n
\n