Table Html Estilizada com Css

Neste Artigo vamos Formatar uma TABELA html com css.

com poucas linhas de códigos no css é possível deixar a tabela html com um formato certinho e com alguns efeitos.

Vamos começar com HTML

<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>

Baixar Código Veja Funcionando