- Página Inicial
- Códigos CSS Prontos
- Tabelas Html e Css Prontas
- Voltar
Tabelas Html e Css Prontas
Neste artigo passo a passo veja como formatar tabelas html com css, mesmo com pouco conhecimento na área do desenvolvimento.
com poucas linhas de códigos no css é possível deixar a tabela html com um formato certinho e com alguns efeitos.
Estrutura Base Html e Css
A estrutura base do nosso pequeno projeto vai ser composto por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css.
Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.
Nesta seção, projetaremos uma estrutura simples nas tags a <div>, <table>, <tbody>, <tr> e <td>.
Essas tags que usaremos para criar a nossa Tabelas Html Estilizada com Css.
Estrutura Código HTML
A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.
Nesta seção, usaremos algumas as tags HTML para formatar a tabela.
<div class="style-tabela"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td class="top center"><i class="icofont-users-alt-4"></i></td> <td class="top center"><strong>Nome</strong></td> <td class="top center"><strong>E-mail</strong></td> <td class="top center"><strong>Data de Cadastro</strong></td> <td class="top center" colspan="2" width="1"><strong>Ações</strong></td> </tr> </tbody> <tbody> <tr> <td align="center">1</td> <td align="center">Pedro</td> <td align="center">predro@site.com.br</td> <td align="center">25/04/2021 <strong>às</strong> 01:03:02</td> <td align="center"> <a href="#" class="editar fa fa-fa fa-check-circle" title="Editar"></a> </td> <td align="center"> <a href="#" class="deletar fa fa-times-circle" title="Deletar"></a> </td> </tr> <tr class="mensagemAlerta"> <td align="center">2</td> <td align="center">Lucas</td> <td align="center">lucas@site.com.br</td> <td align="center">25/04/2021 <strong>às</strong> 01:03:02</td> <td align="center"> <a href="#" class="editar fa fa-fa fa-check-circle" title="Editar"></a> </td> <td align="center"> <a href="#" class="deletar fa fa-times-circle" title="Deletar"></a> </td> </tr> <tr> <td align="center">3</td> <td align="center">Carla</td> <td align="center">carla@site.com.br</td> <td align="center">25/04/2021 <strong>às</strong> 01:03:02</td> <td align="center"> <a href="#" class="editar fa fa-fa fa-check-circle" title="Editar"></a> </td> <td align="center"> <a href="#" class="deletar fa fa-times-circle" title="Deletar"></a> </td> </tr> <tr> <td align="center">4</td> <td align="center">Monica</td> <td align="center">monica@site.com.br</td> <td align="center">25/04/2021 <strong>às</strong> 01:03:02</td> <td align="center"> <a href="#" class="editar fa fa-fa fa-check-circle" title="Editar"></a> </td> <td align="center"> <a href="#" class="deletar fa fa-times-circle" title="Deletar"></a> </td> </tr> <tr> <td align="center">5</td> <td align="center">Alex</td> <td align="center">alex@site.com.br</td> <td align="center">25/04/2021 <strong>às</strong> 01:03:02</td> <td align="center"> <a href="#" class="editar fa fa-fa fa-check-circle" title="Editar"></a> </td> <td align="center"> <a href="#" class="deletar fa fa-times-circle" title="Deletar"></a> </td> </tr> </tbody> </table> </div><!--tabela-->
Vamos Adicionar o Css para formatação:
Reparem que adicionei uma classe na div e no css (.style-tabela).
.style-tabela table{ float:left; border:1px solid #ccc; border-bottom:0; border-right:0; font-size:0.8em; } .style-tabela table tr td { padding:0.5em; border:1px solid #ccc; border-top:0; border-left:0;} .style-tabela table td.top { background-color:#00bcc4; color:#fff; font-size:1.2em;} .style-tabela table td.top.center {text-align: center;} .style-tabela table td.total { text-align:left; font-weight: bold;} .style-tabela table td.top-toltip{ background-color:#207d97; height:25px; color:#fff; font-size:16px;} .style-tabela tbody tr td {padding:0.3em; border:1px solid #ccc; border-top:0; border-left:0;} .style-tabela tbody tr {background-color:#fff; color:#666;} .style-tabela tbody tr:hover {background-color:#f4f4f4; color:#00bcc4;} .style-tabela tbody tr td .editar { color:#00d549; font-size:1.2em; font-weight:bold; display:inline; text-decoration:none;} .style-tabela tbody tr td .deletar { color:#bf303c; font-size:1.2em; font-weight:bold; display:inline; text-decoration:none; } .style-tabela tbody tr.mensagemAlerta { background-color:#fdeeef; color:#bf303c;}
Por fim utilizei uma Biblioteca de icones.
Vejam abaixo:
Insere este link na sua página <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> Chamando o icones através de Classes: <a href="#" class="editar fa fa-check-circle" title="Editar"></a> </td> <a href="#" class="deletar fa fa-times-circle" title="Deletar"></a> </td>
Tabela Html Estilizada com Css Veja o Resultado!
Baixar Código Veja Funcionando
Gerador de Tabelas Html e CSS
Você está procurando uma maneira rápida e fácil de criar tabelas HTML e CSS Prontas?
O nosso Gerador de tabelas HTML é uma ferramenta online para criar tabelas com opções personalizáveis. É gratuito e muito pratico de usar. Basta preencher todas as opções necessárias e obter o resultado desejado!
Gere tabelas HTML e CSS para sites em algumas etapas fáceis. Você pode especificar o número de linhas e colunas e definir outras opções conforme desejar, por exemplo, um cabeçalho, borda, alinhamento.
O Gerador de tabelas HTML e CSS cria automaticamente o código HTML. Essa ferramenta foi projetada para permitir que você obtenha uma tabela HTML necessária e a coloque on-line o mais rápido possível sem ter conhecimento em html e css. Basta copiar e colar o código HTML gerado no código fonte do seu site.
O Gerador de tabela HTML online gratuito funciona em qualquer navegador moderno como Chrome, Firefox, Edge ou Safari. A nossa ferramenta é compatível com todos os dispositivos de PC, smartphones e tablets. Esperamos que essa ferramenta seja útil para pessoas que precisam de uma tabela para um site, documento relacionado a HTML ou blog. Em outras palavras, para quem quer criar rapidamente uma tabela HTML.
Veja o Gerador de Tabelas ONLINE
Publicado por: Loop Nerd
4.186 Visualizações
Deixe um comentário