ICC Turma D - UnB 2/04

Prática 5

1- Inserção de tabelas

Faça, com o notepad (bloco de notas), a "casca básica" do código fonte de um documento html. Grave-a num arquivo com extensão .htm em um diretório de trabalho. Para essa prática, vamos supor que voce esteja usando a conta pessoal do laboratório, saiba usar, configurar e navegar os navegadores disponíveis. e grave seus arquivos no seu diretório pessoal, aqui chamado home.

Experimente com as seguintes diretivas  <TABLE> <TR>, <TH> e <TD>.  (<TH>   </TH> significa Table Header, cabeçalho da tabela)

Sugerimos testar os seguintes parâmetros, com valores e escalas distintas

<table border="1" width="100">

<th><h3>minha primeira tabela</h3></th>
<tr>
    <td>.</td>
    <td>.</td>
    <td>.</td>
</tr>
<tr>
    <td>.</td>
    <td>.</td>
    <td>.</td>
</tr>
</table>

Parâmetros para alinhamento, com valores e escalas distitas

<table align="center" cellspacing="5" cellpadding="10" bgcolor="#ff0000">

<tr valign="bottom">
    <td>.</td>
    <td bgcolor="#00ff00">.</td>
    <td>.</td>
</tr>
<tr bgcolor="#0000ff">
    <td>.</td>
    <td>.</td>
    <td>.</td>
</tr>
</table>

Parâmetros ALIGN, ROWSPAN e COLSPAN

<table align="center" cellspacing="5" bgcolor="#ff0000">
<tr valign="middle">
    <td colspan="2">.</td>
    <td>.</td>
    <td>.</td>
</tr>
<tr align="right">
    <td>...</td>
    <td>..</td>
    <td>.</td>
</tr>
</table>


2- Tabelas para diagramação

Uma tabela com borda zero serve para o programador html dividir a área de uma região da sua página em retângulos que podem ser individualmente preenchidos, com diagramação independente, com ou sem liberdade nas dimensões das células. Dimensões livres de uma célula podem ser úteis para acomodar texto (cuja visualização depende da configuração do navegador), e dimensões fixas podem ser úteis para posicionar imagens relativas a texto e outras imagens..

Nesta parte da prática voce deve usar tabela sem borda para dispor de imagens e texto em alguma diagramação que explore os parâmetros de diretivas de tabela. Sugerimos testar a inserção de imagens e texto nas céluas abaixo

<table border="0" width="100%">
<th><h3>meu primeiro album de fotos</h3></th>
<tr>
    <td width="33%"><img src=""></td>
    <td><img src=""></td>
    <td width="33%"><img src=""></td>
</tr>
<tr>
    <td>foto 1: </td>
    <td>foto 2: </td>
    <td>foto 3: </td>
</tr>
<tr>
    <td><img src=""></td>
    <td><img src=""></td>
    <td><img src=""></td>
</tr>
<tr>
    <td>foto 4: </td>
    <td>foto 5: </td>
    <td>foto 6: </td>
</tr>
</table>