Como estilizar a mesa com CSS
| Nome | Curso | Marcas |
|---|---|---|
| William | Networking | 89 |
| Jack | Introdução a c++ | 97 |
| Joseph | Introdução ao Java | 77 |
Para criar uma tabela no HTML, os seguintes elementos HTML são utilizados:
- ““
”O elemento é usado para criar uma tabela em html.
- ““”O elemento é utilizado para adicionar uma legenda à tabela.
- ““”É utilizado para especificar o cabeçalho da tabela, que geralmente contém os títulos.
- ““
”É usado para a adição de linha. - ““
”Especifique o conteúdo do cabeçalho. - ““”Especifica a parte do corpo da tabela.
A tabela criada atualmente se parece com o seguinte:
Vamos avançar para ver como estilizar esta tabela.
Etapa 2: Elemento de estilo "corpo"
corpo
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;
Background-Color: 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, Sans-Serif”É utilizado para aplicar a fonte suportada pelo navegador. Se o navegador não suportar o primeiro estilo de fonte, o outro será usado.
- ““cor de fundo”Propriedade define a cor de fundo do elemento.
Etapa 3: Elemento de “legenda” de estilo
Legenda
Size da fonte: 25px;
Alinhamento de texto: centro;
Background-Color: #1C6758;
Cor: Cornsilk;
O elemento é estilizado da seguinte maneira:
- ““tamanho da fonte”A propriedade é utilizada para a configuração do tamanho da fonte.
- ““alinhamento de texto”Propriedade especifica o alinhamento do texto do elemento.
- ““cor”Propriedade refere -se à cor da fonte do elemento.
Aqui está a saída do código fornecido acima:
Etapa 4: adicione borda à mesa
O "fronteira”A propriedade é utilizada para adicionar uma borda ao redor do elemento. É uma propriedade abreviada que especifica a largura da fronteira, o estilo de borda e a cor da borda.Vamos aplicar a fronteira, junto com o preenchimento e a margem da mesa:
Table, th, td
borda: 2px Solid #1C6758;
preenchimento: 1px 6px;
margem: automático;
Aqui:
- ““fronteiraA propriedade ajusta a borda ao redor da mesa, especificando a largura da borda, o estilo de borda e a cor da borda.
- ““preenchimento”Especifica o espaço em torno do conteúdo do elemento, onde o primeiro valor define espaço no fundo superior e o segundo valor adiciona espaço nos lados da direita da esquerda do conteúdo.
- ““margem”Propriedade com o valor“auto”Adiciona espaço igual ao redor do elemento.
Saída
Observação: Se não queremos os espaços entre as fronteiras da tabela, use a propriedade Border-Collapse.
Etapa 5: colapso espaçamento de fronteira da tabela
colapso da fronteira: colapso;
Os espaços entre as fronteiras da tabela podem ser removidos utilizando o “colapso da fronteira”Propriedade com o valor“ colapso ”:Etapa 6: ajuste o tamanho da tabela
THEAD TH
Vamos ver como ajustar o tamanho da tabela:
Largura: 160px;
O adicionado “largura”Propriedade com o
O elemento ajustará automaticamente o tamanho da tabela de acordo com ele :: Também podemos aplicar estilos à célula de tabela específica. Vamos discuti -los!
Etapa 7: Células de tabela específicas de estilo
Para estilizar a célula de tabela específica, especifique o nome da classe dessa célula em particular. Por exemplo, o código abaixo representa que a terceira célula da segunda linha recebe um nome de classe “destaque”:99 Agora, acesse a célula usando o nome da classe no arquivo CSS:
.destaque
Background-Color: #0F90D5;
O ".destaque”Refere -se ao destaque da classe do
elemento. Este elemento é aplicado com o “cor de fundo”Propriedade para especificar a cor no fundo. Como podemos ver, a célula da tabela especificada é estilizada com sucesso:
Etapa 8: defina a família de fontes e o tamanho da tabela
mesa
Fonte-família: cursiva;
Size da fonte: 18px;
Alinhamento de texto: centro;
As seguintes propriedades CSS são aplicadas ao elemento da tabela:
- ““família de fontes”Propriedade define o estilo de fonte do elemento.
- ““tamanho da fonte”A propriedade é utilizada para o cenário da fonte do elemento.
- ““alinhamento de texto”A propriedade é usada para ajustar o alinhamento do texto.
Aqui está a saída:
Etapa 9: linhas de cores em 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: Nth-Child (par)
Background-Color: #ffb200;
Aqui:
- O ": nth-child (par)”Pseudo -seletor é utilizado para assumir um argumento que especifica o padrão no qual o estilo deve ser aplicado.
- ““cor de fundo”A propriedade é utilizada para definir a cor de fundo do elemento.
Pode -se observar que a cor do fundo é aplicada com sucesso às linhas uniformes:
Isso era tudo sobre modelar 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 do CSS são utilizadas para estilizar a tabela, como borda, propriedade de fundo de fundo, propriedade-família da fonte e muito mais. Para uma melhor compreensão, este artigo explicou um procedimento passo a passo para estilizar uma tabela com CSS. - « Como marcar um commit mais antigo no git?
- Como resolver “-Squash é suportado apenas no Docker Daemon com recursos experimentais ativados” Erro do docker »