segunda-feira, 13 de setembro de 2010

Tabelas simples com CSS

Vou apresentar aqui um CSS simples com estilos para elementos de tabelas.
Apesar do conceito de tabeless parecer sugerir o não uso de tabelas HTML, não significa necessariamente que vc nunca deve usá-la.

Por exemplo, uma estrutura de dados ainda é mais simples de se montar com uma table do que com tags div. Se a própria table já tem uma estrutura de linhas e colunas, não vejo muita vantagem em usar um monte de divs.

Se você é programador e provavelmente não vai ter tempo (ou saco) de ficar "enfeitando" o layout do seu sistema, esse estilo CSS vai te quebrar um galhão.

Vamos dar um look no estilinho:

/*Formatação padrão para toda a página*/
body{
/*Informações da fonte*/
font-family:arial, helvetica;
font-size:13px;
}

table{
/*coloca uma bordinha cinza em volta da tabela toda*/
border:1px solid gray;
}

th{
/*alinha o cabeçalho a esquerda (o default eh centralizado), com fundo cinza claro e um espaçamento de 5 pixels a esquerda, direita, em cima e em baixo*/
text-align:left;
background-color:rgb(200, 200, 200);
padding:5px;
}

/*fundo do de cada linha em outro tom de cinza*/
tr{
background-color:rgb(230, 230, 230);
}

/*muda a cor da linha quando vc passa o mouse por cima*/
tr:hover{
background-color:rgb(215, 210, 230);
}

/*aqui so coloquei espaçamento de 5 pixels em cada celula*/
td{
padding:5px;
}

Se você apontar este css pra uma página HTML, todas as tabelas vão ficar com a mesma cara.
Caso vc queira fazer uma tabela com a cara diferente dessa default, é só por um atributo class na tabela e repetir os estilos adicionando o nome que vc pôs no class.
Assim:

<table class="tabelaVerde">

e no seu estilo:
table.tabelaVerde{
background-color:yellow;
}

e por ai vai...
tr.LinhaAzul{
background-color: blue;
}

etc...
Qualquer dúvida, é só perguntar :D

Nenhum comentário:

Postar um comentário