HTML Para iniciantes – Tabela HTML – Aula 5

Uma tabela é um conjunto de dados, organizados em linhas e colunas, usando uma tabela é possível organizar conteúdos de forma simples no HTML.

Por exemplo, criar uma tabela de preços de produtos, ou uma tabela de clientes com nome e-mail e telefone.

As tabelas são muito comuns na sociedade humana, exemplo é tabelas usadas em bingos de bairro, ou as antigas rifas.

O objetivo da tabela é ser clara e fácil de encontrar os itens desejados, através da associação da linha e da coluna da tabela.

Exemplo de tabela:

Uma tabela bem feita e organizada qualquer usuário consegue encontrar qualquer conteúdo nela, até mesmo usuários com deficiência visual.

Para que a tabela fique mais organiza e com um estilo mais agradável para o usuário é necessário o uso de CSS para melhorar a leitura do usuário.

Aqui não vamos falar de CSS, vamos focar apenas no HTML, no modelo que apresentamos acima usamos CSS no cabeçalho da tabela colocando a fonte com negrito, é possível realizar outros ajustes, como cores alternadas nas linhas ou nas colunas que facilita ainda mais encontrar conteúdos.

As tabelas são usadas apenas para tabular conteúdo.

Não devemos usar tabela para montar estruturas, como monta um layout em tabela por exemplo.

Usa tabela para montar um layout é uma péssima ideia pelos seguintes motivos.

Tabelas não são responsivas: para tornar uma tabela responsivas exige um conhecimento técnico mais avançado e em alguns casos não fica bom.

Pioram a acessibilidade: Pessoas com deficiência visual, usam leitores de telas para ler as tags e conseguir navegar. Como tabelas não são para produção de layouts isso dificulta os leitores de tela causando confusão na leitura.

Dificuldade no suporte ao código: Tabelas dificultam o suporte e possível correção em código, justamente por não ser para produção de layouts e não usar tags especificas para cada função.

Toda tabela é envolvida pela tag <table></table>.

As tabelas são divididas por linhas que recebem a TAG <tr> que significa “table row” ou em português “Linha da tabela”.

Cada linha da tabela é dividida em células de dados que recebem a tag <td> que significa “table data” ou em português “dados da tabela”.

Uma célula de dados pode conter texto, imagens, listas, parágrafos, formulários, filetes horizontias, tabelas, etc.

Exemplo de tabela:

Código da tabela

<table>
<tr>
   <td>Linha, dados</td>
   <td>Linha, dados</td>
   <td>Linha, dados</td>
</tr>
<tr>
   <td>Linha, dados</td>
   <td>Linha, dados</td>
   <td>Linha, dados</td>
</tr>
<tr>
   <td>Linha, dados</td>
   <td>Linha, dados</td>
   <td>Linha, dados</td>
</tr>
</table>

Adicionando cabeçalho na tabela

O cabeçalho recebe a TAG <th> que significa “table header” em português “cabeçalho da tabela”.

Código da tabela:

<table>
<tr>
   <th>Cabeçalho</th>
   <th>Cabeçalho</th>
   <th>Cabeçalho</th>
</tr>
<tr>
   <td>Linha, dados</td>
   <td>Linha, dados</td>
   <td>Linha, dados</td>
</tr>
<tr>
   <td>Linha, dados</td>
   <td>Linha, dados</td>
   <td>Linha, dados</td>
</tr>
<tr>
   <td>Linha, dados</td>
   <td>Linha, dados</td>
   <td>Linha, dados</td>
</tr>
</table>

Com isso você consegue criar uma tabela básica em HTML.