Como criar Tabelas em HTML

Tabelas em HTML

Nesta lição introduzimos a criação de tabelas em HTML. Usamos as tabelas para exibir dados tabulares em uma página, com por exemplo dados de uma planilha. Não devemos jamais usar tabelas para criar a estrutura da página HTML - o que era muito comum antigamente. Para isso, existem elementos muito mais apropriados, além do emprego de CSS (que estudaremos ao longo do curso).

Elementos da tabela HTML

  • Uma tabela em HTML é definida com o emprego do elemento <table>.
  • Cada linha da tabela é definida com a tag <tr>.
  • Um cabeçalho da tabela é definido com a tag <th>. Por padrão, os cabeçalhos das tabelas aparecem em negrito e com o conteúdo centralizado.
  • Um dado de tabela em uma coluna (dentro da célula) é definido com a tag <td>.

Estrutura básica de uma tabela HTML

A seguir temos a estrutura de elementos básicos que compõem uma tabela em HTML:

estrutura tabela html

Exemplo de tabela HTML

<table>
  <tr>
    <th>Nome</th>
    <th>Sobrenome</th> 
    <th>Cidade</th>
  </tr>
  <tr>
    <td>Fábio</td>
    <td>dos Reis</td> 
    <td>São Paulo</td>
  </tr>
  <tr>
    <td>Ana</td>
    <td>Paula</td> 
    <td>Rio de Janeiro</td>
  </tr>
  <tr>
    <td>Renata</td>
    <td>Mirelli</td> 
    <td>São Paulo</td>
  </tr>
</table>

Resultado:

Tabela HTML - Fábio dos Reis

Ainda há muito o que se trabalhar nesta tabela, porém sua estrutura básica já está presente - a organização dos dados em linhas e colunas, incluindo um cabeçalho na tabela.

 Veremos mais opções de estrutura e formatação da tabela na próxima lição.

 

Sobre Fábio dos Reis (1250 Artigos)
Fábio dos Reis trabalha com tecnologias variadas há mais de 25 anos, tendo atuado nos campos de Eletrônica, Telecomunicações, Programação de Computadores e Redes de Dados. É um entusiasta de Unix, Linux e Open Source em geral, adora Eletrônica e Música, e estuda idiomas, além de ministrar cursos e palestras sobre diversas tecnologias em São Paulo e outras cidades do Brasil.
Contato: Website

Escreva um comentário

Seu e-mail não será divulgado


*