As tabelas são sem dúvida o objeto mais importante na produção de páginas web, pois normalmente as páginas web dependem de tabelas para layout e organização de vários elementos. Isso determina diretamente se a página web é bonita e se a organização do conteúdo é clara. No entanto, muitos amigos muitas vezes negligenciam o estudo das tabelas e se concentram em outras camadas, imagens, efeitos especiais, etc. Na verdade, o uso razoável de tabelas pode facilmente embelezar sua página. Também ouvimos frequentemente amigos reclamarem que a página criada por tabelas é monótona. ., áspero, sem variedade, e muitas vezes ouço pessoas perguntarem como fazer uma borda de mesa de 1 pixel. Na verdade, no Dreamweaver podemos refinar sua tabela de forma muito conveniente, tornando sua página web mais bonita e refinada. Apresentaremos como refinar sua tabela no Dreamweaver nos três aspectos a seguir.
1. Use o painel de propriedades.
Figura 1 Primeiro precisamos entender os parâmetros nos dois painéis de propriedades da tabela: CellPad e CellSpace. Conforme mostrado na Figura 1, CellPad refere-se à distância entre duas células na tabela e CellSpace refere-se à distância entre cada célula e o conteúdo do meio. Ao alterar esses dois parâmetros e combinar a cor de fundo, você pode criar facilmente uma borda de tabela de 1 pixel.
1. Utilize o painel Objeto para inserir uma tabela e definir a largura, altura, linhas e colunas da tabela. Observe que os padrões CellPad, CellSpace e Border da tabela inserida no Dreamweaver são todos 0 neste momento. Conforme mostrado na Figura 2;
Figura 2
2. Defina a Borda da tabela no painel de propriedades como 0, CellPad como 5 (isso manterá 5 pixels entre o conteúdo da célula e a borda da célula como 1 (isso manterá 5 pixels entre as células); ) espaçamento de 1 elemento). Conforme mostrado na Figura 3;
Figura 3
3. Defina a cor de fundo da tabela como #999999, conforme mostrado na Figura 4;
4. Defina a cor de fundo da célula como #FFFFFF, conforme mostrado na Figura 5;
Figura 5
5. Visualize o efeito no navegador Podemos observar que a tabela possui uma borda de pixels, conforme mostrado na Figura 6;
Figura 62
: Usando aninhamento de tabela.
Ainda seguindo o princípio principal acima, podemos obter mais efeitos usando o aninhamento de tabelas.
1. Primeiramente, desenhamos uma tabela e definimos os valores e cores de CellPad e CellSpace desta tabela consultando o exemplo anterior. O efeito específico é mostrado na Figura 7;
Figura 7 2. Em seguida, desenhe outra tabela de linha única e coluna única, defina CellPad=2, CellSpace=1. Os parâmetros específicos são mostrados na Figura 8;
Figura 8
3. Mova a tabela criada na primeira etapa para a tabela na segunda etapa. A tabela agora se parece com a Figura 9;
Na Figura 9, vemos que esta tabela possui uma moldura externa de linha dupla e uma moldura interna de linha única.
4. Modifique a tabela na segunda etapa para uma única linha e duas colunas e coloque uma tabela na primeira etapa em cada célula. A tabela final ficará semelhante à Figura 10;
Redefina
a Figura 10
, defina um estilo .tdstyle separadamente, os parâmetros específicos são mostrados na Figura 13;
Observe aqui que definimos a largura da borda superior e inferior como 1 pixel e a largura da borda esquerda e direita como 0.
4. O efeito da mesa final é mostrado na Figura 14;
(Foto 15)
Neste momento, a mesa apresenta um efeito tridimensional.
6. A tabela acima não parece perfeita. Não há bordas à direita e na parte inferior de toda a tabela. Podemos definir outro style.table1, definir os quatro lados deste estilo como 1 pixel e anexá-lo
