HTML BÁSICO – PARTE 4 – TABELAS

Tabelas em HTML

Olá pessoal, tudo joia?
Hoje iremos falar sobre Tabelas.
Esse tutorial foi separado da aula passada, pois merecia uma atenção especial.
Tabelas é um assunto delicado.

Conheça os outros artigos

TABELAS

Primeiramente, tabelas são utilizadas SOMENTE para dados tabulares.

Porque somente?

Antigamente a tabela era utilizada para desenvolver layout de sites.
Imagine que em uma página você tenha: cabeçalho, menu, conteúdo, rodapé.
Agora imagine isso dentro de uma tabela.
Se pensarmos em um layout como linhas e colunas, podemos definir que é possível e super normal utilizarmos uma tabelas para desenvolver nossos layouts, mas NÃO. Hoje temos tecnologias que superaram o uso da tabela em layouts. Hoje o “CSS” faz o papel de dar estilo aos nossos layouts, dividindo em colunas e linhas todo o nosso conteúdo sem a necessidade de utilizarmos tabela, o que facilitou a vida do web designer em níveis absurdos.
Antigamente era muito complicado fazer um layout de site bonito, moderno, com alinhamento perfeito, pois as tabelas complicam os espaçamentos entre os elementos.
VIVA O CSS.

A bastante tempo, a W3C – World Wide Web Consortium (consórcio responsável pelos padrões para a Web) julga as utilização de tabelas como auxiliares de layout.

Portanto, a utilização de tabelas é somente para tabular dados!

CONSTRUÇÃO DA TABELA

As tabelas são definidas pela tag <table>.

Dentro de uma tabela nós temos linhas e colunas, correto?

Linhas: são definidas pela tag <tr>.
Colunas: são definidas pela tag <td>.

Portanto, para construirmos uma simples tabela:

CAPTION <CAPTION>

Atualmente com a necessidade de tornar o site acessível a todo tipo de usuário, seja cego, mudo, surdo, com problemas de coordenação motora e etc, a utilização da Tag <caption> tornou-se fundamental.
Essa tag é interpretada pelos leitores de tela, e se torna um título para a tabela.
Você pode, com a ajuda do CSS, esconder esse elemento para que ele não seja visualizado pelo usuário, e somente identificado pelos leitores.

ESTÁ GOSTANDO DESTE ARTIGO?

Então não deixe de compartilhar com seus amigos. Ajude a Tutorial Web Design a crescer ainda mais.

 

CABEÇALHO DA TABELA <THEAD>

Geralmente as tabelas possuem um “Cabeçalho”, onde é informado o título que representa cada coluna, por exemplo:

Tenho uma lista de funcionários e quero apresentá-los em uma tabela, portanto, eu tenho uma coluna com o título “Matrícula”, outra coluna com o título “Nome” e outra com o título “Telefone”.
Na coluna “Matrícula” eu irei informar as matrículas dos funcionários;
Na coluna “Nome” eu irei informar o nome dos funcionários;
E na coluna “Telefone” o telefone dos funcionários.

Em HTML nós temos a Tag <thead> que representa o cabeçalho da tabela.

Perceba que dentro do cabeçalho <thead> nós também temos a tag <tr>, mas o <td> é trocado pela tag <th>.

CORPO DA TABELA <TBODY>

Além do cabeçalho, uma tabela também precisa de um corpo, correto?
Assim como acontece com nosso documento HTML, a tabela tem um <body> que na verdade é a tag <tbody>.

RODAPÉ DA TABELA <TFOOT>

As tabelas também possuem um rodapé, sinalizado pela Tag <tfoot>.
Muito utilizado para representar resultado de cálculos dentro de uma tabela.

ATRIBUTOS DE TABELA

Existem alguns atributos que podemos acrescentar em nossas tabelas, tanto na própria tag <table> quando nas demais tags dentro da tabela.

AtributoOnde aplicarDescrição
border <table> informar a largura da borda da tabela. Atualmente pouco utilizado, pois estilizamos esse atributo no CSS.
summary <table> informações necessárias que são interpretadas pelos leitores de tela para deficientes visuais. O summary é lido pelo leitor de tela e o usuário que possui deficiência visual consegue identificar a finalidade da tabela.
colspan <td> informar quantas colunas serão mescladas.
rowspan <tr> informar quantas linhas serão mescladas.

FINALIZANDO

Existem mais Tags que podemos utilizar junto com as tabelas, mas serão assuntos de tutoriais futuros. Por enquanto, aprenda a construção básica.
Se você for capaz de construir suas tabelas conforme esse tuturial, estará com 80% do conhecimento sobre tabelas em HTML.
Parece algo complicado no início, mas depois de fazer algumas delas, você estará familiarizado e vai se tornar simples.

Espero que vocês tenham gostado deste tutorial.
Caso tenham alguma dúvida não deixem de perguntar e se gostaram, comente e ajudem a TWD a continuar trazendo novidades.

Muito obrigado e até a próxima.

Envie um Comentário

Comentários

Seja o primeiro a comentar

Artigos Relacionados