Elemento HTML: tabela

é um elemento HTML que exibe dados em tabular formatar. As tabelas HTML usam linhas e colunas para facilitar a interpretação de dados e relacionamentos.

Você pode usar um

elemento para exibir um cronograma ou a estrutura de preços de um produto. As tabelas exibem o conteúdo relacionado de maneira acessível e fácil de entender rapidamente.

Exemplo

O HTML

O elemento funciona com alguns elementos aninhados obrigatórios e alguns opcionais.

Sintaxe

1
2
  
3
    
First name
4
    
Last name
5
    
Occupation
6
  
7
  
8
    
9
      
John
10
      
Doe
11
      
Scientist
12
    
13
    
14
      
Jane
15
      
Doe
16
      
Web Developer
17
    
18
  
19

Resultado

Suporte ao navegador

O

tag é suportada em todos os navegadores modernos, bem como em muitos clientes de e-mail. Leia mais em caniuse.com.

Atributos

O

tag suporta Atributos Globais em HTML. Os Atributos Globais são comuns a todos os elementos HTML e podem ser usados ​​em todos eles (embora possam não ter muito efeito em alguns deles).

Contente

Nas tabelas, você pode usar uma variedade de elementos HTML adicionais.

  • Legendas da tabela:
,

e

  • Grupos de colunas:
  • e

  • Linhas da tabela:
  • Células da tabela:
  • Grupos de linhas:
  • e

    Adicionar

    para Melhor Acessibilidade

    Para aumentar a acessibilidade, tente adicionar um

    elemento imediatamente após a abertura

    tag, dando uma descrição clara da finalidade da tabela.

    O exemplo acima usa o CSS caption-side para posicionar a legenda. Isso pode ser top ou bottom.
    O

    ajudará alguém a entender qual conteúdo está sendo apresentado e se deve gastar tempo digerindo-o. Além disso, o

    O elemento fornece dicas para tecnologias assistivas, como leitores de tela.

    Estilizando Tabelas HTML

    As mesas são rígidas, mas podem ser estilizadas para atender à maioria das necessidades. Propriedades CSS que podem ser úteis para estilizar um

    elemento inclui width, border, border-style, border-color, border-width, border-collapse, border-spacing, margin, padding, text-aligne vertical-align.

    Considerações sobre dispositivos móveis

    • Não use tabelas, a menos que o dispositivo ou dispositivos sejam compatíveis com elas (1)
    • Não use tabelas aninhadas (2)
    • Não use tabelas para layout (3)
    • Use alternativas para apresentação tabular (4)

    Saber mais

    Você sabia?

    foi relativamente atrasado para HTML, sendo introduzido apenas na especificação em janeiro de 1997.

    Após sua introdução à especificação HTML, as tabelas logo foram usadas para criar layouts para páginas da web. Este foi um desenvolvimento lógico, pois eles permitem colunas e conteúdo aninhado.

    Pacotes gráficos como o Adobe Photoshop embarcaram, desenvolvendo a ferramenta Slice, que permitia que os designs fossem “fatiados” e exportados em pedaços, prontos para serem remontados nas células da tabela.

    Embora tudo isso tenha sido um uso incorreto do

    elemento, não havia alternativas de layout na época. Hoje em dia, os layouts baseados em tabelas na web não são necessários, pois o CSS fornece melhores soluções.

    [ad_2]

    Deixe uma resposta