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?
<caption>
<header>
<th>
Quais informações provavelmente são adequadas para um layout com uma tabela?