Antes das div's e dos elementos semânticos no HTML as páginas web eram organizadas por meio de tabelas. As tabelas no HTML não podem ser montadas de formas desiguais, ou seja, as linhas de uma tabela devem conter a mesma quantidade de células,por isso não era a melhor escolha para layout de uma página na web.
Exemplo: Uma tabela de 3 linhas, sendo 2 linhas com 3 células e uma linha com 2 células, não e possível no HTML. Você pode esconder uma célula utilizando CSS ou você pode mesclar as células, mas não pode deixar de inserir na construção da tabela a quantidade igual de colunas nas linhas.
2.1 table:
Este elemento HTML é utilizado para criar a tabelas.
tr: Este elemento HTML é utilizado para criar as linhas da tabela e as células são criadas abaixo desta tag.
th: Este elemento HTML é utilizado para criar as células na tabela, mas as células criadas com elemento indicam células títulos de linhas e/ou colunas e os texto das mesmas aparecem em negrito
td: Este elemento HTML cria as células comuns das tabelas.
caption: Este elemento HTML é utilizado para dar nome a tabela é uma marcação semântica.
thead: Esta tag também é uma marcação semântica e define o cabeçalho da tabela, mas não aparece no navegador.
tbody: Esta tag também é uma marcação semântica e define o corpo da tabela, mas não aparece no navegador.
tfoot: Esta tag também é uma marcação semântica e define o rodapé da tabela, mas não aparece no navegador.
2.2 Como criar tabelas acessíveis.
Quando queremos criar uma tabela acessível devemos utilizar as marcações semânticas mencionadas acima como: caption, thead, tbody, tfoot e th.
Exemplo:
No navegador:
