Campus Garanhuns
TABELAS EM HTML
TABELAS EM HTML
• Utilizada para listagem de dados
• Também utilizada para organizar formulários e layout
  de páginas
• Para layout de páginas recomenda-se o uso de <div>
   • Tabless
COMO É FEITA A CRIAÇÃO DE TABELAS EM
HTML
• Há 3 tags principais:
 • <table>
 • <tr>
 • <td>
• A tag<table> é usada para criação da estrutura da
  tabela
• A tag <tr> é usada para criação de linhas na tabela
• A tag< td> é usada para criação de colunas na tabela
EXEMPLO DE CÓDIGO HTML PARA TABELAS

<table border='1'>
<tr>
<td>coluna 1</td>
<td>coluna 2</td>
</tr>
</table>
ATRIBUTOS DA TAG <TABLE>

• border
  • Descrição: Define se a tabela terá borda ou não
  • Valores: 1 ou 0
• id
  • Descrição: identificadores para a tabela
• cellspacing
  • Descrição: espaçamento entre as colunas da tabela
  • Valores: em pixels
• width
  • Descrição: largura da tabela
ATRIBUTOS DA TAG <TD>

• align
  • Descrição: Define o alinhamento do conteúdo dentro da coluna
  • Valores: left, right, center, justify
• colspan
  • Descrição: Determina o número de colunas uma célula deve
    ocupar
• rowspan
  • Descrição: Determina o número de linhas que uma célula deve
    ocupar
TAG <TH>
• Em geral tabelas possuem cabeçalhos utilizados para
  organizar as informações
• Utiliza-se esta tag para definir os cabeçalhos em
  tabelas
• Utilizada juntamente com a tag <tr> e ao invés da tag
  <td>
EXEMPLO DE CÓDIGO HTML PARA CABEÇALHO
DE TABELA
<table border='1'>
<tr>
<th>cabeçalho 1</th>
<th>cabeçalho 2</th>
<tr>
<td>coluna 1</td>
<td>coluna 2</td>
</tr>
</table>
EXERCÍCIO TABELAS

Criação de tabelas com HTML

  • 1.
  • 2.
  • 3.
    TABELAS EM HTML •Utilizada para listagem de dados • Também utilizada para organizar formulários e layout de páginas • Para layout de páginas recomenda-se o uso de <div> • Tabless
  • 4.
    COMO É FEITAA CRIAÇÃO DE TABELAS EM HTML • Há 3 tags principais: • <table> • <tr> • <td> • A tag<table> é usada para criação da estrutura da tabela • A tag <tr> é usada para criação de linhas na tabela • A tag< td> é usada para criação de colunas na tabela
  • 5.
    EXEMPLO DE CÓDIGOHTML PARA TABELAS <table border='1'> <tr> <td>coluna 1</td> <td>coluna 2</td> </tr> </table>
  • 6.
    ATRIBUTOS DA TAG<TABLE> • border • Descrição: Define se a tabela terá borda ou não • Valores: 1 ou 0 • id • Descrição: identificadores para a tabela • cellspacing • Descrição: espaçamento entre as colunas da tabela • Valores: em pixels • width • Descrição: largura da tabela
  • 7.
    ATRIBUTOS DA TAG<TD> • align • Descrição: Define o alinhamento do conteúdo dentro da coluna • Valores: left, right, center, justify • colspan • Descrição: Determina o número de colunas uma célula deve ocupar • rowspan • Descrição: Determina o número de linhas que uma célula deve ocupar
  • 8.
    TAG <TH> • Emgeral tabelas possuem cabeçalhos utilizados para organizar as informações • Utiliza-se esta tag para definir os cabeçalhos em tabelas • Utilizada juntamente com a tag <tr> e ao invés da tag <td>
  • 9.
    EXEMPLO DE CÓDIGOHTML PARA CABEÇALHO DE TABELA <table border='1'> <tr> <th>cabeçalho 1</th> <th>cabeçalho 2</th> <tr> <td>coluna 1</td> <td>coluna 2</td> </tr> </table>
  • 10.