Prosseguindo com a série de tópicos sobre web, vamos introduzir mais algumas tags e estruturas HTML importantes.
Criar uma tabela numa página web é simples usando código HTML. Mas uma tabela é uma estrutura que apresenta algumas estruturas "filhas" dentro dela. Primeiro criamos uma tabela com a tag <table> e fechamos a tabela com o fechamento da tag usando </table>.
<table>
</table>
Geralmente uma tabela tem um cabeçalho. O HTML tem tags que demonstram a semântica de cada estrutura da tabela. Então, para criar um cabeçalho na nossa tabela, usamos a tag <thead>:
<table>
<thead>
</thead>
</table>
O cabeçalho tem geralmente uma linha. A tag que simboliza uma linha de tabela em HTML é a tag <tr>, de "table row". Então cada linha em uma tabela HTML é representada por <tr>
<table>
<thead>
<tr>
</tr>
</thead>
</table>
Agora que já criei a linha de cabeçalho, posso criar uma tag para cada elemento, cada célula, desse meu cabeçalho. A tag que representa semanticamente uma célula de cada informação de cabeçalho é a tag <th>, que significa "table header":
<table>
<thead>
<tr>
<th>Nome</th>
<th>Sexo</th>
<th>Idade</th>
<th>CPF</th>
</tr>
</thead>
</table>
Acima um exemplo de cabeçalho de tabela com as informações de nome, sexo, idade e CPF.
Cabeçalho feito, agora podemos preencher o corpo de nossa tabela. Assim como a tag <thead> representa a estrutura que irá receber os dados de nosso cabeçalho, existe a tag <tbody> que representa o corpo da tabela, a estrutura que irá receber os dados propriamente ditos. Dentro do<tbody>, cada linha de dados é representada por uma nova tag <tr>, que, como dito, simboliza uma linha na tabela HTML. E assim como a tag <th>, de "table header", há a tag <td>, de "table data", que simboliza cada célula de dados na nossa tabela. Abaixo um exemplo da tabela criada e já recebendo dados.
<table>
<thead>
<tr>
<th>Nome</th>
<th>Sexo</th>
<th>Idade</th>
<th>CPF</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fulano</td>
<td>M</td>
<td>25</td>
<td>123.456.789-01</td>
</tr>
<tr>
<td>Ciclana</td>
<td>F</td>
<td>29</td>
<td>555.555.555-05</td>
</tr>
</tbody>
</table>
Se abrir a página HTML com o código acima:
Vejam que a tabela não tem bordas. O certo seria estilizar a tabela, inclusive com a adição de bordas, usando CSS, mas dá pra adicionar as bordas no HTML de uma forma mais grosseira usando o atributo "border" na tag "table":
<table border="1">
...
</table>
Agora a tabela fica assim:
Uma borda bem feia, é verdade. Como dito, o ideal é adicionar bordas usando CSS. Vamos chegar lá.
Pra não ficar só na teoria, vejamos a estrutura de uma tabela aqui na Bastter, na página da WEGE:
