1. #1
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633

    Padrão Título para tabelas decoradas com CSS

    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.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  2. #2
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633
    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.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  3. #3
    Avatar de helldanger1
    Registo
    Aug 2007
    Idade
    43
    Posts
    29.633
    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.


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

Tags para este Tópico

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •  

Conectar

Conectar