O objetivo da lição: Familiaridade com propriedades de tabela e princípios de layout de tabela CSS

Vamos dar uma olhada nas propriedades básicas da tabela CSS

fronteira

Uma propriedade é considerada em uma e inclui várias propriedades ao mesmo tempo:

• ESTILO DE BORDA
• BORDER-WIDTH
• COR DA BORDA

Também existe uma regra coletiva:

table.collapse (border-collapse: collapse;) table.separate (border-collapse: separar;)

Resultado:

largura e altura
(altura e largura da mesa)

Valores:

Exemplo:

alinhamento de texto
(alinhamento horizontal)

Valores:

• centro (centrado)
• esquerda (alinhado à esquerda)
• direita (alinhado à direita)
• justificar (largura)

alinhamento vertical
(Alinhamento vertical)

Valores:

• linha de base (linha de base)
• sub (como subíndice)
• super (como sobrescrito)
• topo (topo)
• meio (meio)
• inferior (inferior)
• % (da altura do espaçamento entre linhas)

Exemplo:

preenchimento
(estofamento de mesa)

cor de fundo (fundo)
cor (cor do texto)

Layout de tabela CSS

Devido ao grande número de propriedades de tabela e variações em seu design, as tabelas têm sido um padrão para o layout de páginas da web. Se você tornar as bordas da tabela invisíveis, poderá usar suas células individuais como blocos separados da página: cabeçalho, menu, rodapé, etc.

Mas isso não é totalmente correto, porque cada tag tem sua própria finalidade e as tabelas não deveriam servir para o layout da página. No entanto, a falta de uma alternativa levou os designers a usar este tipo de método de layout.

Agora existe uma outra maneira - usando camadas, que gradualmente substituiu as tabelas neste tipo de trabalho com uma página da web. No entanto, mesmo hoje em dia, alguns designers usam com sucesso o layout de mesa.

Layout de planilha de duas colunas

Um dos métodos de layout mais comuns são duas colunas, ou seja, a página é dividida em duas partes.

Normalmente, o lado esquerdo é o menu e os elementos adicionais, e o lado direito é o principal para o conteúdo principal.

Neste caso, a largura do lado esquerdo é definida para um determinado valor, ou seja, duro e o lado direito ocupa o resto da página.

Neste caso, você precisa definir a largura total de toda a tabela (tag da tabela) em porcentagem usando a propriedade de largura (100%), e para a primeira célula (tag td) definir a largura (também a propriedade de largura) em pixels ou por cento.

Exemplo: definir o quadro principal da página em duas colunas: a primeira - com um tamanho fixo, a segunda - para o resto da área do navegador. Execute a tarefa usando estilos CSS ()

Atuação:

</ head> <corpo> <id da tabela = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "right"> 2</ td> </ tr> </ mesa> ...

1

2

...

Resultado:

Agora, vamos tentar separar visualmente as duas colunas da tabela uma da outra.

Exemplo: definir um fundo de células diferente (para separar duas colunas uma da outra) e definir a distância entre as colunas (separador)

Atuação:
Vamos adicionar novas propriedades de estilo:

/ * para a célula esquerda * / td # esquerda (largura: 200px; plano de fundo: #ccc; borda: 1px preto sólido; / * denota temporariamente bordas * /) / * para a célula direita * / td # direita (plano de fundo: # fc3; border: 1px sólido preto; / * denotam temporariamente bordas * /) / * para separador * / #razdel (largura: 10px; / * Espaçamento entre colunas * /)

Juntos:

</ head> <corpo> <id da tabela = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "razdel"> <td id = "right"> 2</ td> </ tr> </ mesa>

1

2

Uma nova célula foi adicionada para o separador.
Resultado:

Você também pode tornar o separador entre as colunas menos proeminente. Para fazer isso, usaremos estilos de borda.

Exemplo: faça um separador entre as colunas da tabela usando a borda tracejada das células adjacentes

Atuação:
Vamos adicionar novas propriedades de borda para células:

/ * para a célula esquerda * / td # left (width: 200px; background: #ccc; / * Cor de fundo da coluna esquerda * / / * new * / border-right: 1px tracejado # 000; / * Opções de borda direita tracejada * / )

Juntos:

</ head> <corpo> <id da tabela = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "right"> 2</ td> </ tr> </ mesa>

1

2

Resultado:

Layout de planilha de três colunas

Existe um conceito de layout fixo ou "fluido".

CSS de layout fixo

• Usando layout fixo a largura de toda a mesa é definida em pixels, e então, independentemente da resolução do monitor e da janela do navegador, a mesa sempre terá a mesma largura.
• Nesse caso a largura das colunas restantes também deve ser fixada.
• É possível não especificar a largura de uma célula, então ela será calculada automaticamente com base nas dimensões das células restantes e de toda a tabela.

Exemplo: crie um modelo de página com três colunas. Use layout de mesa fixo:

• coluna esquerda - 150 pixels;
• coluna do meio - 400 pixels;

Atuação:

</ head> <corpo> <id da tabela = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "right"> 3</ td> </ tr> </ mesa>

1

2

3

Resultado:

Maquete de borracha

• Largura da Mesa ao usar o design de "borracha" definido em% da largura da janela do navegador... Este. quando a janela do navegador muda, o tamanho da tabela também muda.
• Largura de todas as células pode ser instalado em percentagens.
• A segunda opção é quando largura de algumas células está estabelecido em percentagens, uma alguns em pixels.

Importante: A soma das larguras de todas as colunas deve ser 100%, independente da largura da tabela.

Exemplo:

• coluna da esquerda - 20%;
• coluna do meio - 40%;
• coluna da direita - 40%;

Defina o plano de fundo para as colunas e separe visualmente as colunas com uma borda.

Atuação:

</ head> <corpo> <id da tabela = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "right"> 3</ td> </ tr> </ mesa>

1

2

3

Resultado:

Considere a segunda opção, quando a largura da coluna central é selecionada automaticamente pelo navegador; um exemplo é a imagem:

Exemplo: crie um modelo de página com três colunas. Use um layout de mesa fluido:

• coluna esquerda - 150 pixels;
• coluna do meio - 40%;
• coluna direita - 200 pixels;

Defina o plano de fundo para as colunas e separe visualmente as colunas com uma borda.

Atuação:

</ head> <corpo> <id da tabela = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "right"> 3</ td> </ tr> </ mesa>

1

2

3

Resultado:
O resultado será aproximadamente o mesmo, apenas o "alongamento" ocorrerá devido à coluna central.

Usando uma tabela aninhada em um layout fluido

Se a largura de duas colunas for definida em porcentagens e a terceira em pixels, você não conseguirá sobreviver com uma tabela. Portanto, se a largura de toda a tabela é 100 por cento, a primeira coluna é de 200 pixels e as colunas restantes são de 20 por cento, um cálculo simples mostra que o tamanho da primeira coluna é de 60 por cento. Nesse caso, o navegador não aceitará o valor especificado em pixels e o tamanho será definido em porcentagem.

• A tabela original é criada com duas células. A largura da mesa é definida como uma porcentagem.
• Para a célula esquerda(primeira coluna) a largura está definida em pixels.
• Largura direita da célula(base para outros alto-falantes) não especificado... Uma segunda tabela é inserida dentro desta célula, também consistindo em duas células.
• A largura das células da tabela aninhada é definida como uma porcentagem..
• A largura da mesa interna deve ser definida para 100 por cento de modo que essa mesa ocupe todo o espaço livre da mesa externa.
• As larguras das colunas central e direita são calculadas em relação à largura da célula, não à tabela externa como um todo.

Exemplo: crie um modelo de página com três colunas. Use layout fluido com tabela aninhada:

• coluna esquerda - 150 pixels;
• coluna do meio - 60%;
• coluna da direita - 40%;

Defina o plano de fundo para as colunas.

Atuação:

1 2 3 Os atributos de tag cellpadding e cellspacing são necessários aqui, para que não haja "lacuna" entre as tabelas. Resultado: Especifica a distância entre as bordas das células na tabela. O atributo border-spacing não funciona quando a tabela tem a redução da borda definida para recolher. Sintaxe border-spacing: valor [valor] Argumentos Um valor define a distância vertical e horizontal entre as bordas das células. Se houver dois argumentos, o primeiro define a distância horizontal e o segundo define a distância vertical. 1 2 3 4 O resultado deste exemplo é mostrado na Fig. 1 Arroz. 1. Aplicando o parâmetro de espaçamento de borda Observação Se a tag o parâmetro cellspacing é adicionado, então, ao usar o atributo de estilo de espaçamento de borda, ele não é levado em consideração e o valor de espaçamento de células é ignorado. A exceção a essa regra é o Internet Explorer, que não compreende a propriedade de espaçamento de borda. Mesas border-collapse define como exibir as bordas em torno das células da tabela. Este parâmetro desempenha uma função quando uma borda é definida para as células, então uma linha de espessura dupla será obtida na junção das células. Adicionar o valor de recolhimento força o navegador a analisar esses lugares na tabela e remover as linhas duplas dela. table-layout define como o navegador deve calcular a altura e largura das células da tabela com base em seu conteúdo. border-spacing define o espaçamento entre as bordas das células na tabela. O atributo border-spacing não funciona quando a tabela tem o recolhimento de borda definido para recolher. CSS permite que você defina não apenas o estilo da borda da tabela, mas também o estilo das bordas das células individuais. Como cada célula tem suas próprias bordas, a borda entre as células adjacentes é duplicada. Mas é possível combinar as bordas das células vizinhas em uma. Há uma propriedade de colapso de borda para isso. Ele assume os valores: border-collapse: separe - cada célula tem sua própria borda (padrão) border-collapse: collapse - a fronteira geral border-collapse: inherit - o valor é obtido do elemento pai Por exemplo, vamos criar uma tabela e definir uma moldura para as células de todas as tabelas que estarão na página. Primeiro, não vamos mudar nada para ver como a mesa ficará: Estilo: 1 2 3 4 5 6