Como fazer tabela de células com fundo opaco

Escrito por foye robinson | Traduzido por fabricio carvalho
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer tabela de células com fundo opaco
Tabela de células com fundo opaco (Abstract transparant blue/black background image by thea walstra from Fotolia.com)

Você pode alterar as propriedades em uma tabela de células usando Cascading Style Sheets (CSS). Navegadores da internet usam o formato CSS para exibir todos os conteúdos de suas páginas. Uma menor opacidade faz com que o fundo da célula fique mais transparente; maior opacidade faz o oposto. De acordo com W3Schools, o firefox usa o código "opacity:x" para transparecer, enquanto Internet Explorer usa "filter:alpha(opacity=x)". Você deve incluir ambos os códigos para que a opacidade funcione nos dois navegadores.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Abra um documento HTML e insira o seguinte código dentro da tag <HEAD> de sua página: <style type=\"text/css\"> .opacity { background-color: red GO opacity:0.3 GO filter:alpha(opacity=30) GO } </style>

  2. 2

    Troque "vermelho" com uma cor de fundo de sua escolha.

  3. 3

    Mude "0.3" para um número entre "0.0" e "1.0" no Firefox, e mude "30" para um número entre "0" a 100" no Internet Explorer.

  4. 4

    Certifique-se que está usando o mesmo nível de opacidade tanto no Firefox, quanto no Internet Explorer. Exemplo: opacity:0.6 and filter:alpha(opacity=60).

  5. 5

    Adicione os seguintes códigos dentro da tag <BODY> do seu arquivo HTML: <table width=\"100%\" border=\"1\"> <tr> <td> </td><td class=\"opacity\">Add your text here</td> </tr> </table>

  6. 6

    Esteja certo que colocou o nome certo (class=\"opacity\") dentro da tag <TF>. Para mudar a opacidade de uma célula existente, mude a tag <TD> dessa célula (no seu arquivo HTML) por " <td class=\"opacity\">"Add your text /td>.

  7. 7

    Substitua "Add your text here" pelo conteúdo que deseja.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível