Bordas

Largura e Altura

A largura e a altura da tabela são definidas pelas propriedades width e height, respectivamente. No exemplo da Figura 8, essas propriedades foram usadas para estilizar o elemento table e o elemento th, respectivamente. O valor de 100% para width faz com que a tabela seja renderizada na largura da janela do browser (ou, se for o caso, do elemento em que esteja contido), enquanto o valor 30px na propriedade height faz com que a altura do título das colunas seja maior que a altura do restante das células.

table {… width:100%;}

th {… height:30px;}

Alinhamento do Texto da Tabela

O alinhamento do texto é feito através das propriedades text-align e vertical-align. A propriedade text-align define o alinhamento horizontal e pode ter como valores left, right ou center. A propriedade vertical-align pode ter como valores top, bottom ou middle. Na Figura 8, foram usados os valores bottom, para vertical-align do elemento <th>, e center, para text-align do elemento <td>.

td {text-align:center;}

th {vertical-align:bottom;…}

Cor da Tabela

A tabela da Figura 8 usa quatro cores diferentes, dois tons de azul, branco e preto:

• O branco é especificado para fonte do elemento <th>, e é usado no plano de fundo das linhas ímpares da tabela, por ser a cor default quando nenhuma cor é aplicada.
• A cor preta é usada na fonte dos elementos <tr> e <td>, também, porque nenhuma cor foi especificada para ela, sendo preto a cor default.
• O azul mais escuro é aplicado às bordas e ao plano de fundo do elemento <th>.
• O azul mais claro é usado no plano de fundo das linhas pares marcadas com a classe “par”.

Para definir cores para fonte e plano de fundo, são usadas as propriedades color e background-color, estudadas na Aula 5. As regras a seguir foram usadas para dar cor aos elementos da tabela da Figura 8.

Essas propriedades podem ser usadas para estilizar apenas algumas células, e você também pode estilizar as fontes usadas. Isso te dá uma grande variedade de opções para deixar as tabelas bem mais atraentes do que eram antes.