|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
3º Parte - Entendendo o código html
Nas páginas da web usamos um recurso muito útil para disposição de textos e imagens. Trata-se das tabelas.
A estrutura dela segue o seguinte padrao, tabela -> linha -> coluna onde tabela é <table>, linha <tr> (table row) e a coluna é <td> (table data). Na ilustração abaixo temos um exemplo de como elas se disponibilizam.
Uma tabela como a acima ficaria com um código assim:
<!-- inicio do código -->
<table>
<tr><!-- primeira linha -->
<td>coluna 1 - celula 1</td>
<td>coluna 2 - celula 2</td>
</tr>
<tr><!-- segunda linha -->
<td>coluna 1 - celula 3</td>
<td>coluna 2 - celula 4</td>
</tr>
<table>
* a tag <!-- comentário --> servem para fazer comentários. Use com freqüência para facilitar a compreensão de seu código.
Na tag<table> podemos usar várias opções como a largura da tabela, cor de fundo, largura da borda, e etc. Veja abaixo:
<table width="150" border=2 bgcolor="red" cellspacing="2"> onde podemos entender que a tabela tem 150 pixels de largura, a borda tem 2 pixels de largura, a cor de fundo é vermelha e o espaçamento entre as células (<td>) é de 2 pixels. Também existe a instrução cellpadding que é uma espécie de "margem interna" da célula.
Com a célula temos a possibilidade de usar porcentagem para se definir largura de tabela e células. Nos browsers mais atuais podemos também definir a altura da tabela/células.
Para se usar isto usamos ao invés de "width=640" usaríamos a seguinte instrução "width=100%" onde a tabela iria ocupar 100% do componente que ela estivesse fazendo parte. No caso abaixo ela iria tomar 100% da largura da tela:
<table width="100%">
<tr>
<td> tabela na página</td>
</tr>
</table>
As tabelas também pode ser aninhadas, ou seja, pode-se ter tabelas dentro de tabelas. Isto seria útil para uma tabela que tivesse a construção abaixo:
<table border="1">
<tr>
<td>exemplo de tabelas<td>
<td>
<table border="1">
<tr>
<td>
item 1
</td>
</tr>
<tr>
<td>
item 2
</td>
</tr>
<tr>
<td>
item 3
</td>
</tr>
</table>
</td>
</tr>
</table>
onde o resultado seria o abaixo:
1º Parte - Entendendo o código html
2º Parte - Entendendo o código html
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
 |
 |
|
|
|
|
| |
