Tabela do CSS

O uso do CSS pode melhorar significativamente a aparência das tabelas HTML:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha, No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Edifício Tencent, Parque de Alta Tecnologia, Distrito de Nanshan Shenzhen

Experimente você mesmo

Borda da tabela

Para definir a borda da tabela no CSS, use border Atributo.

O exemplo a seguir define borda preta para os elementos <table>, <th> e <td>:

Nome Sobrenome
Bill Gates
Steve Jobs

O elemento de contêiner

table, th, td {
  border: 1px solid black;
}

Experimente você mesmo

Atenção:A tabela do exemplo acima tem borda dupla. Isso ocorre porque a tabela e os elementos <th> e <td> têm bordas separadas.

Tabela de largura total

Em alguns casos, a tabela acima parece pequena. Se você precisar de uma tabela que cubra toda a tela (largura total), adicione width: 100% ao elemento <table>:

O elemento de contêiner

table {
  width: 100%;
}

Experimente você mesmo

Borda dupla

Observe que a tabela acima tem borda dupla. Isso ocorre porque a tabela e os elementos th e td têm bordas separadas.

Para remover a borda dupla, veja o exemplo a seguir.

Fundir bordas da tabela

border-collapse Atributo define se as bordas da tabela serão fundidas em uma única borda:

Nome Sobrenome
Bill Gates
Steve Jobs

O elemento de contêiner

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

Experimente você mesmo

Se você quiser que haja borda apenas ao redor da tabela, é necessário especificar para <table>: border padding

Nome Sobrenome
Bill Gates
Steve Jobs

O elemento de contêiner

table {
  border: 1px solid black;
}

Experimente você mesmo

Largura e altura da tabela

A largura e altura da tabela são definidas por width e height Definição de atributo.

O exemplo a seguir define a largura da tabela como 100% e a altura do elemento <th> como 50px:

Nome Sobrenome Economias
Bill Gates $100
Steve Jobs $150
Elon Musk $300

O elemento de contêiner

table {
  width: 100%;
}
th {
  height: 50px;
}

Experimente você mesmo

Para criar uma tabela que ocupe metade da página, use width: 50%:

O elemento de contêiner

table {
  width: 50%;
}
th {
  height: 70px;
}

Experimente você mesmo

Alinhamento horizontal

text-align Atributo define o alinhamento horizontal do conteúdo dos elementos <th> ou <td> (esquerda, direita ou centralizado).

Por padrão, o conteúdo do elemento <th> é alinhado no centro, enquanto o conteúdo do elemento <td> é alinhado à esquerda.

Para alinhar o conteúdo do elemento <td> também para o centro, use text-align: center:

Nome Sobrenome Economias
Bill Gates $100
Steve Jobs $150
Elon Musk $300

O elemento de contêiner

th {
  text-align: center;
}

Experimente você mesmo

O exemplo a seguir alinha o texto do elemento <th> para a esquerda:

Nome Sobrenome Economias
Bill Gates $100
Steve Jobs $150
Elon Musk $300

O elemento de contêiner

th {
  padding: 15px;
}

Experimente você mesmo

Alinhamento vertical

vertical-align Atributo define o alinhamento vertical do conteúdo dos elementos <th> ou <td> (superior, inferior ou centralizado).

Por padrão, o alinhamento vertical do conteúdo da tabela é centralizado (os elementos <th> e <td> são).

O exemplo a seguir define o alinhamento vertical do texto do elemento <td> para baixo:

Nome Sobrenome Economias
Bill Gates $100
Steve Jobs $150
Elon Musk $300

O elemento de contêiner

td {
  height: 50px;
  vertical-align: bottom;
}

Experimente você mesmo

margem interna da tabela

margem interna da tabela Para controlar o espaçamento entre a borda e o conteúdo da tabela, use padding

Nome Sobrenome Economias
Bill Gates $100
Steve Jobs $150
Elon Musk $300

O elemento de contêiner

propriedade, para implementar a linha de divisão horizontal:
  propriedade:
  padding: 15px;
}

Experimente você mesmo

text-align: left;

Nome Sobrenome Economias
Bill Gates $100
Steve Jobs $150
Elon Musk $300

linha de divisão horizontal Adicionar ao <th> e <td> border-bottom

O elemento de contêiner

propriedade, para implementar a linha de divisão horizontal:
  th, td {
}

Experimente você mesmo

border-bottom: 1px solid #ddd;

Tabela com cursor suspenso no elemento <tr> usando :hover

Nome Sobrenome Economias
Bill Gates $100
Steve Jobs $150
Elon Musk $300

O elemento de contêiner

tr:hover {background-color: #f5f5f5;}

Experimente você mesmo

Tabela com listras

Nome Sobrenome Economias
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Para implementar o efeito de表格 com listras, use nth-child() seletor, e adicionar ao todas as linhas de tabela pares (ou ímpares) background-color:

O elemento de contêiner

tr:nth-child(even) {background-color: #f2f2f2;}

Experimente você mesmo

Cor da tabela

O exemplo a seguir especifica a cor de fundo e a cor do texto do elemento <th>:

Nome Sobrenome Economias
Bill Gates $100
Steve Jobs $150
Elon Musk $300

O elemento de contêiner

th {
  background-color: #4CAF50;
  color: white;
}

Experimente você mesmo

Tabela responsiva

Se a tela for太小而无法显示全部内容，a tabela responsiva exibirá uma barra de rolagem horizontal:

Nome Sobrenome Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

Adicionar ao redor do elemento <table> uma barra de rolagem com overflow-x:auto (por exemplo <div>), para alcançar efeitos responsivos:

O elemento de contêiner

<div style="overflow-x:auto;">
<table>
... conteúdo da tabela ...
</table>
</div>

Experimente você mesmo

Notas:No OS X Lion (no Mac), a barra de rolagem está oculta por padrão e é exibida apenas quando usada (mesmo se definido "overflow:scroll").

Mais exemplos

Fazer uma tabela estilizada
Este exemplo demonstra como criar uma tabela estilizada.
Definir a posição do título da tabela
Este exemplo demonstra como posicionar o título da tabela.

propriedades de tabela CSS

propriedade descrição
border Propriedade abreviada. Define todas as propriedades de borda em uma declaração.
border-collapse Determinar se as bordas da tabela devem ser dobradas.
border-spacing Determinar a distância entre as bordas das células adjacentes.
caption-side Determinar a posição do título da tabela.
empty-cells Determinar se os bordas e o fundo devem ser exibidos nas células vazias da tabela.
table-layout Definir o algoritmo de layout para a tabela.