Tabelas CSS (Tabelas)

As tabelas são geralmente usadas para exibir dados em tabela.

usando uma tabela de estilos CSS

ao construir tabelas sem estilo ou atributoao exibir tabelas HTMLao exibir tabelas HTML, o navegador exibirá elas sem nenhuma borda. A aplicação de estilos CSS às tabelas pode melhorar significativamente sua aparência.

As seções a seguir mostrarão como usar CSS para controlar o layout e a representação dos elementos da tabela para criar tabelas elegantes e consistentes.

Adicionar borda à tabela

CSS borderé o melhor método para definir a borda da tabela.

O exemplo a seguir configurará uma borda preta de<table>，<th>e<td>elemento.

table,　th,　td　{
　　　　border:　1px　solid　black;
}

Fundir as bordas da tabela

Se você vir a saída do exemplo anterior, notará que cada célula da tabela tem uma borda separada e há um espaço entre as bordas das células adjacentes. Isso acontece porque, por padrão, as bordas das células da tabela estão separadas. Mas você pode usar o elementoborder-collapseO atributo acima será fundido em uma única borda do <table>:

No exemplo a seguir, as regras de estilo irão fundir as bordas das células da tabela e aplicar uma borda preta de um pixel aos elementos da tabela e das células da tabela.

table　{
　　　　border-collapse:　collapse;
}
table,　th,　td　{
　　　　border:　1px　solid　black;
}

Você também pode usar o valor CSS para remover o espaço entre as bordas das células da tabelaborder-spacingO valor da propriedade é 0. No entanto, ele apenas remove o espaço, mas não combina como quando você define a borda border-collapse para

Ajuste do espaço interno da tabela

Por padrão, as células da tabela criadas pelo navegador são exatamente suficientes para conter os dados da célula. Para adicionar mais espaço ao redor do conteúdo da célula da tabela, você pode usar a propriedade CSS padding, conforme mostrado a seguir:

th,　td　{
　　　　padding:　15px;
}

border-spacingSe as bordas da tabela estiverem separadas (configuração padrão), também pode ser usado o atributo CSS para ajustar o espaçamento entre as bordas das células.

As seguintes regras de estilo são aplicadas entre todas as bordas da tabela10Espaçamento em pixels:

table　{
　　　　border-spacing:　10px;
}

Controle do layout da tabela

Por padrão, a tabela se expande e contrai para conter os dados que ela contém. Quando os dados são preenchidos na tabela, eles continuam a se expandir enquanto houver espaço. No entanto, às vezes, é necessário definir uma largura fixa para a tabela para gerenciar o layout.

Você pode usar o CSS table-a propriedade layout para executar essa operação. Esta propriedade define o algoritmo usado para dispor as células, linhas e colunas da tabela. Esta propriedade aceita um dos dois valores:

• auto —usando o algoritmo de layout de tabela automático. Com esse algoritmo, a largura da tabela e das células pode ser ajustada para se ajustar ao conteúdo. Este é o valor padrão.

• fixed -usando o algoritmo de layout da tabela fixa. Com esse algoritmo, o alinhamento horizontal da tabela não depende do conteúdo das células; depende apenas da largura da tabela, da largura das colunas e do espaçamento das bordas ou células.

Nos exemplos abaixo, as regras de estilo indicam que a tabela é alinhada usando o algoritmo de layout fixo e tem300 pixels de largura fixa.

table　{
　　　　width:　300px;
　　　　table-layout:　fixed;
}

sem o table-O valor fixo da propriedade layout, em tabelas grandes, o usuário não verá nenhuma parte da tabela até que o navegador apresente toda a tabela.

trata as células vazias

O empty-A propriedade cellsCSS controla as bordas e, quando não há conteúdo evidente na tabela, uma renderização de célula de modelo de borda separada é usada.

Este atributo pode ter um dos três valores: show, hide ou inherit.

As seguintes regras de estilo ocultam as células vazias no elemento table.

table　{
　　　　border-collapse:　separate;
　　　　empty-cells:　hide;
}

controla a posição do título da tabela

O caption-propriedade sideCSS para definir a posição vertical do título da caixa da tabela.

As seguintes regras de estilo colocam o título da tabela abaixo de seu pai da tabela. No entanto, para alterar o alinhamento horizontal do texto do subtítulo, você pode usar atext-alignAtributos.

caption　{
　　　　caption-side:　bottom;
}