tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS tabelas

❮ Anterior Próximo capítulo ❯

O olhar de uma tabela HTML pode ser muito melhorada com CSS:

companhia Contato País
Alfreds Futterkiste Maria Anders Alemanha
Berglunds snabbkop Christina Berglund Suécia
Centro comercial Moctezuma Francisco Chang México
Ernst Handel Roland Mendel Áustria
ilha de Negociação Helen Bennett Reino Unido
Königlich Essen Philip Cramer Alemanha
Rir Bacchus Winecellars Yoshi Tannamuri Canadá
Magazzini Alimentari Riuniti Giovanni Rovelli Itália

tabela Fronteiras

Para especificar bordas da tabela em CSS, use a border propriedade.

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

Exemplo

table, th, td {
   border: 1px solid black;
}
Tente você mesmo "

Observe que a tabela no exemplo acima tem bordas duplas. Isto porque tanto a tabela eo <th> e <td> elementos têm fronteiras separadas.

Reduzir os limites da tabela

O border-collapse propriedade define se os limites de tabelas devem ser recolhidas em uma única borda:

Exemplo

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}
Tente você mesmo "

Se você quiser apenas uma borda ao redor da mesa, especifique apenas a border propriedade para <table> :

Exemplo

table {
    border: 1px solid black;
}
Tente você mesmo "

Tabela Largura e Altura

Largura e altura de uma tabela são definidas pelos width e height propriedades.

O exemplo a seguir define a largura da tabela para 100%, e a altura do <th> elementos para 50px:

Exemplo

table {
    width: 100%;
}

th {
    height: 50px;
}
Tente você mesmo "

Alinhamento horizontal

O text-align propriedade define o alinhamento horizontal (como a esquerda, direita ou centro) do conteúdo <th> ou <td> .

Por padrão, o conteúdo de <th> elementos são de centro-alinhados e o conteúdo de <td> elementos são alinhados à esquerda.

O exemplo a seguir deixou-alinha o texto em <th> elementos:

Exemplo

th {
    text-align: left;
}
Tente você mesmo "

Alinhamento vertical

A vertical-align propriedade define o alinhamento vertical (como superior, inferior ou médio) do conteúdo <th> ou <td> .

Por padrão, o alinhamento vertical do conteúdo em uma tabela é do meio (tanto para <th> e <td> elementos).

O exemplo a seguir define o alinhamento de texto vertical para baixo para <td> elementos:

Exemplo

td {
    height: 50px;
    vertical-align: bottom;
}
Tente você mesmo "

Preenchimento tabela

Para controlar o espaço entre a borda e o conteúdo de uma tabela, utilize o padding propriedade no <td> e <th> elementos:

Exemplo

th, td {
    padding: 15px;
    text-align: left;
}
Tente você mesmo "

divisores horizontais

Primeiro nome Último nome Poupança
Pedro Griffin $ 100
Lois Griffin $ 150
Joe Swanson $ 300

Adicione o border-bottom propriedade para <th> e <td> para divisores horizontais:

Exemplo

th, td {
    border-bottom: 1px solid #ddd;
}
Tente você mesmo "

Tabela Hoverable

Use a :hover selector em <tr> para realçar as linhas da tabela no mouse sobre:

Primeiro nome Último nome Poupança
Pedro Griffin $ 100
Lois Griffin $ 150
Joe Swanson $ 300

Exemplo

tr:hover {background-color: #f5f5f5}
Tente você mesmo "

Tabelas listradas

Primeiro nome Último nome Poupança
Pedro Griffin $ 100
Lois Griffin $ 150
Joe Swanson $ 300

Para tabelas com listras de zebra, utilize o nth-child() selector e adicionar uma background-color para todas as linhas até mesmo (ou ímpar) da tabela:

Exemplo

tr:nth-child(even) {background-color: #f2f2f2}
Tente você mesmo "

Cor tabela

O exemplo abaixo especifica a cor do fundo e texto de <th> elementos:

Primeiro nome Último nome Poupança
Pedro Griffin $ 100
Lois Griffin $ 150
Joe Swanson $ 300

Exemplo

th {
    background-color: #4CAF50;
    color: white;
}
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:

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

Adicionar um elemento de recipiente (como <div> ) com overflow-x:auto ao redor do <table> elemento para torná-lo sensível:

Exemplo

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
Tente você mesmo "
Exemplos

mais Exemplos

Fazer uma mesa de fantasia
Este exemplo demonstra como criar uma mesa de fantasia.

Definir a posição da legenda da tabela
Este exemplo demonstra como posicionar a legenda da tabela.

Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 » Exercício 6»

Propriedades CSS Tabela

Propriedade Descrição
border Define todas as propriedades de fronteira em uma declaração
border-collapse Especifica se ou não bordas da tabela deve ser recolhido
border-spacing Especifica a distância entre as bordas das células adjacentes
caption-side Especifica a colocação de uma legenda da tabela
empty-cells Especifica se deve ou não exibir bordas e fundo sobre as células vazias em uma tabela
table-layout Define o algoritmo layout para ser usado por uma mesa

❮ Anterior Próximo capítulo ❯