Título para tabelas decoradas com CSS

helldanger1 · Mai 19, 2009

Criação e aplicação de estilos com CSS para realizar tabelas com uma decoração vistosa e fácil de aplicar.
Por Miguel Angel Alvarez - Tradução de JML

CSS são Folhas de Estilo em Cascata. Muitos de vocês já devem conhecer e suponho que já devem ter utilizado em mais de uma ocasião. Em qualquer caso, tanto para aprender o que são como para consolidar os conhecimentos, poderão acessar ao Manual de CSS de criarweb.com.

Vamos ver um uso das CSS que pode ser muito interessante para fazer tabelas com títulos que tenham um certo estilo. O bom das CSS é que podemos definir o estilo uma vez e se pode utilizar em múltiplos elementos da página. Com tudo isso, vamos tratar neste artigo: a definição de um estilo e a aplicação para fazer distintos tipos de decoração de tabelas.

helldanger1 · Mai 19, 2009

Definição dos estilos

No cabeçalho da página colocamos a etiqueta <style> que serve para definir os estilos a utilizar na página. Vamos definir um estilo por padrão para as células (etiqueta <td>) e duas classes, a primeira para as tabelas e a segunda para as células titulares (as que têm cor de fundo).

<style type="text/css">
td {
font-family:verdana,arial;
font-size:8pt;
}
.estilotabela{
background-color:ffffff;
border-style:solid;
border-color:666666;
border-width:1px;
}
.estilocelula{
background-color:ddeeff;
color:333333;
font-weight:bold;
font-size:10pt;
}
</style>

Os atributos de estilos podem ser conhecidos no manual de CSS. Neste caso, para a classe estilotabela estamos definindo uma cor de fundo, uma borda sólida, uma cor da borda e uma largura da borda, por essa ordem. Para a classe estilocelula estamos definindo uma cor de fundo, uma cor do texto, uma espessura da fonte e um tamanho da fonte.

helldanger1 · Mai 19, 2009

Utilização dos estilos para obter uma tabela decorada

Vejamos o código da primeira tabela do exemplo.

<table width=280 height=18 cellpadding=2 cellspacing=2 class="estilotabela">
<tr><td class="estilocelula">Título de seção</td></tr>
<tr><td>Este é um texto que poderia ser a parte debaixo da tabela com o conteúdo relacionado com este título.</td></tr>
</table>

O único que tem de especial é que utiliza as classes que foram definidas previamente. Na etiqueta <table> se utiliza a classe estilotabela e na etiqueta <td> que queremos que seja a titular se utiliza a classe estilocelula. A outra célula terá o estilo definido para todas as células em geral.

A outra tabela teria este código:

<table width=280 height=18 cellpadding=2 cellspacing=2 class="estilotabela">
<tr><td class="estilocelula">Título de seção</td></tr>
</table>
<table width="280" cellpadding="2" cellspacing="2"><tr><td>
Este é um texto que poderia ser a parte debaixo da tabela com o conteúdo relacionado com este título.
</td></tr></table>

Neste caso utilizamos duas tabelas para fazer o efeito. A tabela de cima tem uma borda e a de baixo não. Para isso, aplicamos a classe definida para a tabela e a célula somente na tabela de cima, assim, a borda definida na declaração de estilos só afeta a tabela de cima.

Título para tabelas decoradas com CSS

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP