Como criar tabela estilizada
Neste tutorial mostro como criar uma tabela estilizada usando CSS e Html.
Introdução
Neste tutorial demonstro como criar tabela estilizada usando apenas Html e Css sem precisar utilizar bibliotecas externas.
Durante este tutorial vou demonstrar todos os passos desde o código que utilizei para implementar a estrutura da tabela quanto o código que utilizei para estilização da tabela.
Se preferir acompanhar de uma forma mais dinâmica este tutorial, estou disponibilizando um vídeo com todo processo de implementação da tabela,
Além do vídeo estou disponibilizando o código fonte, você pode obtê-lo tanto nesta página quanto no link do repositório do Github ao final desta caso queira fazer um fork do projeto.
Implementando a tabela estilizada
Antes de tudo o primeiro passo que devemos fazer e implementar toda a estrutura da página e da tabela, logo abaixo mostro o código que utilizei:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Estilizada</title>
<!-- Link da fonte está na descrição -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<table>
<tr>
<th> colspan="2">Rede Social</th>
<th>Nº de inscritos</th>
<th> colspan="2">Variação em 24h</th>
</tr>
<tr class="item">
<td> class="icone">
<img src="instagram-logo.svg" width="24" height="24">
</td>
<td>Instagram</td>
<td> class="right">1000</td>
<td> class="right positivo"> +40%</td>
<td>
<button> class="button">
Acessar
</button>
</td>
</tr>
<tr class="item">
<td> class="icone">
<img src="facebook-logo.svg" width="24" height="24">
</td>
<td>Facebook</td>
<td> class="right">-30</td>
<td> class="right negativo">4%</td>
<td>
<button> class="button">
Acessar
</button>
</td>
</tr>
<tr class="item">
<td> class="icone">
<img src="Twitter-logo.svg" width="24" height="24">
</td>
<td>Twitter</td>
<td> class="right">+20</td>
<td> class="right positivo">5%</td>
<td>
<button> class="button">
Acessar
</button>
</td>
</tr>
<tr class="item">
<td> class="icone">
<img src="youtube-logo.svg" width="24" height="24">
</td>
<td>Youtube</td>
<td> class="right">+2000</td>
<td> class="right positivo">20%</td>
<td>
<button> class="button">
Acessar
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
Uma breve explicação do código da estrutura acima.
No código acima foi definido a estrutura inicial da página e no corpo da página adicionei um container onde dentro estou implementando a estrutura da nossa tabela.
A tabela foi implementada da seguinte forma. adicione 4 colunas onde na primeira coluna a adicionei a imagem das redes sociais e nas colunas seguintes respectivamente informo a descrição da rede social, em seguida o número de inscritos, depois a variação de inscritos de acordo com um período e por ultimo a coluna que contém uma ação.
Depois de montarmos a estrutura da pagina e da tabela , já podemos aplicar a estilização, segue abaixo o código que utilizei na estilização:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100vw;
background-color: #fff;
}
.container{
color: #000;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 50%;
background-color: rgb(245,242,242);
padding: 2px 0;
border-radius: 5px;
-webkit-box-shadow: 3px 3px 3px 3px rgba(50, 50, 50, 0.77);
-moz-box-shadow: 3px 3px 3px 3px rgba(50, 50, 50, 0.77);
box-shadow: 3px 3px 3px 3px rgba(50, 50, 50, 0.77);
}
.container table{
width: 100%;
max-width: 800px;
border-collapse: collapse;
}
.container table tr th{
height: 56px;
font-size: 16px;
font-weight: 700;
letter-spacing: .25px;
text-align: left;
padding: 0 10px;
}
.container table tr.item td{
border-bottom: 1px solid #c8cacc;
padding: 0 10px;
}
.container table tr.item{
height: 60px;
}
.container table tr td.icone{
width: 5%;
}
.container table tr td {
vertical-align: middle;
width: 20%;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.25px;
}
.container table tr td .button{
font-size: 14px;
max-width: 90px;
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #0019ff;
border: 2px solid #0019ff;
border-radius: 5px;
background-color: transparent;
padding: 8px 10px;
min-height: 20px;
}
.container table tr td .button:hover{
background-color: #dbdef6;
}
.negativo{
color: #ed0818;
}
.positivo{
color: #00a971;
}
.right{
text-align: right;
}
Ao final da estilização acima o layout gerado será igual a figura abaixo:
Este foi apenas um breve tutorial de como é simples estilizar uma tabela.
Se preferir acompanhar este tutorial através de vídeo, abaixo segue o link deste tutorial no Youtube e o link do código fonte do projeto.
Vídeo:
