As tabelas HTML são a espinha dorsal dos dados estruturados na web. Eles não servem mais apenas para planilhas. Você pode moldá-los, colori-los e controlar exatamente como eles respiram em uma janela do navegador. O método tradicional depende de atributos de apresentação específicos. Eles funcionam. Eles são diretos. Você não precisa de estruturas CSS complexas para obter um layout de aparência decente.
Alterando a cor de fundo da tabela
Comece com o panorama geral. Quer que toda a grade apareça? Você não precisa de uma folha de estilo separada. Basta colocar um atributo bgcolor na tag de abertura
.
Exemplo:
Isso prepara o cenário. Cada célula herda essa vibração, a menos que você a substitua.
Você também pode aumentar o zoom. Pinte uma única linha ou apenas uma célula específica. Coloque bgcolor="color" na tag
ou
| .
Exemplo:
|
É um pequeno detalhe. Mas isso muda a forma como o olho se move pelos dados.
Tamanho da tabela
Os navegadores são preguiçosos por padrão. Eles expandem linhas e colunas para ajustar o conteúdo. Se seus dados forem curtos, a tabela será ampliada para preencher a janela. Se for longo, fica longo.
Às vezes você quer controle. Você quer dimensões fixas.
Adicione width e height à tag inicial
. Você pode usar pixels ou porcentagens.
Exemplo:
Pixels oferecem limites rígidos. As porcentagens permitem que a tabela respire com a janela de visualização. Qual você escolhe depende de seus objetivos de design.
Você também pode bloquear células individuais. Adicione width="value" a uma tag
ou
| . Isso substitui a configuração global desse local específico.
Experimentar. Experimente um valor de pixel. Então tente uma porcentagem. Veja como ele se quebra ou se mantém unido em diferentes telas.
Cellpadding
Espaço é design. Especificamente, o espaço entre a borda de uma célula e o texto dentro dela.
Isso é cellpadding. É necessário um valor de pixel.
Use-o na tag inicial
.
Exemplo 1:
Exemplo 2:
Cinco pixels são apertados. Quinze é arejado. O conteúdo parece diferente. Parece mais limpo com mais preenchimento.
Espaçamento entre células
Depois, há a lacuna entre as células.
Isso é espaçamento de células. Também leva um valor de pixel.
Adicione-o à tag
.
Exemplo 1:
Exemplo 2:
Um pequeno espaçamento entre células faz com que a grade pareça densa. Um grande faz com que pareça uma lista de verificação.
Títulos de tabela
Os dados precisam de estrutura. Os cabeçalhos fornecem isso.
Para fazer com que uma coluna ou linha se destaque como título, troque
por
| na primeira linha.
Ele coloca o texto em negrito automaticamente. Também centraliza.
Exemplo:
| | |
