Neste tópico o conteúdo da aula será como criar e apresentar uma tabela de dados em seu site.
Mas o que é tabela?
Se você já fez curso de excel vai estar familiarizado com o termo, tabela é uma grade de informações dispostas em linhas e colunas. Por exemplo: podemos ter uma tabela de alunos que informe o nome e a idade dos alunos.
Exemplo de uma tabela, atenção para a disposição das linhas e colunas:
Legal né? Para criar uma tabela como esta é necessário um pouco de atenção com as Tags necessárias, basicamente são três tags principais:
TABLE: Cria e termina a tabela, é usada no início e no fim da tabela apenas.
TR: Cria e encerra uma linha, é usada toda vez que uma nova linha é inserida na tabela.
TD: Cria e encerra uma célula (coluna), é usada toda vez que uma nova informação é inserida na tabela.
Para entender melhor:
Na prática:
<table border="1" cellpadding="5" cellspacing="1">
<tr>
<td><b>Marca</b></td><td><b>Modelo</b></td><td><b>Valor</b></td>
</tr>
<tr>
<td>Gibson</td><td>Les Paul</td><td>R$ 6.852,32</td>
</tr>
<tr>
<td>Ibanez</td><td>J. Custom</td><td>R$ 2.653,32</td>
</tr>
<tr>
<td>Fender</td><td>Stratocaster</td><td>R$ 4.999,99</td>
</tr>
<tr>
<td>Yamaha</td><td>RGx</td><td>R$ 2.300,02</td>
</tr>
</table>
Legal? Vejam que na tag TABLE adicionei as propriedades border, cellpadding e cellspacing.
Elas representam respectivamente:
border: a largura da borda
cellpadding: a margem do texto em relação a borda
cellspacing: o espaço entre as bordas.
Agora é só praticar bastante!
Nenhum comentário:
Postar um comentário