Tabelas HTML

Prós
- Visualização de dados via linhas e colunas
- Boa acessibilidade para leitura dos dados
Contras
- Pouco flexível
- Precisa de estilização para melhor visualização
Não usar
- Para criar seu layout

Tabela Simples

Para criarmos uma tabela, usamos a tag <table> ;
Dentro da tag <table>, utilizaremos a tag <tr>, que quer dizer Table Row, ou no português, Linha de Tabela ;
Dentro da tag <tr>, podemos colocara tag <th>, que vem a ser o cabeçalho ;
Dentro da tag <tr>, utilizamos a tag <td>, para inserir o conteúdo da linha.

Veja como fica na prática o código:

<table>
<tr>
     <th> Nome </th>
     <th> Idade </th>
</tr>
<tr>
     <td> nome </td>
     <td> 18 </td>
</tr>
</table>

Na prática, o que termos é:

Nome Idade
Nome 18

Organizando a Tabela

Já vimos como criar uma tabela simples certo? Bom, agora vamos organizar ela um pouco e para isso, teremos algumas tags que serão apresentadas:

<caption> : Vem a ser a descrição do que tem na nossa tabela. Exemplo:

<caption> Pessoas por Idade

<colgroup> : Tag usada para agrupar as colunas da tabela.

Dentro da tag <colgroup> temos a tag <col> para gerenciarmos o estilo das colunas.

-------------------------------------------------

<thead>, que seria Table Head, no português, Cabeça da Tabela/Cabeçalho. Então, tudo que for fazer parte do cabeçalho fica aqui dentro, exemplo:
<table>
<caption> Pessoas por Idade </caption>
<thead>
     <tr>
          <th> Nome </th>
          <th> Idade </th>
     </tr>
</thead>
...

-------------------------------------------------

<tbody>, que é o nosso Table Body, Corpo da Tabela/Conteúdo da Tabela. Logo, tudo que for de conteúdo vira para dentro do <tbody>, exemplo:
...
<tbody>
     <tr>
          <td> Nome </td>
          <td> Idade </td>
     </tr>
</tbody>
...

-------------------------------------------------

<tfoot>, que é o nosso Table Foot, Rodapé. Nele, colocaremos por exemplo Total de Pessoas, exemplo:
...
<tfoot>
     <tr>
          <td> Total de Pessoas </td>
          <td> 2 </td>
     </tr>
</tfoot>
</table>

Como resultado, teremos:

Pessoas por Idade
Nome Idade
Nome Idade
Total de Pessoas 2

-------------------------------------------------

Tabela Complexa

Nesse tópico abordaremos a criação de uma tabela complexa, mas calma, tudo será explicado da melhor maneira possível. Para exemplificar, faremos uma tabela que:
- Terá 2 (duas) lojas;
- Cada loja terá os mesmos 2 (dois) produtos;
- Terá a quantia de produtos produzidos e vendidos por cada uma das lojas.

-------------------------------------------------

OBS.: Precisaremos deixar uma célular em branco, utilizaremos o atributo rowspan seguido de "2" que é o numero de linhas que precisamos em branco, além do rowspan utilizaremos colspan seguido de "2"para deixarmos as colunas em branco para que fique de acordo e mais organizado. Tem-se o atributo scope que utilizaremos para dizermos para cada item à qual categoria ele se encaixa, exemplo:

col; colgroup; row e rowgroup

Sendo:
Col - Colunas;
Colgroup - Grupo de Colunas;
Row - Linha;
Rowgroup - Grupo de Linhas.

-------------------------------------------------

<!--Table, Caption e Colgroup-->

<table>
<caption> Lojas e Produtos </caption>
          <colgroup>
                        <col>
                        <col span="2"style="background-color: aqua ">
                        <col span="2"style="background-color: greenyellow ">
          </colgroup>
...

-------------------------------------------------

<!--Table Head-->

...
<thead>
     <tr>
          <th rowspan="2"</th>
          <th colspan ="2" scope="colgroup"> Loja 1 </th>
          <th colspan ="2" scope="colgroup"> Loja 2 </th>
     </tr>

     <tr>
          <td scope="col"> Produzidos Loja 1 </td>
          <td scope="col"> Vendidos Loja 1 </td>
          <td scope="col"> Produzidos Loja 2 </td>
          <td scope="col"> Vendidos Loja 2 </td>
     </tr>
</thead>
...

-------------------------------------------------

<!--Table Body-->

...
<tbody>
     <tr>
          <th scope="row"> Produto 1 </th>
          <td> 20 </td>
          <td> 15 </td>
          <td> 10 </td>
          <td> 10 </td>
     </tr>

     <tr>
          <th scope="row"> Produto 2 </th>
          <td> 50 </td>
          <td> 45 </td>
          <td> 40 </td>
          <td> 25 </td>
     </tr>
</tbody>
...

-------------------------------------------------

Resultado Tabela Complexa

Lojas e Produtos
Loja 1 Loja 2
Produzidos Loja 1 Vendidos Loja 1 Produzidos Loja 2 Vendidos Loja 2
Produto 1 20 15 10 10
Produto 2 50 45 40 25

-------------------------------------------------

De certa forma é uma tabela simples, mas, se você chegou até aqui, seguindo os passos, percebe que faz jus ao nome "Complexa".