Diferenciar as tabelas de seus planos de fundo ajuda a enfatizar o conteúdo da tabela em relação a tudo o mais na página da web. Para adicionar um fundo de mesa, você precisará fazer alterações no planilha em estilo cascata apoiando sua página da web.
Começando
A melhor maneira de adicionar uma imagem de fundo a uma tabela é usar o CSS fundo propriedade. Para se preparar para escrever o CSS de forma eficaz e evitar falhas inesperadas de exibição, abra sua imagem de plano de fundo e anote a altura e a largura. Em seguida, carregue sua imagem para o seu provedor de hospedagem. Teste o URL da imagem; um dos motivos mais comuns pelos quais as imagens não são exibidas é porque há um erro de digitação no URL.
Insira um bloco de estilo CSS no cabeçalho do seu documento:
Escreva seu CSS para o plano de fundo em sua mesa e coloque-o dentro do bloco de estilo:
Coloque sua tabela no HTML:
célula 1 célula 2
célula 1 célula 2
Defina a largura e a altura da tabela para corresponder à largura e altura da imagem.
Defina a largura e a altura da tabela para corresponder à largura e altura da imagem.
Se o conteúdo da tabela for maior do que a altura e largura da imagem, a imagem de fundo será exibida apenas uma vez.
Coloque um plano de fundo em apenas uma mesa
As instruções acima definirão a mesma imagem de fundo em todas as tabelas da página. Para colocar o plano de fundo apenas em tabelas específicas, use um aula atributo. Adicione o aulafundo a qualquer mesa que você deseja ter essa imagem de fundo. Defina a largura e a altura dessas tabelas.
Deixe a imagem de fundo da tabela repetir
As tabelas maiores ou com mais conteúdo podem precisar que o plano de fundo se repita para que toda a tabela seja preenchida. Altere o valor em seu CSS para que a imagem se repita no eixo y, eixo x, ou seja lado a lado em ambos.
background: repetição de url ("URL para imagem");
Por padrão, o valor de repetição será colocado lado a lado, mas você também pode definir o valor de repetição para.
repetir-x
ou.
repeat-y
para colocar lado a lado horizontalmente ou verticalmente, respectivamente.
As cores de fundo da célula bloqueiam a imagem de fundo da tabela
Qualquer cor de fundo definido nas células da tabela substituem a imagem de fundo na tabela. Portanto, tome cuidado ao usar cores de fundo em suas células em combinação com imagens de fundo de tabela.
Considerações
Qualquer imagem que você usar deve ser devidamente licenciada; só porque você pode encontrar uma foto na web não significa que você pode apropriá-la para seu próprio uso. Respeite os direitos autorais!
Os planos de fundo das tabelas diferenciam suas tabelas da página subjacente. No entanto, pense duas vezes antes de usar essa técnica. A inserção de uma imagem neutra pode não ser uma distração, mas imagens complicadas com a intenção de serem bonitas (por exemplo, inserir um imagem de um gatinho atrás de uma mesa indicando adoção de animais de estimação) pode parecer pouco profissional e pode afetar a legibilidade de a dados tabulares.