Agora, vamos ver como usar a gramática CSS para embelezar as tabelas. NOTA: Salvo especificado de outra forma, os valores de CellPacing, CellPadding e Border das tabelas inseridas nos exemplos mencionados neste artigo são 0. Tabela de exemplo 1: 1px
Muitas pessoas gostam de fazer formulários de 1px, então inventaram vários métodos, que podem ser muito mais flexíveis quando usados com CSS. Se você deseja criar uma tabela 1x1 1px, basta definir o valor da borda. Primeiro, inserimos uma tabela 1x1 com Dreamweaver com uma largura de 50 e depois definimos a borda: 1 chá sólido na mesa ou no TD. O efeito da tabela feito é o seguinte:
No entanto, é um pouco mais problemático criar uma tabela não-1x1 (como 2x2), porque se você definir diretamente a borda do estilo TD: 1 chá sólido, o efeito da exibição é o seguinte:
Você descobrirá que a caixa externa da tabela é 1 px, enquanto o interior se torna 2px, devido à superposição. Para resolver esse problema, podemos fazer isso:
Primeiro defina o estilo para TD: borda:#cc0000 sólido; largura de borda: 0 1 1 0 , então a tabela é expressa como
Em seguida, defina o estilo para a tabela :: borda:#cc0000 sólido; largura de borda: 1 0 0 1 , para que você possa transformá-lo em uma tabela completa de 1px.
Exemplo 2: Tabela de 1px com bordas grossas
A linha de grade interna desta tabela é de 1px e a borda externa é de 3px. Não é difícil fazê-lo com a base do Exemplo 1. Apenas modifique o valor da largura da borda.
O código para o estilo usado pela tabela é: borda: azul sólido; largura de borda: 3 2 2 3 , e o código para o estilo usado pelo TD é: borda: azul sólido; largura de borda: 0 1 0 Exemplo 3: Tabela de caixa pontilhada
A prática é semelhante ao Exemplo 1 e o estilo de borda é alterado de sólido para tracejado. O código para o estilo usado na tabela é: borda: preto tracejado; largura de borda: 1 0 0 1 , e o código para o estilo usado no TD é: borda: preto tracejado; largura de borda: 0 1 1 0 Exemplo 4: Tabela de borda pontilhada e de linha
Observe que o pixel mínimo de pontilhado é 2. O código para o estilo usado na tabela é: borda: verde pontilhado; largura de borda: 2 0 0 2. O código para o estilo usado na TD é: borda: pontilhado verde; largura da borda: 0 2 2 0 Exemplo 5: Tabela de borda de linha dupla
Observe que o pixel mínimo de uma linha dupla é 3. O código para o estilo usado na tabela é: Border: Teal 4 Dou . O código para o estilo usado no TD é: Border: Teal 1 Solid Exemplo 6: Tabela de estrutura externa final
O código para o estilo usado pela tabela é: borda: 3 início e o código para o estilo usado pelo TD é: borda: 1 Solid Exemplo 7: Tabela de contorno inserido
O código para o estilo usado pela tabela é: Border: 3 Insert e o código para o estilo usado pelo TD é: borda: 1 Solid Exemplo 8: Ridge External Frame Table Table Table Table
O código para o estilo usado pela tabela é: Border:#EE0000 3 Ridge O código para o estilo usado pelo TD é: borda: 1 sólido
Página anterior 1 2 3 Próxima página Leia o texto completo