Tabelas Responsivas em HTML5 e CSS

28/09/2018

Neste vídeo tutorial vamos fazer uma simples tabela responsiva utilizando HTML5 e CSS.

Tabela responsivas para sites

No nosso html linkaremos nossa folha de estilos e criaremos uma tag table simples. Vale lembrar da importância da meta-tag viewport conforme exemplificado abaixo:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tabelas Responsivas</title>
    <link rel="stylesheet" href="style.min.css">
</head>

<body>
<div class="content">
    <table class="rTable">
        <thead>
            <tr>
                <th>Id</th>
                <th>Nome</th>
                <th>Sexo</th>
                <th>Idade</th>
                <th>Email</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>Thiago</td>
                <td>Masculino</td>
                <td>20</td>
                <td>webdesignemfoco@gmail.com</td>
            </tr>

            <tr>
                <td>2</td>
                <td>Thaís</td>
                <td>Feminino</td>
                <td>19</td>
                <td>thais@gmail.com</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

A mágica ocorre no CSS. Utilizaremos duas media-queries pra exemplificar, você pode utilizar mais caso queira:

*{margin:0; padding: 0; box-sizing: border-box;}

.content{display:flex; margin: auto;}

.rTable{width: 100%; text-align: center;}
    .rTable thead{background: black; font-weight: bold; color:#fff;}
    .rTable tbody tr:nth-child(2n){background: #ccc;}
    .rTable th , .rTable td{padding: 7px 0;}

@media screen and (max-width: 480px){
    .content{width: 94%;}

    .rTable thead{display:none;}
    .rTable tbody td{display: flex; flex-direction: column; }
}

@media only screen and (min-width: 1200px){
    .content{width:100%;}
    .rTable tbody tr td:nth-child(1){width:10%;}
    .rTable tbody tr td:nth-child(2){width:30%;}
    .rTable tbody tr td:nth-child(3){width:20%;}
    .rTable tbody tr td:nth-child(4){width:10%;}
    .rTable tbody tr td:nth-child(5){width:30%;}
}

Repare que no código acima estilizamos a class rTable da nossa tabela. Estilizamos também para resoluções maiores as colunas com tamanhos personalizados utilizando o seletor nth-child.

Sucesso nos códigos e na vida!

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Efeitos com Animate CSS

Nesse tutorial aprenderemos como fazer animações simples utilizando o Animate.css. Aprenderemos a fazer animações com CSS puro e utilizando javascript.

Template com CSS Grid - #1 Introdução

Nesse tutorial iniciaremos o curso de CSS Grid onde aprenderemos como criar um layout responsivo completo utilizando os grids da folha de estilo em cascata.

CSS

As folhas de estilo em cascata (CSS) são responsáveis pela estilização e design do nosso website.