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 -

    1. Vantagens do CSS
    2. Usos de CSS
    3. Introdução ao CSS
    4. Formatação de texto CSS

    Categoria:

    Ferramentas de Desenvolvimento Web