Página Inicial>Tutorial de web design>Tutorial HTML

Tutorial HTML: 10 tags relacionadas à mesa para HTML

Autor：Eve Cole Data da Última Atualização：2025-05-23 01:00:03

Com base em algumas das minhas práticas recentes e depois de me comunicar com alguns leitores sobre o uso de formulários HTML, decidi escrever este artigo. No geral, notei que eles tiveram um desgosto preconcebido com o uso de tabelas devido a informações enganosas. De fato, muitas pessoas dirão que vejo a afirmação de que nunca deveria usar formas, mas isso está absolutamente errado! Essa sugestão é apenas para o uso de tabelas HTML para definir o layout da página da web, mas as tabelas são perfeitas para um arranjo conveniente de linhas e colunas de informações de dados e, se você precisar exibir dados da coluna da tabela em uma página, precisará usá -los! por que não? No entanto, neste caso, algumas pessoas ignoram a existência de certas tags HTML usadas para tabelas e não sabem como usá -las corretamente.

O HTML possui 10 tags relacionadas à tabela. Aqui está uma lista com uma introdução, mas primeiro, o documento deve ser definido corretamente abaixo do HTML 4.01/xhtml 1 ou html 5:

  • <geption> Defina o título da tabela (4, 5)
  • <col> Defina atributos para colunas de uma tabela (4, 5)
  • <Colgroup> Define o agrupamento de colunas de tabela (4, 5)
  • <tabela> Defina a tabela (4, 5)
  • <Tbody> Defina o corpo da mesa (4, 5)
  • <Td> Defina uma célula (4, 5)
  • <TFOOT> Defina a nota da tabela (inferior) (4, 5)
  • <th> Defina o cabeçalho da tabela (4, 5)
  • <head> define o cabeçalho da tabela (4, 5)
  • <tr> define as linhas da tabela (4, 5)

Uma estrutura básica da tabela é a seguinte:

Ele contém um título, cabeça, corpo e fundo. A ordem correta dos elementos HTML é:

  1. <tabela>
  2. <geption>
  3. <head>
  4. <TFOOT>
  5. <Tbody>

Você também pode usar o <Col> e <Colgroup> para definir colunas de tabelas ou colunas de grupo:

  1. <tabela>
  2. <geption>
  3. <Colgroup>
  4. <Col>
  5. <head>
  6. <TFOOT>
  7. <Tbody>

Aqui está um exemplo correto da estrutura da tabela:

 <borda da tabela = 1> <Eingtion> Legenda da tabela aqui </ingortion> <span de colegroup = 1 style = background: #dedede;/> <span de colgroup = 2 style = background: #efefef;/> <!-cabeçalho da tabela-> <! Footer-> <tfOOT> <tr> <td> pé 1 </td> <td> pé 2 </td> <td> pé 3 </td> </tfoot> <!-Body-> <tbody> <tr> <td> a </td> <td> b </td> <td> c </td> </tr> <tr> <td> d </td> <td> e </td> <td> f </td> </tr> </tbody> </tabela

Os resultados no navegador são mostrados na figura abaixo:

Algumas dicas sobre o formulário

  • De acordo com a explicação e o uso das escolas W3, em uma definição de tabela, o elemento <tfoot> deve aparecer antes do <Tbody> , para que o navegador possa renderizar as notas da tabela antes de aceitar todos os dados. Além disso, se não for esse pedido, ele não será validado pelo HTML4 e XHTML do W3C, independentemente do tipo de DTD que você declare.
  • Em HTML 4.01, as propriedades alinhadas e bgcolor da tabela não são favorecidas; portanto, nenhum atributo de tabela é suportado no HTML 5 (de fato, as propriedades alinhadas e BGColor não são mais suportadas no XHTML 1.0 Strict DTD);
  • Todos os navegadores convencionais suportam a tag <Colgroup>, mas o Firefox, o Chrome e o Safari suportam apenas os atributos de extensão e largura do elemento Colgroup;
  • Células vazias: Mostrar | Ocultar no CSS pode definir se uma célula vazia exibe uma borda. Observe que isso precisa ser definido na tabela em vez de td/th . É mais provável que esse problema seja encontrado no IE6;
  • Colapso da fronteira: colapso | Separado em CSS pode definir se a borda de uma tabela é mesclada em uma borda;
  • A propriedade de espaçamento de fronteira no CSS é equivalente à propriedade do espaço de células da tabela.

Para realizar o modelo de desenvolvimento de desempenho e separação de estrutura defendidas até agora, a observação do front-end recomenda que todas as coisas relacionadas à camada de apresentação na página sejam controladas pelo CSS e não usem os atributos fornecidos pelo HTML para controlar o desempenho da página e a tabela é a mais fácil de ser ignorada.

Para mais detalhes sobre tabelas, verifique a documentação do W3C: W3 Introdução às tabelas

Finalmente, deixarei uma pergunta muito simples para você. Qual atributo do CSS é equivalente ao atributo CellPadding da tabela?

Artigos Relacionados