HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tabelas W3.CSS

❮ Anterior Próximo ❯
Primeiro nome Último nome Pontos
Jill Smith 50
véspera Jackson 94
Adão Johnson 67
Bo Nilsson 50
Mike Ross 35

Classes de tabela W3.CSS

W3.CSS fornece as seguintes classes para tabelas:

Classe Define
w3-table Contêiner para uma tabela HTML
w3 listrado Mesa listrada
w3-borda Tabela com bordas
w3-bordado Linhas delimitadas
centrado em w3 Conteúdo da tabela centralizado
w3-pairável Mesa flutuante
w3-table-all Todas as propriedades definidas

Tabela Básica

A classe w3-table é usada para exibir uma tabela básica:

Primeiro nome Último nome Pontos
Jill Smith 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>

Mesa Listrada

A classe w3-striped é usada para adicionar listras de zebra a uma tabela:

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

Exemplo

<table class="w3-table w3-striped">

Tabela com bordas

A classe w3-bordered adiciona uma borda inferior a cada linha da tabela:

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

Exemplo

<table class="w3-table w3-bordered">

Mesa com borda listrada

Combine a classe w3-striped e a classe w3-bordered para criar uma tabela com bordas listradas:

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

Exemplo

<table class="w3-table w3-striped w3-bordered">

Borda ao redor de uma mesa

A classe w3-border é usada para exibir uma borda ao redor de uma tabela:

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

Exemplo

<table class="w3-table w3-striped w3-border">

Dica: A classe w3-border não é apenas para tabelas. Pode ser usado em qualquer elemento HTML!

Exibindo tudo

A classe w3-table-all combina todas as classes acima:

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

Exemplo

<table class="w3-table-all">

Virando as listras

Para inverter as listras (comece com a cor cinza claro), adicione um elemento <thead> ao redor da linha do cabeçalho da tabela. Você também deve definir uma cor a ser usada para a linha do cabeçalho da tabela:

Primeiro nome Último nome Pontos
Jill Smith 50
véspera Jackson 94
Adão Johnson 67
Bo Nilson 35

Exemplo

<thead>
  <tr class="w3-light-grey">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>

Centralizando todo o conteúdo

A classe centrada em w3 centraliza o conteúdo da tabela:

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

Exemplo

<table class="w3-table-all w3-centered">

Centralizando uma coluna

A classe w3-center centraliza o conteúdo de uma coluna:

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

Exemplo

<table class="w3-table-all">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th class="w3-center">Points</th>
</tr>

Alinhar uma coluna à direita

A classe w3-right-align alinha o conteúdo de uma coluna:

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

Exemplo

<table class="w3-table-all">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th class="w3-right-align">Points</th>
</tr>

Mesa flutuante

A classe w3-hoverable adiciona uma cor de fundo cinza ao passar o mouse:

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

Exemplo

<table class="w3-table-all w3-hoverable">

Cores de foco

Se você quiser uma cor de foco específica, adicione qualquer uma das classes w3-hover- color a cada elemento <tr>:

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

Exemplo

<tr class="w3-hover-green">

Combinando classes W3.CSS

Muitas classes W3.CSS podem ser usadas em todos os elementos HTML.

Por exemplo: classes de bordas, classes de cores, classes de fontes, classes de cartões e muito mais.

 Cabeçalho de tabela colorido

Use qualquer uma das classes w3 - color para exibir uma linha colorida:

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

Exemplo

<tr class="w3-red">
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
</tr>

Mesa colorida

Use qualquer uma das classes w3 - color para exibir uma tabela colorida:

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

Exemplo

<table class="w3-table w3-blue">

Tabela responsiva

A classe w3-responsive cria uma tabela responsiva. A tabela rolará horizontalmente em telas pequenas. Ao visualizar em telas grandes, não há diferença.

Redimensione a tela para ver o efeito na tabela abaixo:

Primeiro nome Último nome Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos Pontos
Jill Smith 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
Adão Johnson 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700

Exemplo

<div class="w3-responsive">
  <table class="w3-table-all">
    ... table content ...
  </table>
</div>

Mesa como cartão

Use uma classe w3-card para exibir uma mesa como um cartão:

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

Exemplo

<table class="w3-table-all w3-card-4">

Mesa pequena

Use a classe w3-tiny para exibir uma pequena tabela:

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

Exemplo

<table class="w3-table-all w3-tiny">

Pequena mesa

Use a classe w3-small para exibir uma pequena tabela:

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

Exemplo

<table class="w3-table-all w3-small">

Mesa Grande

Use a classe w3-large para exibir uma tabela grande:

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

Exemplo

<table class="w3-table-all w3-large">

Mesa Grande

Use a classe w3-xlarge para exibir uma tabela xlarge:

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

Exemplo

<table class="w3-table-all w3-xlarge">

XXTabela Grande

Use a classe w3-xxlarge para exibir uma tabela xxlarge:

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

Exemplo

<table class="w3-table-all w3-xxlarge">

XXXTabela Grande

Use a classe w3-xxxlarge para exibir uma tabela xxxlarge:

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

Exemplo

<table class="w3-table-all w3-xxxlarge">

Mesa Jumbo

Use the w3-jumbo class to display a jumbo large table:

First Name Last Name
Jill Smith
Eve Jackson
Adam Johnson

Example

<table class="w3-table-all w3-jumbo">

❮ Previous Next ❯