Material 7 Tecnologias WEB 1

Tabelas
Uma tabela é composta por linhas e colunas que formam uma célula.
Essas células podem conter textos, imagens e até mesmo outras tabelas

Tabelas - Tags
Tags:
<table> ... </table>  delimita uma tabela

<caption> ... </caption>  define um título para tabela (é opcional).
<tr> ... </tr>  delimita uma linha.

<td> ... </td>  delimita uma coluna.
<th> ... </th>  tags de cabeçalho (negrito e centralizado). Atributos da tag <table> width: especifica a largura da tabela. height: especifica a altura da tabela. align: alinha a tabela (left|center|right). valign: alinhamento vertical da célula
(top | bottom | middle). bgcolor: cor de fundo. cellpadding: define o espaço entre a célula e sua borda. cellspacing: define o espaço entre as células.
Border: especifica a largura da borda (use o valor "0" para não exibir as bordas).
Bordercolor: atualiza a cor da corda

Atributos da tag <table>
<table
[border="n"]
[cellpadding="n"]
[cellspacing="n"
[width="n"]
[align="left"|"center"|"right“]
>
...
</table>

EXEMPLO (Tabela)
<table>
<tr>
<td> linha 1, coluna 1 </td>
<td> linha 1, coluna 2 </td>
</tr>
<tr>
<td> linha 2, coluna 1 </td>
<td> linha 2, coluna 2 </td>
</tr>
</table>

<table bgcolor="yellow" align="center">
<caption><font size="4">Tabela comparativa de valores</font></caption>
<tr> <th colspan=3> DATA: 09/04/2014</th> </tr>
<tr>
<td><font color="BLUE">Produto</font></td>
<td align=right><font color="BLUE">Mercado 1</font></td>
<td align=right><font color="BLUE">Mercado 2</font></td>
</tr>
<tr>
<td align=left>Arroz (1Kg)</td>
<td align=right><font color="RED">R$2,56</font></td>
<td align=right><font color="RED">R$2,89</font></td>
</tr>
<tr>
<td>Feijão (1Kg)</td>
<td align=right><font color="RED">R$3,25</font></td>
<td align=right><font color="RED">R$3,11</font></td>
</tr>
<tr>
<td>Refrigerante (2L)</td>
<td align=right><font color="RED">R$4,78</font></td>
<td align=right><font color="RED">R$4,63</font></td>
</tr>
</table>

EXEMPLO (Tabela)

TABELAS: