Aplicando estilo em uma Tabela

Espaçamento

Você pode utilizar a propriedade "padding" para controlar o espaçamento entre a borda e o conteúdo da tabela. Para que isso fique visível, é importante que a borda não esteja invisível. Veja o exemplo abaixo:

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

No exemplo acima, foi aplicada uma borda e um espaçamento de 5px em todos os lados entre a borda e o conteúdo.

Alinhamento de texto

Para controlar o alinhamento do texto na célula da tabela, utilize a propriedade "text-align" para alinhamento horizontal e "vertical-align" para vertical.

table,th,td {
    border: 1px solid black;
    padding: 5px;
    text-align: left;
    vertical-align: center;
}

O exemplo acima torna o alinhamento horizontal alinhado à esquerda e o alinhamento vertical centralizado.

Para conhecer a lista completa de todos valores possíveis do alinhamento, consulte os seguintes endereços: vertical-align e text-align

Borda

Além das propriedades de controle de borda já vistas em aulas anteriores, podemos controlar outros parâmetros de borda da tabela. Algo importante a analisar é se as bordas das tabelas ficarão condensadas ou separadas através da propriedade "border-collapse". Veja o exemplo:

table {
  border-collapse: collapse;
}

Para ver a lista completa de todos valores possíveis para a propriedade "border-collapse", consulte este link.

Cor de fundo

A cor de fundo da tabela é controlada pela mesma propriedade utilizada para outros elementos: "background-color". Veja o exemplo abaixo que especifica uma cor de fundo para as células de cabeçalho:

th {
    background-color: lightgray;
}

É possível aplicar estilos diferentes para linhas pares e linhas ímpares, obtendo-se uma melhor separação entre as linhas. Para isso, deve-se utilizar um seletor avançado do CSS. Veja o exemplo:

/* par */
tr:nth-child(even) { 
    background-color: #eee;
}
/* ímpar */
tr:nth-child(odd) {
    background-color: lightblue;
}

No exemplo acima, as linhas pares (even) terão cor de fundo cinza e as linhas ímpares (odd) terão cor de fundo azul-claro.

Esse tipo de seletor avançado do CSS chama-se seletor de pseudoclasse e será melhor estudado nas próximas aulas.

Assim como os links, pode-se definir o estilo para as tabelas a depender do estado. Um exemplo desse uso é definir um estilo diferente para quando o mouse estiver sobre uma linha, como o exemplo abaixo:

tr:hover {
    background-color: blue;
}