Introdução ao estilo de tabela CSS
Por que usamos CSS, embora possamos usar tabelas HTML, é porque, na tabela HTML, um layout de página baseado em tabela geralmente é renderizado mais lentamente do que um layout equivalente baseado em CSS; isso é especialmente verdade em páginas com muito conteúdo. As tabelas não devem ser usadas como auxiliares de layout. E se criarmos tabelas HTML sem nenhum estilo ou atributo no navegador, elas serão exibidas sem nenhuma borda. O estilo de uma tabela com CSS pode melhorar sua aparência.
As tabelas CSS são bem simples de entender e usar. É apenas uma questão de lembrar os valores correspondentes da propriedade de exibição CSS para os elementos básicos da tabela HTML. Com a ajuda do CSS, somos capazes de criar algumas tabelas elegantes.
O que é o estilo de tabela CSS?
Uma tabela CSS (Cascading Style Sheets) descreve como dispor um conjunto de elementos em linhas e colunas. O CSS padrão aplicado a uma tabela HTML é uma tabela CSS.
- CSS projetou e reformulou a flexibilidade.
- Isso significa que um layout baseado em CSS garante que você coloque todos os seus estilos (por exemplo, de pequenas alterações nas principais regras) em um local.
- Alterando as regras de layout que você define nessa folha de estilos, você afeta todas as páginas que se referem a ela.
- O layout da página com base em CSS geralmente aparecerá mais rápido na tela e até o download será mais rápido que o layout com base em tabela.
Propriedades do estilo de tabela CSS
Abaixo estão as diferentes propriedades dos estilos de tabela CSS:
1. Colapso das fronteiras
É usado para indicar se as bordas ao redor das células de uma tabela devem ser separadas ou recolhidas.
Sintaxe: border-collapse: separate|collapse|initial|inherit;
- Recolhimento da borda: separado: é usado para que as células adjacentes tenham bordas próprias e independentes que não sejam compartilhadas.
Sintaxe
border-collapse: separate;
O valor padrão definido para a propriedade border-collapse é separado. Quando separados, os navegadores colocam um espaço de alguns pixels entre cada célula usando a propriedade espaçamento entre bordas.
Código
Resultado:
- Recolhimento da borda: recolhimento: sempre que configuramos a propriedade border-collapse para recolher, ele remove o espaço entre as células.
Sintaxe
border-collapse: collapse;
Código
Resultado :
Mesmo se você eliminar esse espaço definindo o atributo cellpacing para a tag HTML como 0, os navegadores ainda exibirão bordas duplas. Ou seja, a borda inferior de uma célula aparecerá acima da borda superior da célula abaixo, causando uma duplicação de linhas de borda. Definir a propriedade border-collapse para recolher elimina o espaço entre as células e a duplicação de bordas.
- Recolhimento de borda: inicial: é usado para definir a propriedade de recolhimento de borda com seu valor padrão.
- Recolhimento de borda: herdar: É usado quando a propriedade de recolhimento de borda herda de seus elementos pai. Esta propriedade funciona apenas quando aplicada a um
tag.
Valores: recolher, separar, inicial, herdar;
2. Espaçamento entre bordas
Ele define as bordas adjacentes do espaço e o conteúdo ao redor da tabela. É semelhante ao espaçamento das células da tag
atributo, exceto que ele tem um segundo valor opcional. Esta propriedade funciona apenas quando aplicada a um
tag.
Sintaxe
border-spacing: Length|initial|inherit;O espaçamento das bordas geralmente leva um ou dois valores de comprimento. Neste apenas um valor é especificado, ele define o espaçamento horizontal e vertical entre as células.
Código
Resultado:
Nesse caso, se dois valores forem especificados, o primeiro valor definirá o espaçamento horizontal entre as células (o espaço de cada lado de cada célula) e o segundo valor definirá o espaçamento vertical entre as células. (o espaço que separa a parte inferior de uma célula da parte superior da célula abaixo dela).
3. Lado da legenda
A propriedade do lado da legenda especifica o posicionamento de uma legenda da tabela. Quando aplicada a uma legenda da tabela, essa propriedade determina se a legenda aparece na parte superior ou inferior da tabela. Uma legenda normalmente aparece na parte superior da tabela.
Sintaxe
caption-side: top|bottom|initial|inherit;Esta propriedade pode ter um dos quatro valores:
- Lado da legenda: superior: é o valor padrão. Neste, coloca a legenda acima da tabela.
Sintaxe:
caption-side:top;Código
Resultado:
- Lado da legenda: inferior: coloca a legenda abaixo da tabela.
Sintaxe:
caption-side:bottom;Código
Resultado:
- Lado da legenda: inicial: é usado para definir a propriedade com seu valor padrão.
- Lado da legenda: herdar: herda essa propriedade de seu elemento pai.
Valores: superior, inferior, inicial, herdar;
4. Células vazias
Ele informa ao navegador se deve exibir uma célula da tabela completamente vazia. Ele controla a renderização das bordas e o plano de fundo das células que não têm conteúdo visível em uma tabela que está usando o modelo de bordas separadas.
Sintaxe:
empty-cells: show|hide|initial|inherit;Esta propriedade pode ter um dos quatro valores:
- Célula vazia: show: esta propriedade é usada para exibir as bordas na célula vazia.
Sintaxe:
empty-cells:show;Código
Resultado:
- Célula vazia: ocultar: esta propriedade é usada para ocultar as bordas na célula vazia.
Sintaxe:
empty-cells: hide;Código
Resultado:
- Célula vazia: inicial : é usada para definir a propriedade com seu valor padrão.
- Célula vazia: herdar: herda essa propriedade de seu elemento pai.
Valores: mostrar, ocultar, inicial, herdar;
5. Layout da tabela
Controla como um navegador da Web desenha uma tabela e pode afetar levemente a velocidade com que o navegador a exibe. Esta propriedade pode ter um dos quatro valores.
Sintaxe:
table-layout: auto|fixed|initial|inherit;A propriedade padrão é automática.
1. Layout da tabela: auto: o auto faz com que a largura dos elementos se ajuste automaticamente ao tamanho do conteúdo.
2. Layout da tabela: fixo : a configuração fixa força o navegador a renderizar todas as colunas da mesma largura que as colunas da primeira linha. Se o conteúdo for maior que a primeira linha, o conteúdo será quebrado, cortado ou estendido para fora das células.
Código
Resultado:
3. Layout da tabela: inicial: é usado para definir a propriedade com seu valor padrão.
4. Layout da tabela: herdar: herda essa propriedade de seu elemento pai.
Conclusão
Com a ajuda do CSS, podemos criar tabelas com estilo e melhorar a aparência da tabela.
Artigos recomendados
Este é um guia para o CSS Table Styling. Aqui discutimos propriedades com códigos, saídas e sintaxe da tabela CSS Styling. Você também pode ler nossos artigos para saber mais -
- Vantagens do CSS
- Usos de CSS
- Introdução ao CSS
- Formatação de texto CSS