Confira também as duas primeiras aulas para não ficar perdido: http://www.xtibia.com/forum/topic/205838-aula-2-listas-ordenadas-listas-nao-ordenadas-listas-de-definicao/
Nesta terceira aula vou ensinar tabelas.
Tabelas
Tabelas são conjuntos de células, divididas em colunas e linhas, e servem para mostrar dados tabulados. Embora muitos ditos "desenvolvedores" usem tabelas pra fazer layouts dos sites, isso NÃO é recomendado e eu vou ensinar isso usando divs e CSS.
Tabelas são definidas pela tag <table> e possuem vários elementos internos para organizar. Como exemplo, vamos construir uma tabelinha com os stages de um servidor.
Dentro da tag table, nós usamos as tags <tr> (table row) para definir uma linha e, dentro dessa linha, <td> (table data) para definir uma célula. Também podemos usar o atributo "border" para definir a espessura da borda, em pixels, mas em breve vamos mudar isso. Assim:
<table border="1">
<tr>
<td>Level mínimo</td>
<td>Level máximo</td>
<td>Stage</td>
</tr>
<tr>
<td>~~</td>
<td>50</td>
<td>100x</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>50x</td>
</tr>
<tr>
<td>200</td>
<td>~~</td>
<td>10x</td>
</tr>
</table>
Bem básico né? Mas essa primeira linha não ficou legal... que tal se a gente dividir a tabela em uma linha de cabeçalho? Também é possível! As tabelas podem usar as tags <thead> (table head), <tfoot> (table footer) e <tbody> (table body) (NESTA ORDEM) para separar cabeçalhos, rodapés e corpo da tabela. Dentro do thead, usamos a tag <th> (table header) ao invés de tr para destacar o cabeçalho. Por exemplo:
<table border="1">
<thead>
<tr>
<td>Level mínimo</td>
<td>Level máximo</td>
<td>Stage</td>
</tr>
</thead>
<tbody>
<tr>
<td>~~</td>
<td>50</td>
<td>100x</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>50x</td>
</tr>
<tr>
<td>200</td>
<td>~~</td>
<td>10x</td>
</tr>
</tbody>
</table>
Além disso, nós também podemos usar a tag <caption> para definir a legenda/título de uma tabela! Ao invés de usar um heading fora da tabela, isso facilita nosso trabalho 
<table border="1">
<caption>Stages do servidor</caption>
<thead>
<tr>
<th>Level mínimo</th>
<th>Level máximo</th>
<th>Stage</th>
</tr>
</thead>
<tbody>
<tr>
<td>~~</td>
<td>50</td>
<td>100x</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>50x</td>
</tr>
<tr>
<td>200</td>
<td>~~</td>
<td>10x</td>
</tr>
</tbody>
</table>
É importante saber usar todos estes elementos na hora de fazer seu site. Embora haja pouca diferença visual, por exemplo, ao colocar o th, na prática isso é bom para ferramentas de pesquisa e é um bom costume.
A tarefa da vez vai usar esta aula e a anterior: imagine um servidor fictício, e faça uma página com o título, uma lista com as skill rates e uma tabela com os stages (como nos exemplos acima). Se quiser, use imagens, links e os outros elementos da primeira aula também.
indentar não é obrigatório, mas é muito melhor.
