Tabelas

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:

1. Elemento <caption>
2. Elementos <colgroup>
3. Elementos <thead>
4. Elementos <tbody>
5. 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.