{ Sketch }

Guia de aprendizado

Design responsívo: tabelas

As tabelas devem ser utilizadas para apresentar dados e não para organizar o layout de um website. Sketch formatou as tabelas de forma que cada coluna disponha de um preenchimento de 16px, sendo possível alterar esse preenchimento conforme a necessidade.

Veja o exemplo:

<div class="container overflow-x">         <table>                   <tr>                            <th>                                     Coluna 1                            </th>                            <th>                                     Coluna 2                            </th>                   </tr>                   <tr>                            <td>                                     Valor 1                            </td>                            <td class="no-padding">                                    <table>                                             <tr>                                                      <td>                                                                Sub-valor 1                                                      </td>                                             </tr>                                             <tr>                                                      <td>                                                                Sub-valor 2                                                      </td>                                             </tr>                                             <tr>                                                      <td>                                                                Sub-valor 3                                                      </td>                                             </tr>                                    </table>                            </td>                   </tr>         </table></div>

Esse código irá resultar nos seguintes conteúdos:

Coluna 1

Coluna 2

Valor 1

Sub-valor 1

Sub-valor 2

Sub-valor 3

Dica:

Note que na primeira linha do código acima foi utilizada a classe overflow-x. Essa classe torna um bloco de conteúdo passível de ter barra de rolagem caso seu conteúdo possua uma largura maior que a disponível por seu contêiner. Isso torna possível criar tabelas responsivas.

Tabelas: largura das colunas

Sketch fornece uma solução baseada no modelo de doze grades para formatar a largura das colunas de uma tabela. Para diferentemente das classes usuais para dividir o layout de um website em linhas e colunas, as classes de prefixo column- não possuem versões exclusívas para diferentes resoluções de vídeo, mas preservam a regra de que a soma de suas frações não devem ultrapassar 12 colunas.

A definição da largura de uma coluna em uma tabela se dá pela seguinte chamada de classe: column-num em que o termo num pode assumir valores de 1 a 12. Vamos modificar o exemplo anterior para definir colunas de largura diferentes.

<div class="container overflow-x">         <table>                   <tr>                            <th class="column-4">                                     Coluna 1                            </th>                            <th class="column-8">                                     Coluna 2                            </th>                   </tr>                   <tr>                            <td>                                     Valor 1                            </td>                            <td class="no-padding">                                    <table>                                             <tr>                                                      <td>                                                                Sub-valor 1                                                      </td>                                             </tr>                                             <tr>                                                      <td>                                                                Sub-valor 2                                                      </td>                                             </tr>                                             <tr>                                                      <td>                                                                Sub-valor 3                                                      </td>                                             </tr>                                    </table>                            </td>                   </tr>         </table></div>