Estilizando Tabelas

Alguns atributos utilizados na tabela

width: serve para determinar a largura da área de um conteúdo de um elemento;

Align determina o posicionamento de um elemento, podendo ser center, left e right;

Cellspacing é utilizado para controlar as distâncias entre colunas;

Cellpading especifica o espaço do conteúdo e as bordas das células de uma tablea;

Alguns comandos de CSS para estilizar as tabelas feitas no html

<style>

table thead th{

    background-color: black;

    color: wite

   }

dessa forma a tabela ficara com o cabeçário com o fundo preto e as letras brancas

table tfoot td{

    background-color: lightslategray

    color: black

    }

Aqui o rodapé ficará com o fundo cinza e a cor das letras preto.

table tbody tr:nth-child(even) td{

background-color:#f1f1f1;

}

O comando tr:nth-child(even) vai pintar as linhas pares da tabela.

table tbody tr:hover td{

    background-color: #E9E9E9

    }

table tbody tr:hover td fará que, ao passar o mouse em cima da linha ela vai mudar de cor

    

tr:nth-child(even) 

tag tbody, thead e tfoot

São tags para agrupas parte do código utilizados nas tabelas

tbody é para o corpo

thead serve para o cabeçalho 

tfoot para o rodapé

Tag

 Usamos a tag TH para cabeçalho das tabelas, deixando-as destacadas.

Podemos usar um atributo chamado title dentro do TH para quando o usuário por o mouse em cima da célula com o cabeçário aparecer o nome completo da frase.

Exemplo:

th title = "Nome completo">Nome</th>

quando o usuário passar o mouse em nome, vai aparecer "Nome completo"