Dreamweaver MX 2004 cria tabelas de linhas finas

Autor：Eve Cole Data da Última Atualização：2009-05-31 21:27:02

Se você apenas definir a borda da tabela como 1 (border="1") e o valor da cor da borda (como borderColor="#000000"), a linha da tabela será na verdade 2px. Para fazer uma tabela de linha fina, existe. são três métodos:

1. Pressione Ctrl+Alt+T no Dreamweaver para abrir a caixa de diálogo para inserir uma tabela. As configurações dos parâmetros são mostradas na figura (os itens com caixas vermelhas são valores fixos, caso contrário, não têm efeito):

Selecione a tabela e defina a cor de fundo da tabela no painel de propriedades:

Posicione o cursor na primeira célula, mantenha pressionada a tecla Shift e clique na última célula, selecione todas as células e defina a cor de todas as células no painel de propriedades:

O efeito final é o seguinte:

2. Use os atributos de borda escura (bordercolordark) e borda clara (bordercolorlight) da tabela para fazer uma tabela de linhas finas:
Ou pressione Ctrl+Alt+T para inserir a tabela e configure-a conforme mostrado na caixa de diálogo (os itens com caixas vermelhas são fixos, caso contrário não terão efeito)

Após selecionar a tabela, pressione F9 para expandir o grupo de painéis "Tag Inspector" e definir as configurações no painel "Attributes" conforme mostrado abaixo:

Após a conclusão, fica assim:

3. Defina o atributo CSS border-collapse da tabela para recolher: Pressione Ctrl+Alt+T para inserir a tabela. A configuração da caixa de diálogo é a mesma do método 2. Selecione a tabela e defina a cor da borda da tabela no painel de propriedades:

Pressione F9 para expandir o painel “Tag Inspector” e preencha “border-collapse:collapse;” em “style” no painel “Attributes”.

Após a conclusão, fica assim:

Nota: A tabela de linhas finas feita pelo método 3 é adequada apenas para IE5+. O método mais compatível é o método 1. O método 2 não é uma tabela de linhas finas no sentido estrito.
Dica: No Método 1, você pode usar CSS para definir a cor de fundo das células da tabela para reduzir a quantidade de código:

<estilo>
.fino{fundo:#000000}
.thin td{fundo:#FFFFFF}
</estilo>
<table width="200" border="0" cellpacing="1" cellpadding="0" class="thin">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tabela>