Como estilizar tabela com CSS

Como Estilizar Tabela Com Css



As tabelas são a ferramenta mais comum e eficaz para representar dados de forma organizada. Antigamente, antes do CSS, o elemento foi utilizado para criar layouts de design ricos. Mas hoje em dia, os layouts são criados utilizando várias outras propriedades CSS. Mais especificamente, o elemento HTML “” é usado para criar uma tabela da web, que pode ser estilizada aplicando diferentes propriedades CSS.

Este estudo orientará sobre como estilizar tabelas com CSS.

Como estilizar tabela com CSS?

Para aplicar estilos à tabela, seguiremos a série de etapas abaixo.





Etapa 1: criar uma tabela em HTML



< tabela >
< rubrica > Informações dos Alunos < / rubrica >
< cabeça >
< tr >
< º > Nome < / º >
< º > Curso < / º >
< º > Marcas < / º >
< / tr >
< / cabeça >
< corpo >
< tr >
< td > William < / td >
< td > rede < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Jack < / td >
< td > Introdução ao C++ < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Joseph < / td >
< td > Introdução ao Java < / td >
< td > 77 < / td >
< / tr >
< / corpo >
< / tabela >

Para criar uma tabela em HTML, são utilizados os seguintes elementos HTML:



  • “ ” é usado para criar uma tabela em HTML.
  • “ ” elemento é utilizado para adicionar uma legenda à tabela.
  • “
” é utilizado para especificar o cabeçalho da tabela, que geralmente contém os cabeçalhos.
  • “
    • ” é usado para a linha de adição.
  • “
    • ” especifique o conteúdo do cabeçalho.
  • “ ” especifica a parte do corpo da tabela.

    • A tabela criada atualmente se parece com isso:



    Vamos avançar para ver como estilizar esta tabela.



    Etapa 2: Estilize o elemento “corpo”

    corpo {
    família da fonte: Verdana, Geneva, Tahoma, sans-serif;
    fundo- cor : rgb ( 233 , 233 , 233 ) ;
    }

    O elemento é aplicado com as seguintes propriedades de estilo CSS:

    • “ família de fontes ” propriedade com o valor “ Verdana, Genebra, Tahoma, sem serifa ” é utilizado para aplicar a fonte compatível com o navegador. Se o navegador não suportar o primeiro estilo de fonte, o outro será usado.
    • “ cor de fundo ” define a cor de fundo do elemento.

    Passo 3: Estilize o elemento “legenda”

    rubrica {
    Fonte- Tamanho : 25 px;
    texto- alinhar : Centro;
    fundo- cor : #1C6758;
    cor : seda de milho;
    }

    O elemento

    tem o seguinte estilo:

    • “ tamanho da fonte ” é utilizada para a configuração do tamanho da fonte.
    • “ alinhamento de texto ” especifica o alinhamento do texto do elemento.
    • “ cor ” refere-se à cor da fonte do elemento.

    Aqui está a saída do código fornecido acima:

    Etapa 4: adicionar borda à tabela
    O ' fronteira ” é utilizada para adicionar uma borda ao redor do elemento. É uma propriedade abreviada que especifica a largura da borda, o estilo da borda e a cor da borda.

    Vamos aplicar a borda, junto com o preenchimento e a margem na tabela:

    tabela, th, td {
    fronteira : 2px sólido #1C6758;
    preenchimento: 1px 6px;
    margem: automática;
    }

    Aqui:

    • “ fronteira ” ajusta a borda ao redor da tabela, especificando a largura da borda, o estilo da borda e a cor da borda.
    • “ preenchimento ” especifica o espaço ao redor do conteúdo do elemento, onde o primeiro valor define o espaço na parte superior e inferior e o segundo valor adiciona espaço nos lados direito-esquerdo do conteúdo.
    • “ margem ” propriedade com o valor “ auto ” adiciona espaço igual ao redor do elemento.

    Saída

    Observação : Se não quisermos os espaços entre as bordas da tabela, use a propriedade border-collapse.

    Etapa 5: recolher o espaçamento da borda da tabela
    Os espaços entre as bordas da tabela podem ser removidos utilizando o botão “ colapso da fronteira ” com o valor “collapse”:

    colapso de fronteira: colapso;

    Etapa 6: ajuste o tamanho da mesa
    Vamos ver como ajustar o tamanho da tabela:

    thead th {
    largura : 160 pixels;
    }

    O adicionado “ largura ” com o elemento

    ajustará automaticamente o tamanho da tabela de acordo com ele::

    Também podemos aplicar estilos à célula da tabela específica. Vamos discuti-los!

    Passo 7: Estilizar Células de Tabela Específicas
    Para estilizar a célula da tabela específica, especifique o nome da classe dessa célula específica. Por exemplo, o código abaixo representa que a terceira célula da segunda linha recebe um nome de classe “ realçar ”:

    < td aula = 'realçar' > 99 < / td >

    Agora, acesse a célula usando o nome da classe no arquivo CSS:

    .realçar {
    fundo- cor : #0f90d5;
    }

    O ' .realçar ” refere-se ao destaque de classe do elemento

    		. Este elemento é aplicado com o “ cor de fundo ” para especificar a cor do plano de fundo.

    Como podemos ver, a célula da tabela especificada foi estilizada com sucesso:

    Etapa 8: Defina a família de fontes e o tamanho da tabela

    tabela {
    família da fonte: cursiva;
    Fonte- Tamanho : 18 px;
    texto- alinhar : Centro;
    }

    As seguintes propriedades CSS são aplicadas ao elemento da tabela:

    • “ família de fontes ” define o estilo de fonte do elemento.
    • “ tamanho da fonte ” é utilizada para definir a fonte do elemento.
    • “ alinhamento de texto ” é usada para ajustar o alinhamento do texto.

    Aqui está a saída:

    Passo 9: Linhas coloridas na Sequência
    Também é permitido aplicar estilos a linhas ou colunas específicas. Por exemplo, as linhas pares são estilizadas seguindo o formato abaixo:

    \
    tbody tr:enésimo-filho ( até ) {
    fundo- cor : #FFB200;
    }

    Aqui:

    • O ' :enésimo-filho(par) ” pseudo seletor é utilizado para obter um argumento que especifica o padrão no qual o estilo deve ser aplicado.
    • “ cor de fundo ” é utilizada para definir a cor de fundo do elemento.

    Pode-se observar que a cor de fundo é aplicada com sucesso nas linhas pares:

    Isso foi tudo sobre estilizar tabelas com CSS

    Conclusão

    As tabelas são uma ferramenta importante para manter os dados organizados. A tabela pode ser criada usando o HTML

    , e mais elementos. Várias propriedades CSS são utilizadas para estilizar a tabela, como borda, propriedade de cor de fundo, propriedade de família de fonte e muito mais. Para melhor compreensão, este artigo explica um procedimento passo a passo para estilizar uma tabela com CSS.

    Outro

    Categoria

    Publicações Populares

    Como verificar a versão do Java no Mac

    Como iniciar o Docker usando o comando systemctl

    Como excluir palavras aprendidas em um Android

    Como instalar o Terminator no Raspberry Pi

    Verifique as portas de escuta no Linux

    Qual é a diferença entre “{}” e “[]” ao declarar uma matriz JavaScript

    Vinculando a um arquivo PDF com HTML

    Como trabalhar com arquivos CSV no PowerShell

    Quantas entradas analógicas no Arduino Uno

    6 correções para o ícone de som ausente do Windows (2022)

    Como enviar uma mensagem para alguém no Discord?

    Como mesclar Git | Tutorial Git Iniciante

    7 correções para o erro 'Não é possível redefinir o Windows de fábrica'

    Como iniciar o comando Linux em segundo plano e desanexar o processo no terminal

    Carregar Arquivo Pickle Python

    AWS | Como montar o volume EBS

    Como obter maçãs rapidamente no Minecraft

    Inventário de lista de host avançado Ansible

    Resistor dependente de luz - Sensor LDR com ESP32 usando Arduino IDE

    Como desativar o modo de navegação anônima no Android

    ,