As tabelas HTML são usadas para exibir dados tabulares com linhas e colunas. A decisão de usar um <table> precisa ser baseada:
o conteúdo apresentado e as responsabilidades necessidades em relação a esse conteúdo. Se os dados estão sendo apresentados, comparados, classificados,
calculado ou cruzado, <table> provavelmente é a escolha certa. Se você só quiser posicionar o conteúdo não tabular bem,
como um grande grupo de imagens em miniatura, as tabelas não são adequadas. Em vez disso, crie uma lista de imagens e
definir o estilo da grade com CSS.
Nesta seção, vamos discutir todos os elementos que compõem a tabela, além de alguns recursos de acessibilidade e usabilidade que você deve considerar ao apresentar dados tabulares. Embora o Aprendizado de HTML não seja fundamentalmente sobre CSS, há um curso inteiro dedicado ao aprendizado de CSS, vamos abordar algumas propriedades CSS específicas da tabela.
Elementos da tabela, em ordem
A tag <table> envolve o conteúdo da tabela, incluindo todos os elementos.
A função ARIA implícita de um <table> é table. tecnologias assistivas sabem que esse elemento é uma estrutura de tabela que contém dados organizados em
linhas e colunas. Se a tabela mantiver um estado de seleção, tiver navegação bidimensional ou permitir que o usuário reorganize a ordem das células, defina role="grid".
Se as linhas do grid puderem ser expandidas e recolhidas, use role="treegrid".
Dentro de <table>, você vai encontrar os cabeçalhos da tabela (<thead>), os corpos da tabela (<tbody>) e, opcionalmente, os rodapés da tabela (<tfoot>).
Cada um deles é composto por linhas da tabela (<tr>). As linhas contêm as células do cabeçalho da tabela (<th>) e dos dados da tabela (<td>), que, por sua vez, contêm todos os dados.
No DOM, antes disso, você pode encontrar dois outros recursos: a legenda da tabela (<caption>) e os grupos de colunas (<colgroup>). Depende
se <colgroup> tem ou não um atributo span, ele pode conter elementos de coluna da tabela aninhada (<col>).
Os filhos da tabela são, em ordem:
- Elemento
<caption> - Elementos
<colgroup> - Elementos
<thead> - Elementos
<tbody> - Elementos
<tfoot>
Vamos abordar os <table> elementos filhos, que são opcionais, mas recomendados, então dê uma olhada nas linhas, nas células do cabeçalho da tabela,
e células de dados de tabela. A <colgroup> será abordada por último.
Legenda da tabela
Por ser um elemento semântico nativo, o <caption> é o recomendado.
método para atribuir um nome a uma tabela. O <caption> fornece um título de tabela descritivo e programaticamente associado. É
visível e disponível para todos os usuários por padrão.
O elemento <caption> precisa ser o primeiro aninhado no elemento <table>. Isso permite que todos os usuários saibam
a finalidade da tabela imediatamente, sem precisar ler o texto ao redor. Como alternativa, use aria-label ou aria-labelledby
na <table> para fornecer um nome acessível como legenda. O elemento <caption> não tem atributos específicos do elemento.
A legenda aparece fora da tabela. O local da legenda pode ser definido com a propriedade CSS caption-side, que é uma
é uma prática melhor do que usar o atributo align descontinuado. Isso pode definir a legenda para cima e para baixo. A esquerda e a direita
O posicionamento lateral, com inline-start e inline-end, ainda não é totalmente compatível. A parte superior é a apresentação padrão do navegador.
De preferência, as tabelas de dados devem ter cabeçalhos claros e legenda, além de serem simples o suficiente para serem quase autoexplicativas. Tenha em mente que
nem todos os usuários têm as mesmas habilidades cognitivas. Quando a tabela estiver "tomando um ponto" ou precisar de interpretação, forneça uma
breve resumo do ponto ou função principal da tabela. O local desse resumo depende do tamanho e da complexidade.
Se for curto, use-o como o texto interno da legenda. Se for um texto mais longo, resuma na legenda e forneça o resumo na
parágrafo anterior à tabela, associando os dois ao aria-describedby
. Colocar a tabela em um <figure> e colocar o resumo em um <figcaption> também é uma opção.
Separação de dados
O conteúdo das tabelas é composto por até três seções: zero ou mais cabeçalhos de tabela (<thead>) , corpos de tabela (<tbody>),
e rodapés de tabela (<tfoot>). Todos são opcionais, com suporte a zero ou mais de cada um.
Esses elementos não ajudam nem dificultam a acessibilidade da tabela, mas são úteis em termos de usabilidade. Elas oferecem
para estilizar ganchos. Por exemplo, o conteúdo do cabeçalho pode ser fixo,
enquanto o conteúdo de <tbody> pode ser rolado. As linhas não aninhadas em um desses três elementos contendo são implicitamente
encapsuladas em um <tbody>. Os três compartilham o mesmo papel implícito rowgroup.
Nenhum desses três elementos tem atributos específicos do elemento.
O que temos até agora:
<table>
<caption>MLW Students</caption>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
O elemento <tfoot> foi especificado originalmente para aparecer logo após <thead> e antes de <tbody> por motivos de acessibilidade.
É por isso que você pode encontrar essa ordem de origem não intuitiva nas bases de código legadas.
Conteúdo da tabela
As tabelas podem ser divididas em cabeçalhos, corpos e rodapés, mas nada disso realmente terá efeito se as tabelas não
que contêm linhas, células e conteúdo da tabela. Cada linha da tabela, <tr>, contém uma ou mais células. Se uma célula for de cabeçalho, use <th>.
Caso contrário, use <td>.
As folhas de estilo do user agent geralmente exibem o conteúdo em uma célula de cabeçalho da tabela <th> centralizada e em negrito. Esses estilos padrão,
e todos os estilos, são melhor controlados com CSS em vez de atributos obsoletos que costumavam estar disponíveis em células individuais,
linhas e até mesmo a <table>.
Havia atributos para adicionar padding entre células e dentro das células, para bordas e para alinhamento de texto. o padding e o ritmo das células,
que definem o espaço entre o conteúdo de uma célula e sua borda, e entre as bordas das células adjacentes, devem ser definidos
com os CSSs border-Recolher e border-spacing
, respectivamente. Border-spacing não terá efeito se border-collapse: collapse for definido. Se border-collapse: separate;
for definido, será possível ocultar completamente as células vazias com empty-cells: hide;. Para saber mais sobre como estilizar tabelas, confira esta
apresentação interativa de estilos CSS relacionados à tabela.
Nos exemplos, adicionamos uma borda à tabela e a cada célula individual com CSS para tornar alguns recursos mais aparentes:
Neste exemplo, temos uma legenda, um cabeçalho e um corpo de tabela. O cabeçalho tem uma linha que contém três células <th> de cabeçalho,
e, assim, criar três colunas. O corpo contém três linhas de dados: a primeira célula é uma célula de cabeçalho para a linha, então usamos <th> em vez de <td>.
A célula <th> tem significado semântico, com funções ARIA implícitas de columnheader
ou rowheader. define a célula como o cabeçalho da coluna ou linha de células da tabela,
dependendo do valor do atributo scope enumerado. O padrão do navegador será col ou row se scope não for definido explicitamente.
Como usamos a marcação semântica, a célula 1956 tem dois cabeçalhos: Year e Lou Minious. Essa associação nos diz que "1956" é
"ano" da graduação de "Lou Minious". Neste exemplo, como podemos ver a tabela inteira, a associação é visualmente aparente.
O uso de <th> fornece a associação mesmo quando a coluna ou linha do cabeçalho sai da visualização. Poderíamos ter definido explicitamente
<th scope="col">Year</th> e <th scope="row">Lou Minious</th>, mas com uma tabela simples como esta, os valores padrão enumerados funcionam.
Outros valores para scope incluem rowgroup e colgroup, que são úteis com tabelas complexas.
Mesclar células
Semelhante ao MS Excel, Planilhas Google e Números, é possível unir várias células em uma única célula. Isso é feito com HTML!
O atributo colspan é usado para mesclar duas ou mais células adjacentes em uma única linha. O atributo rowspan é usado para mesclar células nas linhas,
colocado na célula da linha superior.
Neste exemplo, o cabeçalho da tabela contém duas linhas. A primeira linha do cabeçalho contém três células distribuídas por quatro colunas: a célula do meio
tem colspan="2". Isso mescla duas células adjacentes. A primeira e a última células incluem rowspan="2". Isso mescla a célula com a célula
na linha adjacente, imediatamente abaixo dela.
A segunda linha no cabeçalho da tabela contém duas células; estas são as células da segunda e terceira colunas da segunda linha. Nenhuma célula é declarada na primeira ou na última coluna, pois a célula da primeira e da última coluna da primeira linha abrange duas linhas.
Nos casos em que uma célula é definida por várias células de cabeçalho com associações que não podem ser definidas apenas pelos atributos scope,
inclua o atributo headers com uma lista separada por espaços dos cabeçalhos associados. Como este exemplo é uma tabela mais complexa, definimos explicitamente
o escopo dos cabeçalhos com o atributo scope. Para ser ainda mais claro, adicionamos o atributo headers a cada célula.
Os atributos headers talvez não fossem necessários em um caso de uso tão simples, mas são importantes
a complexidade das tabelas. Tabelas com estruturas complexas, como tabelas em que cabeçalhos ou células são mesclados ou com mais
de dois níveis de cabeçalhos de coluna ou linha, exigem a identificação explícita das células de cabeçalho associadas. Nessas tabelas complexas, explicitamente
associar cada célula de dados a cada célula de cabeçalho correspondente a uma lista de valores id separados por espaços de todos os cabeçalhos associados
como o valor do atributo headers.
O atributo headers é encontrado com mais frequência em elementos <td>, mas também é válido em <th>.
Dito isso, pode ser difícil entender estruturas de tabelas complexas para todos os usuários, não apenas para os usuários de leitores de tela. Cognitivamente Em termos de suporte a leitores de tela, tabelas mais simples, com poucas ou nenhuma célula distribuída, são mais fáceis de adicionar, mesmo sem adicionar escopo e cabeçalhos. e entendido. Eles também são mais fáceis de gerenciar.
Como definir o estilo de tabelas
Há dois elementos relativamente obscuros que foram mencionados rapidamente: o grupo de colunas, <colgroup>, o elemento
e seu único descendente, o elemento vazio da coluna <col>. A
O elemento <colgroup> é usado para definir grupos de colunas, ou elementos <col>, em uma tabela.
Se usado, o agrupamento de colunas precisa ser aninhado em <table>, logo após <caption> e antes de qualquer dado da tabela.
Se elas abrangerem mais de uma coluna, use o atributo span.
A ordem do contorno do conteúdo de uma tabela geralmente é a seguinte, com <table> e <caption> sendo os dois elementos que
deve ser incluído:
<table>
<caption>Table Caption</caption>
<colgroup>
<col/>
</colgroup>
<thead>...
Nem <colgroup> nem <col> têm significado semântico em termos de ajudar a tornar a tabela mais acessível, mas permitem
para estilização de colunas limitada, incluindo a definição de uma largura para a coluna com CSS.
Os estilos <col> definirão o estilo de uma coluna, desde que não haja estilos <td> ou <th> que modifiquem esse estilo. Por exemplo, quando
<colspan> é usado para mesclar células em algumas linhas de uma tabela, mas não em todas. Não é possível ter certeza de que um seletor como tr > *:nth-child(8),
que seleciona o 8o filho de cada linha, destaca a 8a coluna por completo ou destaca a 8a coluna em várias linhas,
mas com algumas células da 9a e da 10a coluna, dependendo da linha ou das células da coluna que foram mescladas.
Infelizmente, apenas algumas propriedades têm suporte. Os estilos não são herdados nas células e a única maneira de usar o <col>
nas células de segmentação é com um seletor complexo, que inclui o seletor relacional :has().
Se a <table> e a <colgroup> tiverem uma cor de plano de fundo, a background-color do <colgroup> ficará na parte de cima.
A ordem do desenho é: tabela, grupos de colunas, colunas, grupos de linhas, linhas, com as células por último e no topo, como mostrado no esquema da tabela
camadas. Os elementos <td> e <th> não são descendentes dos elementos <colgroup> ou <col> e não herdam o estilo.
Para dividir uma tabela, os seletores CSS estruturais são úteis. Por exemplo, tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);}.
adiciona um preto translúcido a cada linha ímpar no corpo da tabela, permitindo que todos os efeitos de plano de fundo definidos em <colgroup> apareçam.
Por padrão, as tabelas não são responsivas. Em vez disso, eles são dimensionados de acordo com o conteúdo por padrão. Outras medidas são necessárias para conseguir a tabela
e o estilo de layout para funcionar de forma eficaz em vários dispositivos. Se você estiver alterando a propriedade de exibição CSS para elementos da tabela,
incluir atributos ARIA role. Isso pode parecer redundante, mas a propriedade CSS display pode afetar a árvore de acessibilidade em alguns navegadores.
Apresentar dados
Os elementos da tabela têm significados semânticos usados por tecnologias assistivas para permitir a navegação pelas linhas e colunas
sem "se perder". O elemento <table> não pode ser usado para apresentação. Se você precisar de um título sobre uma lista, use um cabeçalho
e uma lista. Se você quiser posicionar o conteúdo em muitas colunas, use o layout de várias colunas.
Se você quiser posicionar o conteúdo em uma grade, use a grade CSS. Use apenas uma tabela para os dados. Pense desta maneira: se seus dados exigirem uma planilha para serem apresentados em uma reunião, use <table>.
Se quiser usar os recursos disponíveis em softwares de apresentação, como o Keynote ou o Powerpoint, você provavelmente vai precisar de uma lista de descrição.
Embora a classificação das colunas da tabela seja do âmbito do JavaScript, a marcação de cabeçalhos para que os usuários saibam que a coluna é classificável é o âmbito do HTML.
Informe aos usuários que as colunas da tabela podem ser classificadas com a iconografia em ordem crescente, decrescente ou não classificada. A coluna classificada no momento deve
inclua o atributo aria-sort com o valor enumerado da direção de classificação.
A <caption> pode anunciar educadamente atualizações na ordem de classificação usando aria-live e uma
que é atualizado dinamicamente e fica visível para usuários de leitores de tela. Como a coluna pode ser classificada clicando no conteúdo do cabeçalho, ele precisa ser um <button>.
Se você não estiver apresentando dados tabulares, não use um <table>. Se você usar uma tabela para a apresentação, defina role="none".
Muitos desenvolvedores usam tabelas para dispor formulários, mas isso não é necessário. Mas você precisa saber sobre formulários HTML, então falaremos sobre isso a seguir.
Teste seu conhecimento
Teste seu conhecimento sobre tabelas.
Qual elemento é usado para marcar células que são títulos?
<header><caption><th>Quais informações provavelmente são adequadas para um layout com uma tabela?
<dl>.<ul>.