Professor efetivo no Instituto Federal de Educação, Ciência e Tecnologia de Pernambuco em Instituto Federal de Educação, Ciência e Tecnologia de Pernambuco
30 de Jan de 2013•0 gostou•1,216 visualizações
1 de 10
Criação de tabelas com HTML
30 de Jan de 2013•0 gostou•1,216 visualizações
Baixar para ler offline
Denunciar
Educação
Slide da disciplina de linguagem de programação para a web do curso técnico em informática do IFPE - Campus Garanhuns. Apresenta como é realizada a criação de tabelas utilizando HTML
Professor efetivo no Instituto Federal de Educação, Ciência e Tecnologia de Pernambuco em Instituto Federal de Educação, Ciência e Tecnologia de Pernambuco
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 É 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
5. EXEMPLO DE CÓDIGO HTML 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>
• 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>
9. 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>