Table

Para estilização das tabelas, existe uma classe que formata toda a tabela sem dificuldades.

Para tal, é necessário seguir a semantica descrita abaixo:

Necessário inseruir a classe .base-table para que seja totalmente formatada. E, para definir a cor do header, basta usar uma das classes de thema:

ClassCorHexadecimalRepresentação
.theme-colored-grayCinza#656565img
.theme-colored-redVermelha#D71F3Cimg
.theme-colored-purpleRoxo#641E75img
.theme-colored-aquamarineAquamarine#20BEC6img
.theme-colored-greenVerde#20C67Bimg
.theme-colored-yellowAmarelo#F2B838img

É possível também alinhar a tabela ao centro da tela usando a classe .central.

E, é possível manter a tabela como header fixo na tela usando a claase .fixed.

Implementação#

<table class="base-table central theme-colored-aquamarine">
<thead>
<tr>
<th>Valor 1</th>
<th>Valor 2</th>
<th>Valor 3</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Descrição</td>
<td>380,20</td>
<td>950,00</td>
<td>1.450,20</td>
</tr>
<tr>
<td>Descrição</td>
<td>380,20</td>
<td>950,00</td>
<td>1.450,20</td>
</tr>
<tr>
<td>Descrição</td>
<td>380,20</td>
<td>950,00</td>
<td>1.450,20</td>
</tr>
<tr>
<td>Descrição</td>
<td>380,20</td>
<td>950,00</td>
<td>1.450,20</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Total</th>
<td>360,00</td>
<td>1.140,60</td>
<td>4.350,80</td>
</tr>
</tbody>
</table>
</section>

Exemplo#

img