|
14. Tabelas
As tabelas permitem a arrumação da informação e são extremamente úteis e versáteis,
por isso, é conveniente ter um certo controle sobre a estruturação.
As suas etiquetas básicos são:
| <table ... > ... </table> |
Que marca o inicio e o fim de uma tabela |
| <tr> ... </tr> |
Marcação de linha de tabela |
| <th ... > ... </th> |
Que marca o início e o fim de cada célula de cabeçalho |
| <td ... > ... </td> |
Que marca o início e o fim de cada célula da tabela |
as "..." indicam-nos que existe um conjunto de informações de 'style' que podem ser definidas nessa posição
usando 'style' (style= " ... ") ou num ficheiro '.css'. Destacam-se algumas elas:
| width: ...; |
Indica o espaço ocupado (percentagens, pixels, etc) |
| border: ...; |
Espaço do rebordo da tabela (2px solid blue;) |
| text-align: ...; |
Alinhamento do texto da célula (left, right, center) |
| vertical-align: ...; |
Alinhamento vertical texto da célula (top, bottom, middle) |
| cellpadding: ...px; |
Espaçamento entre as células |
| colspan: ...; |
Número de colunas ocupadas pela célula |
| rowspan: ...; |
Número de linhas ocupadas pela célula |
O código de escrita desta última tabela, incluindo apenas as primeiras duas linhas é:
<table width="90%" align="center" style="border: 2px solid blue;background-color:NavajoWhite;">
<tr>
<td style="width: 40%; align: left; valign: middle;..."><strong>width: ...;</strong></td>
<td style="width: 60%; align: left; valign: middle;..."><strong>Indica o espaço ocupado (percentagens, pixels, etc)</strong></td>
</tr>
<tr>
<td style="width: 40%; align: left; valign: middle;..."><strong>border: ...;</strong></td>
<td style="width: 60%; align: left; valign: middle;..."><strong>Espaço do rebordo da tabela (2px solid blue;)</strong></td>
</tr>
</table>
|