Tabelas podem ser difícies no começo, mas com um pouco de paciência e prática vocÇe verá que as coisas nem sempre são como parecem. A tag <table> é usada para abrir uma tabela. Com essa tag encontraremos outras tags típicas. <tr> (as linhas da tabela) e <td> (as colunas da tabela). Mas a melhor explicação é sempre um exemplo:
html<table border="1">
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
O conteudo será colocado entre as filas da tabela. A fila representa o que está entre <td> e </td>. O atributo de bostra estabiliza o comprimento das margens da tabela.
Para formar uma tabela assimetrica iremos usar 'rowspan' para cruzar mais de uma linha e 'colspan' para cruzar mais de uma coluna. Se quisermos que a primeira linha sirva de título para todas as colunas usaremos a tag <th> . Essas serão escritas em negrito, como veremos no seguinte exemplo:
html<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
| Row 2 Cell 2 | Row 2 Cell 3 | |
| Row 3 Cell 1 | ||
Com a ajudade dos atributos 'cellpadding' e 'cellspacing' estabeleceresmos as distâncias entre as células, 'Cellspacing' estabiliza o tamanho da margem e 'cellpadding' a distância entrea margem e o conteúdo. No exemplo a seguir um pouco de cor foi adicionado.
html<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>Para fazer uma diferença melhor delineada, apague as margens do exemplo anterior.
A distância entre as células e a o tamanho d margem será interpretado pelo navegador em pixels. Usando essa rega, o valor 10 na verdade significa 10 pixels. Esse não é o único atributo que usa pixels como unidade de medida, mas aprenderesmos sobre os outros a medida que avançamos pelos próximos tutoriais.