usando a tabela td: primeiro filho, tabela td: seletor de último filho, você pode estilizar a primeira ou a última coluna da tabela (exceto para a primeira célula do cabeçalho da tabela);
usando o seletor de tabela td: nth-child (regra de seleção de coluna), você pode definir o estilo de qualquer coluna da tabela.
Você pode ler mais sobre seletores CSS.
, e usando a propriedade caption-side, pode ser colocado na frente ou abaixo da mesa. A propriedade text-align é usada para alinhar horizontalmente o texto do título. Herdado.
Tabela No. 1
| Empresa |
T1 |
Q2 |
3º T |
Q4 |
...
caption (caption-side: bottom; text-align: right; padding: 10px 0; font-size: 14px;) 
Arroz. 2. Um exemplo de exibição do cabeçalho sob a tabela 6. Como remover a lacuna entre os quadros de células
Por padrão, as bordas das células da tabela são separadas por um pequeno espaço. Se você definir border-collapse: collapse para a tabela, a lacuna será removida. A propriedade é herdada.
Sintaxe
Tabela (colapso da borda: colapso;)
Arroz. 3. Um exemplo de tabelas com bordas de células mescladas e divididas
7. Como aumentar o espaço entre as bordas das células
Usando a propriedade border-spacing, você pode alterar a distância entre as bordas das células. Esta propriedade se aplica à tabela como um todo. Herdado.
Sintaxe
Tabela (recolhimento da borda: separado; espaçamento da borda: 10px 20px;) tabela (recolhimento da borda: separado; espaçamento da borda: 10px;)
Arroz. 4. Um exemplo de tabelas com intervalos aumentados entre quadros de células
8. Como ocultar células vazias da tabela
A propriedade empty-cells oculta ou mostra células vazias. Afeta apenas células que não contêm nenhum conteúdo. Se um plano de fundo for especificado para uma célula e uma tabela (border-collapse: collapse;) for especificada para uma tabela, a célula não será ocultada. Herdado.
| Empresa |
T1 |
Q2 |
3º T |
| Microsoft |
20.3 |
30.5 |
|
| Google |
50.2 |
40.63 |
45.23 |
table (border: 1px solid # 69c; border-collapse: separ; empty-cells: hide;) th, td (border: 2px solid # 69c;) 
Arroz. 5. Um exemplo de como ocultar uma célula de tabela vazia 9. Layout do layout da tabela usando a propriedade table-layout
O layout de um layout de mesa é determinado por uma de duas abordagens: layout fixo ou layout automático. Layout, neste caso, significa como a largura da tabela é distribuída entre a largura das células. A propriedade não é herdada.
Sintaxe
Tabela (layout da mesa: fixo;)
10. Melhores layouts de mesa
1. Minimalismo horizontal
Tabelas horizontais são tabelas nas quais o texto é lido horizontalmente. Cada entidade é uma linha separada. Você pode estilizar tabelas como essa em um estilo minimalista, colocando uma borda de dois pixels sob o título.
| Empregado | Salário | Bônus | Supervisor |
|---|
| Stephen C. Cox | $300 | $50 | Prumo |
| Josephin tan | $150 | - | Annie |
| Joyce Ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
tabela (família da fonte: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; tamanho da fonte: 14px; fundo: branco; largura máxima: 70%; largura: 70%; redução da borda: recolher; texto -align: left;) th (font-weight: normal; color: # 039; border-bottom: 2px solid # 6678b1; padding: 10px 8px;) td (color: # 669; padding: 9px 8px; transição: .3s linear;) tr: hover td (cor: # 6699ff;)Com um grande número de linhas, esse design de tabelas dificulta a leitura. Para resolver esse problema, você pode adicionar uma borda de um pixel em todos os elementos td.
Td (borda inferior: 1px sólido #ccc; cor: # 669; preenchimento: 9px 8px; transição: .3s linear;) / * o resto do código é como no exemplo acima * /
Adicionar um efeito: hover ao elemento tr torna as tabelas de estilo minimalista mais fáceis de ler. Quando você passa o mouse sobre uma célula, o resto das células na mesma linha são realçadas ao mesmo tempo, o que simplifica o processo de manter o controle das informações se as tabelas tiverem várias colunas.
Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: hover td (background: # e8edff ;)
2. Minimalismo vertical
Embora essas tabelas sejam raramente usadas, as tabelas orientadas verticalmente são úteis para categorizar ou comparar descrições de objetos representados por uma coluna. Você pode estilizá-los em um estilo minimalista adicionando um espaço separando as colunas.
Th (font-weight: normal; border-bottom: 2px solid # 6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: # 039; padding: 8px 2px;) td (border- direita: 30 px sólido #fff; borda esquerda: 30 px sólido #fff; cor: # 669; preenchimento: 12 px 2 px;)
3. Estilo "caixa"
O estilo mais confiável para decorar mesas de todos os tipos é o chamado estilo "caixa". Basta escolher um bom esquema de cores e, em seguida, definir a cor de fundo de todas as células. Lembre-se de enfatizar a diferença entre as linhas definindo as bordas como separadores.
Th (font-size: 13px; font-weight: normal; background: # b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: # 039; padding: 8px;) td (background : # e8edff; border-bottom: 1px solid #fff; color: # 669; border-top: 1px solid transparent; padding: 8px;) tr: hover td (background: #ccddff;)
A parte mais difícil é encontrar o esquema de cores que combine harmoniosamente com o seu site. Se o site for carregado com gráficos e design, será muito difícil para você usar esse estilo.
Tabela (família da fonte: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; tamanho da fonte: 14px; largura máxima: 70%; largura: 70%; alinhamento do texto: centro; redução da borda: recolher ; border-top: 7px sólido # 9baff1; border-bottom: 7px sólido # 9baff1;) th (font-size: 13px; font-weight: normal; background: # e8edff; border-right: 1px sólido # 9baff1; border- esquerda: 1px sólido # 9baff1; cor: # 039; preenchimento: 8px;) td (plano de fundo: # e8edff; borda direita: 1px sólido #aabcfe; borda esquerda: 1px sólido #aabcfe; cor: # 669; preenchimento: 8px ;)
4. Zebra horizontal
A mesa Zebra parece muito atraente e prática. A cor de fundo complementar pode servir como uma dica visual para as pessoas lerem a tabela.
Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: enésimo filho (2n) ( fundo: # e8edff;)
5. Estilo de jornal
Para obter o chamado efeito de jornal, você pode aplicar bordas aos elementos da mesa e brincar com as células internas. Um estilo de jornal leve e mínimo pode ter a seguinte aparência: brincar com o esquema de cores, adicionar bordas, preenchimento, planos de fundo diferentes e efeito a: hover ao passar o mouse sobre uma linha.
Tabela (borda: 1px sólido # 69c;) th (espessura da fonte: normal; cor: # 039; borda inferior: 1px tracejada # 69c; preenchimento: 12px 17px;) td (cor: # 669; preenchimento: 7px 17px; ) tr: hover td (plano de fundo: #ccddff;)
Table (border: 1px solid # 69c;) th (font-weight: normal; color: # 039; padding: 10px;) td (color: # 669; border-top: 1px tracejado #fff; padding: 10px; plano de fundo: #ccddff;) tr: hover td (plano de fundo: # 99bcff;)
Tabela (borda: 1px sólido # 6cf;) th (font-weight: normal; font-size: 13px; cor: # 039; text-transform: maiúsculo; border-right: 1px sólido # 0865c2; border-top: 1px sólido # 0865c2; border-left: 1px solid # 0865c2; border-bottom: 1px solid #fff; padding: 20px;) td (color: # 669; border-right: 1px tracejado # 6cf; padding: 10px 20px;)
6. Fundo da mesa
Se você está procurando uma maneira rápida e única de estilizar sua mesa, escolha uma imagem ou foto atraente relacionada ao tema da mesa e defina-a como plano de fundo da mesa.
Png ") 98% 86% sem repetição;) th (font-weight: normal; font-size: 14px; color: # 339; padding: 10px 12px; background: white;) td (color: # 669; border- topo: 1px branco sólido; preenchimento: 10px 12px; plano de fundo: rgba (51, 51, 153, .2); transição: .3s;) tr: hover td (plano de fundo: rgba (51, 51, 153, .1); )
Olá pessoal! Então, agora você pode criar tabelas elementares, consistindo de quantas linhas e colunas você precisar. Nada mal nada mal. Agora vamos falar sobre o design dessas tabelas.
Na última lição, as tabelas foram exibidas sem bordas. E, veja você, parece mais ou menos, você não pode nem mesmo chamá-lo de um sinal. Para fazer bordas de tabela em HTML, adicione à tag
atributo fronteira atribuindo a ele um valor diferente de zero.
Então, vamos fazer bordas para a mesa. Por exemplo, para o que já temos:
| Célula superior esquerda | Célula superior direita |
| Célula inferior esquerda | Célula inferior direita |
Resultado no navegador:
Como remover bordas de mesa
Por sua vez, para remover as bordas da tabela HTML, ou você também pode dizer para torná-las invisíveis, você precisa do atributo fronteira valor definido 0
... Após essas ações simples, o quadro será removido.
O atributo permite que você crie, mas não gerencie bordas. Ele apenas permite que você altere sua espessura.
Portanto, agora vamos falar sobre CSS cujas propriedades tornam isso possível com fronteira crie bordas diferentes, tanto dentro quanto fora de cada célula, ao redor da mesa como um todo.
Vamos dar uma olhada em como aplicar CSS para criar as bordas externa e interna de uma tabela.
Para fazer isso, remova o atributo border de nossa tabela e adicione estilos:
Mesa de exemplo
| Célula superior esquerda |
Célula superior direita |
| Célula inferior esquerda |
Célula inferior direita |
Resultado no navegador:
Agora vamos adicionar bordas para cada célula também. Para fazer isso, basta adicionar os estilos:
Resultado no navegador:
Como remover o preenchimento entre células na tabela HTML
Concorde que uma borda definida com CSS não tem a mesma aparência que você gostaria. Sem dúvida, do ponto de vista da estética, há muito trabalho a fazer. Na página do navegador, você pode ver que, por padrão, ele exibe as bordas das tabelas e células separadamente. Um exemplo demonstra isso claramente.
No entanto, é bem possível se livrar dessas bordas, que são chamadas de duplas, se usarmos a propriedade CSS de recolhimento de borda. Na prática, é assim:
Tabela (borda: azul sólido 1px; colapso da borda: colapso;) ...
Como resultado, a distância entre as células é removida:
O valor de recolhimento atribuído ao atributo de borda remove as bordas duplas. Como você pode ver, o resultado é um colapso das bordas das células adjacentes, bem como das bordas das células e da borda externa da tabela. Quanto ao último, pode ser removido completamente. E se houver necessidade de exibi-lo, é necessário aumentar sua largura. Assim, eliminamos os separadores da tabela. E na próxima lição falaremos sobre como você pode definir bordas verticais e horizontais. Boa sorte a todos!
Dados tabulares- informações que podem ser exibidas na forma de uma tabela e logicamente divididas em colunas e linhas. A tag HTML é usada para exibir dados tabulares em páginas da web
, que é um contêiner com o conteúdo da tabela. O conteúdo da tabela HTML é descrito linha por linha, cada linha começa com uma tag de abertura e termina com uma tag de fechamento
.
Dentro da tag
as células da tabela estão localizadas, representadas por tags | ou | ... São as células que contêm todo o conteúdo da tabela exibido na página da web.
Moldura de mesa
Por padrão, uma tabela HTML em uma página da web é renderizada sem uma borda; para adicionar uma borda à tabela, como todos os outros elementos, a propriedade CSS border é usada. Mas você deve prestar atenção ao fato de que se você adicionar uma borda apenas ao elemento , então ele será exibido ao redor de toda a tabela. Para que as células da tabela também tenham uma borda, você precisará definir a propriedade da borda para os elementos | e | . Table, th, td (border: 1px solid black;) Experimente " Agora, a tabela e as células têm bordas, enquanto cada célula e tabela têm suas próprias bordas. Como resultado, um espaço vazio apareceu entre os quadros; a propriedade border-spacing permite controlar o tamanho deste espaço, que é definido para toda a tabela. Em outras palavras, você não pode controlar as lacunas entre células diferentes individualmente.
Mesmo se removermos as lacunas entre as células usando o valor 0 da propriedade border-spacing, as bordas das células se tocarão, dobrando. A propriedade border-collapse é usada para mesclar as bordas das células. Pode ter dois valores:
- separado: é o padrão. As células são exibidas a uma curta distância umas das outras, cada célula tem sua própria borda.
- recolher: conecta os quadros adjacentes em um, todos os intervalos entre as células, bem como entre as células e o quadro da tabela, são ignorados.
Nome do documento
| Nome | Sobrenome |
|---|
| Homer | o Simpson |
| Marge | o Simpson |
| Nome | Sobrenome |
|---|
| Homer | o Simpson |
| Marge | o Simpson |
Experimente " Tamanho da mesa
Depois de adicionar quadros às células da tabela, tornou-se perceptível que o conteúdo das células está muito próximo das bordas. Você pode usar a propriedade padding para adicionar um espaço em branco entre as bordas das células e seu conteúdo: Th, td (padding: 7px;) Experimente " O tamanho da mesa depende do seu conteúdo, mas muitas vezes surgem situações em que a mesa é muito estreita e é necessário esticá-la. A largura e a altura da tabela podem ser alteradas usando as propriedades de largura e altura, definindo as dimensões desejadas para a própria tabela ou para as células: Tabela (largura: 70%;) th (altura: 50px;) Experimente " Alinhamento de texto
Por padrão, o texto nas células do cabeçalho da tabela é alinhado ao centro e o texto nas células normais é alinhado à esquerda. Usando a propriedade text-align, você pode controlar o alinhamento horizontal do texto.
A propriedade CSS de alinhamento vertical permite controlar o alinhamento vertical do conteúdo do texto. Por padrão, o texto é alinhado verticalmente ao centro das células. O alinhamento vertical pode ser substituído por um dos valores da propriedade de alinhamento vertical:
- topo: o texto é alinhado ao topo da célula
- meio: alinha o texto ao centro (padrão)
- inferior: o texto é alinhado à parte inferior da célula
Nome do documento
| Nome | Sobrenome |
|---|
| Homer | o Simpson |
| Marge | o Simpson |
Experimente " Alternando a cor de fundo das linhas da tabela
Ao olhar para tabelas grandes contendo muitas linhas com muitas informações, pode ser difícil controlar quais dados pertencem a uma linha específica. Para ajudar os usuários a navegar, você pode usar duas cores de fundo diferentes alternadamente. Para criar o efeito descrito, você pode usar o seletor de classe, adicionando-o a cada segunda linha da tabela:
Nome do documento
| Nome | Sobrenome | Posição |
|---|
| Homer | o Simpson | pai |
| Marge | o Simpson | mãe |
| Bart | o Simpson | um filho |
| Lisa | o Simpson | filha |
Experimente "Adicionar um atributo de classe a cada segunda linha é uma tarefa tediosa. A pseudo classe: nth-child foi adicionada ao CSS3 para resolver esse problema de uma maneira alternativa. Já o efeito de intercalação pode ser alcançado exclusivamente por meio de CSS, sem recorrer à alteração da marcação HTML do documento. Com a pseudo-classe: n-ésimo filho, você pode selecionar todas as linhas pares ou ímpares em uma tabela usando uma das palavras-chave par (par) ou ímpar (ímpar): Tr: enésimo filho (ímpar) (cor de fundo: # EAF2D3;) Experimente " Alterar o plano de fundo da linha ao passar o mouse
Outra maneira de melhorar a legibilidade dos dados tabulares é alterar a cor de fundo de uma linha ao passar o mouse sobre ela. Isso ajudará a destacar o conteúdo da tabela desejado e melhorar a percepção visual dos dados.
A implementação desse efeito é muito simples, para isso você precisa adicionar a pseudoclasse: hover ao seletor de linha da tabela e definir a cor de fundo desejada: Tr: hover (background-color: # E0E0FF;) Experimente " Alinhamento central da mesa
O alinhamento de uma tabela HTML ao centro só é possível se a largura da tabela for menor que a largura de seu elemento pai. Para alinhar a mesa no centro, você precisa usar a propriedade margin, configurando-a pelo menos dois valores: o primeiro valor será responsável pela margem externa da mesa na parte superior e inferior, e o segundo - pelo alinhamento central automático : Tabela (margem: 10px automático;) Experimente " Se precisar de margens diferentes na parte superior e inferior da tabela, você pode definir a propriedade da margem para três valores: o primeiro será responsável pela margem superior, o segundo pelo alinhamento horizontal e o terceiro pela margem inferior: Tabela (margem: 10px auto 30px;)
Consideramos muitos métodos de estilização de elementos na página, como informações de texto, links, imagens, cabeçalhos, mas tudo isso ainda não é suficiente. Em meus artigos, costumo usar elementos HTML, como tabelas, porque na maioria dos casos eles são ajudar a organizar informações importantes e torná-las mais fáceis de apresentar.
Neste artigo, vou apresentar a você as complexidades de estilizar tabelas HTML, e você aprenderá novas propriedades CSS projetadas para atingir esses objetivos.
A linguagem de marcação de hipertexto HTML nos forneceu um grande número de oportunidades para vincular estilos CSS a dez tags exclusivas projetadas para trabalhar com tabelas. Sugiro repeti-las antes de um estudo mais aprofundado:
| Marcação | Descrição |
|---|
| Define o conteúdo da tabela. |
|
| Especifica o nome da tabela. |
|
| Define a célula do cabeçalho da tabela. |
|---|
|
| Define uma linha em uma tabela. |
|
| Define a célula de dados da tabela. |
| Usado para conter o título do grupo na tabela (título da tabela). |
| |
Usado para conter o "corpo" da tabela. |
|
Usado para conter o "rodapé" da tabela (rodapé). |
|
| Define as propriedades da coluna especificada para cada coluna dentro de uma tag .
|
|
| Define um grupo de colunas em uma tabela. |
Trabalhar com recuos de tabela
Uso de preenchimento em uma mesa
Recuos de tabela
|
1 |
2 |
3 |
4 |
|
2 | | | |
|
3 | | | |
|
4 | | | |
Neste exemplo, nós:
- Coloque a mesa no centro, usando a técnica de centralização horizontal com margens externas (margem: 0 auto).
- Para o nome da tabela (tag ) definimos o preenchimento inferior para 19 pixels. Espero que não se confunda com os números ímpares :)
O resultado do nosso exemplo:
Espaçamento entre células
Após o exemplo acima, você deve ter notado que temos uma lacuna entre todas as células da tabela. Vejamos como remover a lacuna entre as células da tabela ou aumentá-la.
Para definir a distância entre as bordas das células vizinhas, você deve usar a propriedade CSS - border-spacing.
Altere o espaçamento entre as tabelas
espaçamento da borda: 30px 10px;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
espaçamento entre bordas: 0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
espaçamento de borda: 0,2em;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
Neste exemplo, nós:
- flutuar: esquerda). Se você perdeu o tópico de elementos flutuantes, pode sempre voltar a ele neste tutorial - "".
- Além disso, definimos o preenchimento da tabela à direita em 30px e definimos o alinhamento vertical das tabelas (a parte superior do elemento é alinhada com a parte superior do elemento mais alto). Voltaremos a esta propriedade em detalhes neste artigo.
- ) - negrito.
- Para as células da tabela (células de cabeçalho e dados), definimos uma borda sólida de 1 pixel com # F50 hex e definimos o preenchimento para 19 pixels para todos os lados.
- Para a primeira mesa com aula .primeiro definimos o espaçamento entre as células da tabela (propriedade de espaçamento de borda) para 30px 10px, para a segunda tabela com a classe .segundo igual a zero, para a terceira mesa com classe .terceiro igual a 0,2em.
Chamo sua atenção para o fato de que se apenas um valor de comprimento for especificado na propriedade de espaçamento de borda, ele indica o espaçamento, tanto horizontal quanto verticalmente, e se dois valores de comprimento são especificados, o primeiro determina a distância horizontal e a segunda vertical. A distância entre as bordas das células adjacentes pode ser especificada em unidades CSS (px, cm, em, etc.). Valores negativos não são permitidos.
O resultado do nosso exemplo:
Exibir bordas ao redor das células da tabela
Você pode dizer: - então, removemos o espaçamento entre as células usando a propriedade border-spacing com um valor de 0, mas por que agora temos as bordas das células se cruzando?
Bordas duplas são formadas devido ao fato de que a borda inferior de uma célula é adicionada à borda superior da célula que está abaixo dela, uma situação semelhante ocorre nas laterais das células e isso é lógico do ponto de vista de exibição a mesa, mas felizmente há uma maneira de dizer ao navegador que não queremos ver um comportamento tão atrevido das bordas das células.
Para fazer isso, você precisa usar a propriedade CSS border-collapse. Curiosamente, usar a propriedade de recolhimento de borda com o valor de recolhimento é a melhor maneira de remover a lacuna entre as células sem obter bordas duplas entre elas.
Considere uma comparação do comportamento da borda ao usar a propriedade border-spacing com um valor de 0 e a propriedade border-collapse com um valor de collapse:
Exemplo de exibição de bordas ao redor das células da tabela
espaçamento entre bordas: 0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
colapso da fronteira: colapso;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
Neste exemplo, nós:
- Deixou nossas tabelas flutuantes e alinhadas à esquerda (float: left), defina seu padding direito para 30px.
- Definido para o nome da tabela (tag ) - negrito.
- Para as células da tabela (células de cabeçalho e dados), definimos uma borda sólida de 5px com # F50 hexadecimal e definimos uma largura fixa de 50px e uma altura de 75px.
- Para a primeira mesa com aula .primeiro definimos o espaçamento entre as células da tabela para zero (espaçamento da borda: 0;), e para a segunda tabela com a classe .segundo defina a propriedade border-collapse para recolher, o que mescla as bordas das células em uma, quando possível.
O resultado do nosso exemplo:
Comportamento de célula vazia
Usando CSS, você pode definir se deseja exibir bordas e fundos para células vazias em uma tabela ou não. A propriedade empty-cells é responsável por este comportamento, que por padrão, como você deve ter notado nos exemplos anteriores, exibe células vazias.
Vamos ver um exemplo:
Exemplo de exibição de células de tabela vazias
células vazias: mostrar;
|
1 |
2 |
3 |
|
2 | |
☺ |
|
3 |
☺ | |
células vazias: esconder;
|
1 |
2 |
3 |
|
2 | |
☺ |
|
3 |
☺ | |
Para entender como a propriedade empty-cells funciona a partir deste exemplo é muito simples, se for definida para ocultar, então as células vazias e o fundo delas serão ocultados, se definida para mostrar (o padrão), então eles serão exibidos.
Localização do cabeçalho da tabela
Vejamos outra propriedade simples para estilizar tabelas - caption-side, que define a posição da legenda da tabela (acima ou abaixo da tabela). Por padrão, a propriedade caption-side é definida como top, o que coloca a legenda acima da tabela. Para colocar o título sob a tabela, você precisa usar a propriedade com o valor bottom.
Vejamos um exemplo de uso desta propriedade:
Exemplo de uso da propriedade caption-side
Cabeçalho acima da mesa
| Nome | Preço |
| Um peixe | 350 rublos |
| Eu no | 250 rublos |
Título abaixo da tabela
| Nome | Preço |
| Um peixe | 350 rublos |
| Eu no | 250 rublos |
Neste exemplo, criamos duas aulas que controlam a posição do cabeçalho da tabela. Primeira série ( .topCaption) coloca o título da tabela acima dela, nós o aplicamos à primeira tabela e à segunda classe ( .bottomCaption) coloca o título da tabela abaixo dela, nós o aplicamos à segunda tabela. Classe .topCaption tem uma propriedade do lado da legenda padrão e foi criada para fins de demonstração.
O resultado do nosso exemplo:
Alinhamento horizontal e vertical
Na maioria dos casos, ao trabalhar com tabelas, você precisará ajustar o alinhamento do conteúdo dentro do cabeçalho e das células de dados. A propriedade text-align é usada para alinhamento horizontal semelhante a qualquer informação de texto. Discutimos o uso dessa propriedade para texto anteriormente no artigo "".
Para definir o alinhamento do conteúdo nas células, você precisa usar palavras-chave especiais com a propriedade text-align. Vamos considerar a aplicação das palavras-chave desta propriedade no exemplo a seguir.
Exemplo de alinhamento horizontal em uma mesa
|
Significado | Descrição |
|
deixou | Alinha o texto da célula à esquerda. Este é o padrão (se a direção do texto for da esquerda para a direita). |
|
direito | Alinha o texto da célula à direita. Este é o padrão (se a direção do texto for da direita para a esquerda). |
|
Centro | Alinha o texto da célula ao centro. |
|
justificar | Estica as linhas para que cada linha tenha a mesma largura (estica o texto da célula para caber na largura). |
Neste exemplo, criamos quatro classes, que definem diferentes alinhamentos horizontais nas células e os aplicam nas linhas da tabela. O valor na célula corresponde ao valor da propriedade text-align
O resultado do nosso exemplo:
Além do alinhamento horizontal, você também pode definir o alinhamento vertical nas células da tabela usando a propriedade de alinhamento vertical.
Observe que ao trabalhar com células de tabela, apenas os seguintes valores * desta propriedade são usados:
*
- Os valores sub, super, text-top, text-bottom, length e% aplicados à célula da tabela irão se comportar como se estivessem usando o valor da linha de base.
Vejamos um exemplo de uso:
Exemplo de alinhamento vertical em uma tabela
|
Significado | Descrição |
|
linha de base | Alinha a linha de base da célula com a linha de base do pai. Este é o padrão. |
|
principal | Alinha o conteúdo da célula verticalmente para cima. |
|
meio | Alinha o conteúdo da célula verticalmente no meio. |
|
fundo | Alinha o conteúdo da célula verticalmente na parte inferior. |
Neste exemplo, criamos quatro classes, que definem diferentes alinhamentos verticais nas células e os aplicam nas linhas da tabela. O valor na célula corresponde ao valor da propriedade de alinhamento vertical que foi aplicada a essa linha.
Algoritmo para colocar o layout da tabela pelo navegador
CSS usa o algoritmo de layout de tabela automático do navegador por padrão. Nesse caso a largura da coluna é definida pelo conteúdo não-separável mais amplo da célula... Este algoritmo pode ser lento em alguns casos, pois o navegador deve ler todo o conteúdo da tabela antes de determinar seu layout final.
Para alterar o tipo de layout da tabela pelo navegador com automático sobre fixo, você deve usar a propriedade CSS de layout de tabela com o valor fixo.
Neste caso, o posicionamento horizontal depende apenas de da largura da tabela e da largura das colunas, e não do conteúdo das células. O navegador começa a exibir a tabela imediatamente após o recebimento da primeira linha. Como consequência, o algoritmo fixo permite que você crie o layout de tal tabela mais rápido do que usar a versão automática. Ao trabalhar com tabelas grandes, você pode usar um algoritmo fixo para melhorar o desempenho.
Vejamos a aplicação desta propriedade com o seguinte exemplo:
Um exemplo de uso da propriedade table-layout
layout da tabela: automático;
| Nome |
2009 |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
| Trigo |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
layout da mesa: fixo;
| Nome |
2009 |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
| Trigo |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
Neste exemplo, nós:
Estilizando linhas e colunas da tabela
Já mencionamos parcialmente os métodos de estilização das linhas e colunas da tabela no artigo "". Neste artigo, vimos como usar uma pseudoclasse de grupo que permite alternar estilos de linha em tabelas usando valores até (honesto) e ímpar (ímpar), ou por elementar fórmula matemática.
Vamos revisitar as técnicas anteriores e explorar novas maneiras de estilizar linhas e colunas em tabelas. Vamos ver exemplos.
Um exemplo de uso da pseudo classe: nth-child com tabelas
|
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
|
2 | | | | | | |
| | | | | | |
|
3 | | | | | | |
| | | | | | |
|
4 | | | | | | |
| | | | | | |
Neste exemplo, nós:
O resultado do nosso exemplo:
Vamos passar para o próximo exemplo, no qual veremos as opções para estilizar as linhas da tabela.
Um exemplo de estilo de linhas em tabelas
|
Serviço | Preço |
|
Soma |
15 000 |
|
1 |
1 000 |
|
2 |
2 000 |
|
3 |
3 000 |
|
4 |
4 000 |
|
5 |
5 000 |
Neste exemplo, nós:
- Defina a largura da tabela em 100% da largura do elemento pai, defina o cabeçalho e as células de dados em uma borda sólida de 1 px.
- Instalado para o item ("Rodapé" da tabela) cor de fundo - coral, para elemento ("Cabeçalho" da tabela) definir a cor de fundo prata.
- Para itens
que estão dentro do elemento (corpo da tabela) definir mudança de cor de fundo ao pairar (pseudo classe: pairar) c Branco por cor cáqui(toda a linha é destacada).
O resultado do nosso exemplo: Arroz. 153 Exemplo de linhas de estilo em tabelas O exemplo a seguir mostra como aplicar o arredondamento de cantos às células da tabela (propriedade).
Exemplo de arredondamento dos cantos de uma célula
Neste exemplo, nós:
- Centralize a tabela com preenchimentos, defina a largura e a altura das células do cabeçalho para 50px, especificado transparente borda de 5 pixels.
- Descobri que, ao passar (pseudo-classe: passar o mouse) sobre a célula do cabeçalho, obtém o plano de fundo azul cores, laranja cor do texto, borda laranja cores 5 pixels e um raio de 100%.
- Borda transparenteé necessário para reservar espaço para a borda, que será exibida em foco, se isso não for feito a tabela irá "pular".
O resultado do nosso exemplo:
O exemplo a seguir aborda o uso de elementos HTML e e seu estilo.
Exemplo de destaque de colunas da tabela
|
Número do aplicativo | Serviço | preço, esfregue. | Total |
|
1 | Cantando |
6 000 |
6 000 |
|
2 | a lavagem |
2 000 |
2 000 |
|
3 | Limpeza |
1 000 |
1 000 |
|
4 | Ranzinza |
1 500 |
1 500 |
|
5 | Lendo |
3 000 |
3 000 |
Neste exemplo, nós:
O resultado do nosso exemplo:
Pois bem, e o exemplo final, que é bastante difícil de entender e requer conhecimentos avançados em CSS, uma vez que toca em tópicos futuros planejados para estudo detalhado no âmbito deste curso.
No exemplo anterior, percebemos que o elemento HTML você pode aplicar apenas uma propriedade CSS, a cor de fundo, mas não pode definir diretamente a cor de fundo ao pairar (a pseudoclasse: hover) neste elemento. Neste exemplo, veremos como destacar uma coluna da tabela usando apenas CSS.
Um exemplo de destaque de colunas e linhas de uma tabela ao pairar
|
Número do aplicativo | Serviço | preço, esfregue. | Total |
|
1 | Cantando |
6 000 |
6 000 |
|
2 | a lavagem |
2 000 |
2 000 |
|
3 | Limpeza |
1 000 |
1 000 |
|
4 | Ranzinza |
1 500 |
1 500 |
|
5 | Lendo |
3 000 |
3 000 |
Neste exemplo, nós:
- Definimos nossa tabela para ocupar 100% do elemento pai, as células da tabela ocupam 25% do elemento pai e têm uma borda sólida verde de 1 pixel, os cabeçalhos e as células de dados têm 45px de altura. Removemos a lacuna entre as células usando a propriedade border-collapse com o valor
.
- E então, usando o pseudo-elemento :: after, adicione conteúdo após cada elemento.
em pairar. O pseudo-elemento :: after é necessariamente usado em conjunto com a propriedade content, graças ao qual inserimos um elemento de bloco que tem uma cor de fundo verde floresta e tem posicionamento absoluto.
- O posicionamento absoluto aqui é necessário para deslocar o elemento em relação à borda especificada de seu ancestral, enquanto o ancestral deve ter um valor de posição diferente do estático padrão, caso contrário, a contagem será relativa à borda especificada da janela do navegador, por este motivo nós colocamos para a mesa posicionamento relativo(relativo).
- Definimos para o nosso bloco gerado a propriedade top, que indica a direção do deslocamento do elemento posicionado a partir da borda superior, e a propriedade bottom, que indica a direção do deslocamento do elemento posicionado a partir da borda inferior. Para ambas as propriedades foi especificado o valor 0, então o bloco irá ocupar completamente o elemento de baixo e topo da mesa, a largura desse bloco foi fixada em 25%, este valor corresponde ao valor da largura da célula em si.
- E a propriedade final que definimos para este bloco: z-index com um valor de "-1" determina a ordem dos elementos posicionados por Eixo Z... Esta propriedade é necessária para que o texto fique na frente deste bloco, e não atrás dele, se você não definir um valor menor que zero, o bloco fechará o texto.
O resultado do nosso exemplo:
Se nesta fase do estudo você não entende o processo de posicionamento dos elementos, então não desanime, este é um tema difícil de entender, que também não consideramos, mas com certeza iremos considerá-lo no próximo artigo do tutorial "Posicionamento de elementos em CSS".
Perguntas e tarefas sobre o tema
Conclua a Atividade Prática antes de passar para o próximo tópico:
 Se você estiver tendo dificuldade para concluir a prática, pode sempre abrir o exemplo em uma janela separada e inspecionar a página para ver qual CSS foi usado.
2016-2020 Denis Bolshakov, você pode enviar seus comentários e sugestões sobre os trabalhos do site para o [email protected]
| |
|
| |
