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: