Outro elemento muito importante e mais complexo presente em textos.

Novamente, podemos definir tabelas utilizando de texto simples e CSS, porém para garantir acessibilidade devemos sempre utilizar as tags HTML corretas.

Uma tabela começa pela tag table, seguida de três nodos: thead, tbody e tfoot.

thead

Define o cabeçalho de nossa tabela, a primeira linha com as definições de cada coluna.

Esta tag possui nodos do tipo tr, normalmente somente um. Este nodo por fim possui nodos do tipo th, um para cada coluna com o conteúdo textual.

<table>
        <thead>
            <tr>
                <th>Dinossauro</th>
                <th>Fofura</th>
                <th>Come humanos</th>
            </tr>
        </thead>
        <tbody>
            ...
        </tbody>
        <tfoot>
            ...
        </tfoot>
    </table>

tbody

Esta tag define o corpo da nossa função. Ela também possui nodos do tipo tr, um para cada linha de conteúdo. E cada nodo tr possui nodos th, sendo um para cada coluna.

<tbody>
	<tr>
	  <td>Tiranossauro</td>
    <td>Máxima</td>
    <td>Sim, adora</td>
	</tr>
  <tr>
	  <td>Braquiossauro</td>
    <td>Acima do Máximo</td>
    <td>Não, obrigado</td>
	</tr>
  <tr>
	  <td>Pterodactyl</td>
    <td>Fofo voador</td>
    <td>Provavelmente não</td>
	</tr>
</tbody>

tfoot

Por fim temos o rodapé da nossa tabela, novamente seguindo os mesmo padrões de nodos.

<tfoot>
	<tr>
	  <td>Total de fofura:</td>
    <td>Extrema</td>
	</tr>
</tfoot>