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:
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> :
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:
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:
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:
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:
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:
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 |
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:
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 |
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 " 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 |