Diferenciar tabelas de suas origens ajuda a enfatizar o conteúdo da tabela em relação a tudo o mais na página da Web. Para adicionar um plano de fundo de tabela, você precisará ajustar a folha de estilo em cascata (CSS) que suporta 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 no visor, abra sua imagem de plano de fundo e anote a altura e a largura. Em seguida, envie sua imagem para o seu provedor de hospedagem. Teste o URL da imagem; Uma das razões mais comuns pelas quais as imagens não são exibidas é porque há um erro de digitação na URL.Depois de concluir essa etapa, coloque um bloco de estilo CSS na parte superior do documento:
tabela {background: url (" URL para imagem ") no-repeat;} Defina a largura e a altura da tabela para corresponder à largura e altura da imagem. Se o conteúdo da tabela for maior que a altura e largura da imagem, a imagem de fundo será exibida apenas uma vez. As instruções acima definirão a mesma imagem de fundo em todas as tabelas da página. Se você quiser colocar o fundo em apenas tabelas específicas, você precisa usar um classe
table.background {background: url (" URL para imagem ") no-repeat;} Tabelas maiores, ou tabelas com mais conteúdo, talvez precisem repetir o segundo plano para que a tabela inteira seja preenchida. Altere o valor no seu CSS para que a imagem se repita no eixo y, no eixo x ou em ambos. background: url ("URL para imagem") repeat;
Por padrão, o valor de repetição será lado a lado, mas você também pode definir o valor de repetição para repetir-x
ou repetir-y Todas as cores de segundo plano definidas nas células da tabela substituirão a imagem de plano de fundo na tabela. Portanto, tenha cuidado ao usar cores de fundo em suas células em combinação com imagens de fundo de tabela. Planos de fundo de tabela irão definir suas tabelas para além 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 destinadas a serem fofas (por exemplo, inserir uma imagem de um gatinho atrás de uma tabela indicando adoções de animais) podem parecer pouco profissionais e podem afetar a legibilidade dos dados tabulares. Qualquer imagem que você usa deve estar devidamente licenciada; só porque você pode encontrar uma foto na Web não significa que você pode se apropriar dela para seu próprio uso. Respeite os direitos autorais!
célula 1 célula 2 célula 1 célula 2 …
Coloque um fundo em apenas uma mesa
class = "background" style = "width: 400px; height: 500px;>…
Deixe a repetição da imagem de fundo da tabela
para ladrilhos horizontalmente ou verticalmente, respectivamente.
Cores de fundo da célula bloqueiam a imagem de fundo da tabela
Considerações
