HTML Básico - Introdução à Tabelas

helldanger1 · Nov 27, 2007

Objetivo:

O objetivo deste tutorial é ensinar você a criar tabelas, bem como trabalhar com esta tabela utilizandos alguns dos seus atributos, tudo mostrado de forma simples e objetiva através das telas.

Pré-requisito:

Para você poder acompanhar o desenvolvimento deste tutorial, será necessário ter conhecimento no mínimo do de informática básica e Parte 1, Parte 2, Parte 3 , Parte 4, Parte 5, Parte 6, Parte 7, Parte 8 e Parte 9 do tutorial html básico.

Nota:

Irei ensinar a linguagem de html de uma forma bem objetiva, ou seja, iremos aprender na prática através da criação páginas.

Vamos começar criando uma página para a criação das tabelas a qual iremos chamar de tabelas.html, copie o código abaixo e salve dentro da pasta site que a nossa pasta de projetos.

<html>

<head><title>Tabelas HTML</title></head>

<body>

<center>

<h2>Criação de Tabelas Html</h2>

</center>

</body>

</html>

helldanger1 · Nov 27, 2007

Veja a página abaixo:

Tela 001

Para começar a criar tabelas utilizamos as seguintes etiquetas:
<table></table>

Dentro dessas colocamos as outras etiquetas, os textos, imagens entre outros, ou seja, utilizamos as etiquetas <tr></tr> para definir linha na tabela e as etiquetas <td>/<td> para definir a coluna da mesma, vou mostrar um estrutura basica , onde vou mostrar uma tabela que tem duas linhas e duas colunas. Para isso através da página tabelas.html você deve exibir o codigo fonte, que é o codigo que relacionei logo acima para a criação da página que é mostrada na tela 001 e copiar o codigo abaixo, veja o procedimento.

<br><br>

<center>

<table>

<tr>

<td>Tabela</td>

<td>Tabela </td>

</tr>

<tr>

<td>Aprender</td>

<td>Aprender</td>

</tr>

</table>

</center>

Comecei inserindo uma quebra de página e depois as etiquetas para centralizar a tabela.Para iniciar a tabela começamos pelas etiquetas <table></table>, depois inseria etiquetas <tr></tr> para criar a primeira linha e dentro da mesma inseri as etiquetas <td></td> para a criação da primeira e segunda coluna, e ainda inseri um palavra na mesma.

Tela 002

Vamos começar a conhecer e a utilizar atributos dentro da tabela, o primeiro será “border” este serve para inserir um borda em volta da tabela, podemos especificar a espessura da mesma. Vamos inserir uma borda nesta tabela que acabamos de criar com a espessura 2, veja o procedimento:

Border=”2” esta é a definição que vamos utilizar.

<table border=”2”>

<tr>

<td>Tabela</td>

<td>Tabela </td>

</tr>

<tr>

<td>Aprender</td>

<td>Aprender</td>

</tr>

</table>

helldanger1 · Nov 27, 2007

Tela 004

Você pode aumentar o tamanho da espessura para ver como fica, agora vamos inserir o atributo “Bordercolor” este serve para inserir-mos uma cor a borda, vamos inserir a cor azul.

Bordercolor=”blue”

<table border=”2” bordercolor=”blue”>

<tr>

<td>Tabela</td>

<td>Tabela </td>

</tr>

<tr>

<td>Aprender</td>

<td>Aprender</td>

</tr>

</table>

Tela 005

Agora vamos utilizar os atributos Widht e heigt para especificar altura e largura da tabela.Veja que este aribustos estou ensirindo dentro da etiqueta <table>, mas pode ser inserido dentro das colunas ou linhas.Vamos especificar a largura e altura da tabela em 100%.

<table border=”2” bordercolor=”blue” whidth=” 80%” height=”80%”>

<tr>

<td>Tabela</td>

<td>Tabela </td>

</tr>

<tr>

<td>Aprender</td>

<td>Aprender</td>

</tr>

</table>

Tela 006

Agora vamos aprender a inserir uma cor de fundo na tabela para isso utlizamos etiqueta Bgcolor, vamos definir a cor verde.

bgcolor=”green”

<table border=”2” bordercolor=”blue” whidth=” 80%” height=”80%” bgcolor=”green”>

<tr>

<td>Tabela</td>

<td>Tabela </td>

</tr>

<tr>

<td>Aprender</td>

<td>Aprender</td>

</tr>

</table>

Tela 007

omo criar tabelas e a utilizar alguns atributos , tudo de uma forma objetiva e mostrado através das telas para que você tenha uma melhor entendimento possível

HTML Básico - Introdução à Tabelas

helldanger1

GForum VIP

helldanger1

GForum VIP

helldanger1

GForum VIP