Tabelas Html e Css Prontas

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