Exemplo simples de HTML fazendo mesa de linha fina

Em relação ao método de fabricar esta tabela de linha fina, o Baidu pode ter uma resposta para dizer para você definir estes valores: set borda = 0 Cellpacing = 1 bgcolor =#990033 para a tabela e defina a cor de fundo separadamente para a célula, por exemplo: BGColor =#fff. No entanto, provavelmente não há explicação detalhada sobre por que esses valores estão definidos!

Hoje, de repente, pensei em gravar os princípios desta tabela de linha fina. É também porque tenho ensinado aos alunos lições básicas hoje em dia. Os alunos não entendem muito bem os princípios desta tabela de linha fina; portanto, se você quiser iniciantes, provavelmente encontrará problemas semelhantes, então aqui vou falar sobre por que esses valores estão definidos.

Primeiro, vamos dar uma olhada no efeito ao definir o valor da borda da tabela como 1. Mesmo que a borda = 1 e a distância entre as células Cellpacing = 0, a espessura da tabela ainda parece difícil:

Vamos dar uma olhada no que o efeito é produzido fazendo tabelas de linha fina:

Por outro lado, as tabelas por trás são mais refinadas.

Então agora vou resumir as etapas para fazer uma tabela de linha fina:

Etapas para fazer uma tabela de linha fina:

1. Defina a cor de fundo da tabela (ou seja, a cor da borda da tabela visual);
2. Defina a cor de fundo do TD (célula) (visualmente a cor geral de toda a tabela)
3. Defina o valor da borda da tabela como 0 (borda = 0) e o valor de espaçamento é 1 (Cellspacing = 1, para que a cor de fundo da tabela seja exibida através desse espaçamento, tornando -se uma borda visual).

Análise: A cor de fundo da tabela é na verdade a linha fina que se parece na forma visual, porque definimos a borda como 0 e o espaçamento entre as células é definido como 1, então a cor de fundo da tabela é a cor revelada através da lacuna desse pixel. Defina a cor de fundo da célula para distingui -la da cor de fundo da tabela. Para uma melhor compreensão, usarei fotos para analisá -las aqui:

1. Suponha que a tabela a seguir borda = 1, ela é exibida da seguinte forma:

2. Quando o espaçamento das células é definido, o celular = 0, duas bordas de 1 pixels estão próximas uma da outra, e a borda parecerá espessa:

Portanto, o efeito da linha fina não pode ser definido pela borda = 1

Em seguida, usamos o método de linha fina para fazer o seguinte princípio:

Se este artigo for útil para você, recomendo

Endereço original: http://www.cnblogs.com/xcaocao/p/5643351.html