| Criadores |
| Fábio
Azevedo, 28 anos, paulistano, webmaster. Veja mais. |
| |
| Felipe
Braga de Oliveira, 26 anos, paulistano, contador. Veja mais. |
| |
| Luisa
Haddad, 22 anos, paulista, webdesigner. |
| |
| Ludmila Simões, 28 anos, jacareiense, webdesigner. Veja mais. |
| |
| Objetivo |
| Este
projeto foi desenvolvido como atividade curricular da materia 'Fundamentos
Web' do primeiro semestre do curso de graduação 'Sistemas para internet / Desenvolvimento web' da faculdade de tecnologia IBTA. |
| |
| Desenvolvimento |
| Utilizamos como ferramenta para a construção deste site o Dreamweaver. Este site foi desenvolvido totalmente em HTML como sendo um dos pré-requisitos para este trabalho. |
| |
|
| |
6.
tabelas
|
Assim como tabelas de processadores de texto ou planilhas, as tabelas HTML contêm linhas e colunas formadas por células. Nas células são inseridos os conteúdos: texto, imagens, outros elementos e mesmo outras tabelas.
tabela
As tabelas são utilizadas para organização do site. Para começar
deve-se utilizar a tag <table>, mas toda tabela possui
colunas e linhas portanto vamos aprender a criá-las.
| |
<table></table> |
 |
linha
As linhas são as "Rows".
| |
<tr></tr> |
|
célula ou coluna
As celulas são as "Columns".
| |
<td></td> |
|
montando uma tabela
 exemplo: |
| |
<table
width="400" border="1">
<tr>
<td width="199" bgcolor="#CCCC00">Texto1</td>
<td width="185" bgcolor="#CCCC00">Texto2</td>
</tr>
<tr>
<td width="199" bgcolor="#CCCC00">Texto3</td>
<td width="185" bgcolor="#CCCC00">Texto4</td>
</tr>
</table> |
|
| |
| Texto1 |
Texto2 |
| Texto3 |
Texto4 |
|
|
|
cabeçalho da tabela
Para organizar melhor as suas tabelas, você pode usar a tag
<caption>, que permite inserir um título para a
tabela.
| |
<caption></caption> |
|
| exemplo: |
| |
<table width="400" border="1">
<caption>Cabeçalho da tabela!</caption>
<tr>
<td width="199" bgcolor="#CCCC00">Texto1</td>
<td width="185" bgcolor="#CCCC00">Texto2</td>
</tr>
<tr>
<td bgcolor="#CCCC00">Texto3</td>
<td bgcolor="#CCCC00">Texto4</td>
</tr>
</table> |
|
| |
Cabeçalho da tabela!
| Texto1 |
Texto2 |
| Texto3 |
Texto4 |
|
|
|
cabeçalho da coluna
Agora vamos falar do cabeçalho da coluna. Utiliza-se a tag <th>
que é usada para inserir uma legenda para colunas e linhas da
tabela.
| |
<th></th> |
|
| exemplo: |
| |
<table
width="400" border="1">
<caption>Cabeçalho da tabela!</caption>
<tr>
<th>Cabeçalho coluna1</th>
<th>Cabeçalho coluna2</th>
</tr>
<tr>
<td width="199" bgcolor="#CCCC00">Texto1</td>
<td width="185" bgcolor="#CCCC00">Texto2</td>
</tr>
<tr>
<td width="199" bgcolor="#CCCC00">Texto3</td>
<td width="185" bgcolor="#CCCC00">Texto4</td>
</tr>
</table> |
|
| |
Cabeçalho da tabela!
| Cabeçalho coluna1 |
Cabeçalho coluna2 |
| Texto1 |
Texto2 |
| Texto3 |
Texto4 |
|
|
|
alinhamento
e tamanho
Um parâmetro importante para uma tabela é o ALIGN, ele tem a
função de alinhar a sua tabela na página. O tamanho de sua tabela
pode ser alterado com os parâmetro widht(largura) e height(altura),
e também o tamanho das suas células.
| |
<table
width="" height="" align="">
<td width="" height="" align=""
valign=""> |
|
| exemplo: |
| |
<table
width="400" border="2" align="center">
<tr>
<td width="192" height="25" align="left"
valign="top">Texto1</td>
<br>
<td width="192" height="25" align="center"
valign="middle">Texto2</td>
</tr>
<tr>
<td width="192" height="25" align="right"
valign="bottom">Texto3</td>
<td width="192" height="25">Texto4</td>
</tr>
</table> |
|
| |
| Texto1 |
Texto2 |
| Texto3 |
Texto4 |
|
|
|
bordas
Podemos também alterar tamanho e cores das bordas de sua tabela e também das suas células.
| |
<table
border="2" bordercolor="#999900">
<td bordercolor="#000000"> |
|
| exemplo: |
| |
<table
width="400" border="2" bordercolor="#999900">
<tr>
<td width="192" height="25" bordercolor="#000000">Texto1</td>
<td width="192" height="25" bordercolor="#000000">Texto2</td>
</tr>
<tr>
<td width="192" height="25" bordercolor="#000000">Texto3</td>
<td width="192" height="25" bordercolor="#000000">Texto4</td>
</tr>
</table> |
|
| |
| Texto1 |
Texto2 |
| Texto3 |
Texto4 |
|
|
|
|
| |
|
|
tabela