Tabelas HTML
As tabelas HTML permitem organizar dados como texto, imagens e links em linhas e colunas de células. Experimente exemplos de tabelas HTML!
Em HTML, você pode criar tabelas para o seu site usando a tag <table> em conjunto com as tags <tr>, <td> e <th>.
As tabelas HTML permitem exibir dados (por exemplo, imagem, texto, link) em colunas e linhas de células. As linhas da tabela podem ser agrupadas em seções de cabeçalho, rodapé e corpo por meio dos elementos <thead>, <tfoot> e <tbody>, respectivamente.
No HTML5, podemos colocar <tfoot> antes ou depois da tag <tbody>. Eles devem vir após quaisquer elementos <caption>, <colgroup> e <thead>.
A maioria dos atributos do elemento <table> não é utilizada no HTML5. Se você quiser estilizar a aparência da tabela, pode usar CSS em seu lugar.
Tabelas de dados vs. tabelas de layout. Use tabelas apenas para dados tabulares — informações que possuem uma relação significativa entre linhas e colunas. Não use tabelas para organizar o layout de uma página (posicionar uma barra lateral, uma barra de navegação, etc.). Tabelas de layout confundem leitores de tela e dificultam o design responsivo. Para layout de página, use CSS Flexbox ou Grid em vez disso.
Sintaxe
A tag <table> vem em pares. O conteúdo é escrito entre as tags de abertura <table> e de fechamento </table>.
Exemplo da tag HTML <table>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Resultado
| Month | Date |
|---|---|
| January | 10.01.2014 |
| February | 10.01.2014 |
No exemplo acima, usamos a tag <table> para criar uma tabela. Em seguida, usamos a tag <tr> para dividir a tabela em linhas. A tag <th> é usada para as células de cabeçalho da tabela, onde o título é escrito. Em outras palavras, a linha da tabela é dividida em cabeçalhos. A tag <td> é usada para as células da tabela onde as informações são escritas.
Agrupando Linhas com <thead>, <tbody> e <tfoot>
Para tabelas maiores, você pode agrupar as linhas em uma seção de cabeçalho, uma seção de corpo e uma seção de rodapé usando os elementos <thead>, <tbody> e <tfoot>. Isso torna a marcação mais legível, permite estilizar cada seção de forma independente com CSS e ajuda os navegadores a repetir o cabeçalho e o rodapé quando uma tabela longa é impressa em várias páginas.
Exemplo de agrupamento de linhas de tabela:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$180</td>
</tr>
</tfoot>
</table>
</body>
</html>Acessibilidade: Cabeçalhos e Legendas
As tabelas podem ser difíceis de seguir para pessoas que usam leitores de tela, porque uma célula isolada ("$80") não tem significado sem saber a qual linha e coluna ela pertence. Algumas práticas simples tornam suas tabelas compreensíveis para todos.
Marque as células de cabeçalho com <th>. Uma célula <th> é anunciada como cabeçalho, e os leitores de tela a utilizam para identificar as células de dados abaixo ou ao lado dela. Usar <td> para cabeçalhos — ou simular cabeçalhos com texto <td> em negrito — remove essa relação.
Adicione um atributo scope. O atributo scope informa à tecnologia assistiva se um cabeçalho se aplica à sua coluna ou à sua linha. Use scope="col" para cabeçalhos de coluna e scope="row" para cabeçalhos de linha. Isso é especialmente importante quando uma tabela possui cabeçalhos tanto no topo quanto no lado esquerdo.
Exemplo de cabeçalhos com o atributo scope:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<caption>Monthly savings</caption>
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
<tr>
<th scope="row">January</th>
<td>$100</td>
</tr>
<tr>
<th scope="row">February</th>
<td>$80</td>
</tr>
</table>
</body>
</html>Dê à tabela uma <caption>. Uma <caption> é um título para a tabela inteira. Ela é o primeiro filho do elemento <table> e é anunciada antes do conteúdo da tabela, para que o usuário de leitor de tela saiba do que se trata a tabela antes de navegar por ela. Por padrão, ela é renderizada no topo da tabela; você pode movê-la com a propriedade CSS caption-side.
Exemplo de tabela com <caption>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
caption {
font-weight: bold;
padding: 8px;
}
</style>
</head>
<body>
<table style="width:80%;">
<caption>Delivery schedule</caption>
<tr>
<th scope="col">Month</th>
<th scope="col">Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.02.2014</td>
</tr>
</table>
</body>
</html>Abrangendo Múltiplas Linhas e Colunas
É possível estender uma célula por várias outras linhas ou colunas. Normalmente, uma célula não pode alcançar o espaço acima, abaixo ou ao lado de outra célula — mas os atributos colspan e rowspan permitem que uma célula ocupe a área de várias.
Se você quiser que um único cabeçalho se estenda por duas ou mais colunas, use o atributo colspan na célula com o número de colunas que ela deve cobrir.
Exemplo da tag HTML <table> com o atributo colspan:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Resultado
| Month and Date | |
|---|---|
| January | 10.01.2014 |
| February | 10.01.2014 |
Aqui, o único cabeçalho <th colspan="2"> fica acima das colunas Month e Date.
O mesmo pode ser feito com linhas, usando o atributo rowspan. Uma célula com rowspan="2" se estende para baixo até a linha abaixo dela, de modo que a próxima linha precisa de uma célula a menos. Isso é útil quando um valor se aplica a várias linhas consecutivas.
Exemplo da tag HTML <table> com o atributo rowspan:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>January</td>
<td rowspan="2">10.01.2014</td>
</tr>
<tr>
<td>February</td>
</tr>
</table>
</body>
</html>Resultado
| Month | Date |
|---|---|
| January | 10.01.2014 |
| February | (shares the cell above) |
Neste exemplo, a célula 10.01.2014 usa rowspan="2", portanto abrange as linhas de January e February, e a linha de February só precisa da célula Month.
Tags Relacionadas
<table>— o contêiner da tabela<tr>— uma linha da tabela<th>— uma célula de cabeçalho<td>— uma célula de dados<caption>— o título da tabela<colgroup>— agrupa colunas para estilização