tutoriais mais recente desenvolvimento web
 

W3.CSS tabelas

❮ Anterior Próxima Capítulo ❯

Exibindo uma Tabela

Primeiro nome Último nome Pontos
Jill ferreiro 50
véspera Jackson 94
Adão Johnson 67
Bo Nilsson 50
Mike Ross 35

Tabela básica

Primeiro nome Último nome Pontos
Jill ferreiro 50
véspera Jackson 94
Adão Johnson 67

Exemplo

<table class="w3-table">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
</tr>
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
</table>
Tente você mesmo "

Tabela delimitada

Primeiro nome Último nome Pontos
Jill ferreiro 50
véspera Jackson 94
Adão Johnson 67

Exemplo

<table class="w3-table w3-border">
Tente você mesmo "

Tabela listrado

Primeiro nome Último nome Pontos
Jill ferreiro 50
véspera Jackson 94
Adão Johnson 67

Exemplo

<table class="w3-table w3-striped">
Tente você mesmo "

Tabela Listrado Bordered

Primeiro nome Último nome Pontos
Jill ferreiro 50
véspera Jackson 94
Adão Johnson 67

Exemplo

<table class="w3-table w3-bordered w3-striped">
Tente você mesmo "

Border torno de uma mesa listrada

Primeiro nome Último nome Pontos
Jill ferreiro 50
véspera Jackson 94
Adão Johnson 67

Exemplo

<table class="w3-table w3-bordered w3-striped w3-border">
Tente você mesmo "

Lançando as listras

Primeiro nome Último nome Pontos
Jill ferreiro 50
véspera Jackson 94
Adão Johnson 67

Para inverter as listras, basta adicionar <thead> em torno do cabeçalho da tabela:

Exemplo

<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Tente você mesmo "

Tabela com um ponto colorido

Primeiro nome Último nome Pontos
Jill ferreiro 50
véspera Jackson 94
Adão Johnson 67

Exemplo

<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Tente você mesmo "

Cores de mesa

Primeiro nome Último nome Pontos
Jill ferreiro 50
véspera Jackson 94
Adão Johnson 67

Exemplo

<table class="w3-table w3-blue">
Tente você mesmo "

Tabela Hoverable

A classe w3-hoverable adiciona uma cor de fundo cinza no mouse-over:

Primeiro nome Último nome Pontos
Jill ferreiro 50
véspera Jackson 94
Adão Johnson 67

Exemplo

<table class="w3-table w3-bordered w3-striped w3-border w3-hoverable">
Tente você mesmo "

Se você quer uma cor foco específico, adicionar qualquer um dos w3-pairar-classes para cada elemento <tr>:

Primeiro nome Último nome Pontos
Jill ferreiro 50
véspera Jackson 94
Adão Johnson 67

Exemplo

<tr class="w3-hover-green">
Tente você mesmo "

Tabela como um cartão

Primeiro nome Último nome Pontos
Jill ferreiro 50
véspera Jackson 94
Adão Johnson 67

Exemplo

<table class="w3-table w3-bordered w3-striped w3-card-4">
Tente você mesmo "

Tabela Responsive

Uma mesa sensível irá exibir uma barra de rolagem horizontal se a tela é muito pequena para exibir o conteúdo completo.

Tente redimensionar o ecrã para ver o efeito.

Primeiro nome Último nome Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos
Jill ferreiro 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
véspera Jackson 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400
Adão Johnson 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700

Exemplo

<div class="w3-responsive">

<table class="w3-table w3-bordered w3-striped">
... table content ...
</table>

</div>
Tente você mesmo "

Tabela pequena

Primeiro nome Último nome Pontos
Jill ferreiro 50
véspera Jackson 94
Adão Johnson 67

Exemplo

<table class="w3-table w3-bordered w3-striped w3-tiny">
Tente você mesmo "

Pequena mesa

Primeiro nome Último nome Pontos
Jill ferreiro 50
véspera Jackson 94
Adão Johnson 67

Exemplo

<table class="w3-table w3-bordered w3-striped w3-small">
Tente você mesmo "

Grande Tabela

Primeiro nome Último nome Pontos
Jill ferreiro 50
véspera Jackson 94
Adão Johnson 67

Exemplo

<table class="w3-table w3-bordered w3-striped w3-large">
Tente você mesmo "

XLarge Tabela

Primeiro nome Último nome Pontos
Jill ferreiro 50
véspera Jackson 94
Adão Johnson 67

Exemplo

<table class="w3-table w3-bordered w3-striped w3-xlarge">
Tente você mesmo "

XXLarge Tabela

Nome Pontos
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Exemplo

<table class="w3-table w3-bordered w3-striped w3-xxlarge">
Tente você mesmo "

XXXLarge Tabela

Nome Pontos
ferreiro 50
Jackson 94
Johnson 67
Nilson 35

Exemplo

<table class="w3-table w3-bordered w3-striped w3-xxxlarge">
Tente você mesmo "

Tabela jumbo

Nome Pontos
ferreiro 50
Jackson 94
Johnson 67
Nilson 35

Exemplo

<table class="w3-table w3-bordered w3-striped w3-jumbo">
Tente você mesmo "

❮ Anterior Próxima Capítulo ❯