da tabela e tudo aquilo exceto o caption e head, ou seja, as informacoes sobre as linguagens.Entao vamos englobar esse trecho entre as tags:<tbody> </tbody>Veja como fica nosso codigo:<table border="1"> <caption>Linguagens</caption> <thead> <tr><td>Tipos de linguagem</td></tr> </thead> <tbody> <tr><td>Web</td> <td>Desktop</td></tr> <tr><td>HTML</td> <td>C </td> </tr> <tr><td>JavaScript</td> <td>C++</td> </tr> <tr><td>PHP</td> <td>Java</td> </tr> </tbody></table>Embora nao tenha muito efeito na tabela em si, ela estara mais organizada e definida:LinguagensTipos de linguagemWebDesktopHTMLCJavaScriptC++PHPJava<tfoot> - O rodape de uma tabelaE por fim, nem mais nem menos importante, existe o rodape de uma tabela.Assim como no rodape de um site, ele fica la embaixo e geralmente contem alguma informacao sobre o site/tabela ou autor/webmaster.Para criar um rodape, basta escrever o que queremos que apareca na base da tabela dentro das tags:<tfoot> </tfoot>Vamos escrever "by HTML Progressivo" em nosso rodape:<table border="1"> <caption>Tabela 1.1</caption> <thead> <tr><td>Tipos de linguagem</td></tr> </thead> <tbody> <tr><td>Web</td> <td>Desktop</td></tr> <tr><td>HTML</td> <td>C </td> </tr> <tr><td>JavaScript</td> <td>C++</td> </tr> <tr><td>PHP</td> <td>Java</td> </tr> </tbody> <tfoot> <tr><td>by HTML Progressivo</td></tr> </tfoot></table>Veja como ficou a tabela:Tabela 1.1Tipos de linguagemWebDesktopHTMLCJavaScriptC++PHPJavaby HTML ProgressivoNote tambem que colocamos na ordem: thead, tbody e tfootPorem, isso nao e obrigatorio, pois o navegador e inteligente o suficiente para saber que o cabecalho fica em cima, o rodape ao fim, e tudo entre esses dois e o corpo da tabela.Entao, se invertermos essa ordem, o resultado e o seguinte codigo (que produz a mesma tabela):<table border="1"> <caption>Tabela 1.1</caption> <thead> <tr><td>Tipos de linguagem</td></tr> </thead> <tbody> <tr><td>Web</td> <td>Desktop</td></tr> <tr><td>HTML</td> <td>C </td> </tr> <tr><td>JavaScript</td> <td>C++</td> </tr> <tr><td>PHP</td> <td>Java</td> </tr> </tbody> <tfoot> <tr><td>by HTML Progressivo</td></tr> </tfoot></table><th> - Celulas de cabecalho no corpoAlgumas vezes queremos que algumas celulas do corpo sejam destacadas, como se fossem principais ou que contenham uma informacao diferenciada ou mesmo uma informacao sobre uma linha ou coluna.No exemplo passado, nem "Web" nem "Desktop" eram tipos de linguagens.Elas serviam para classificar as celulas que estavam abaixo delas, na mesma coluna.Seria interessante poder diferenciar estas duas, ja que elas sao diferentes das outras.Elas nao sao dados ou informacoes, elas servem para classificar as demais.E possivel transformar essas celulas normais em celulas especiais de cabecalho.Isso e feito colocando as celulas entre as tags: <th> e </th>No caso, queremos transformar a coluna da "Web" e da "Desktop" em um tipo de especial de celula, entao vamos substituir a tag <td> por <th>, nosso codigo fica:<table border="1"> <caption>Linguagens</caption> <thead> <tr><td>Tipos de linguagem</td></tr> </thead> <tfoot> <tr><td>by HTML Progressivo</td></tr> </tfoot> <tbody> <tr><th>Web</th> <th>Desktop</th></tr> <tr><td>HTML</td> <td>C </td> </tr> <tr><td>JavaScript</td> <td>C++</td> </tr> <tr><td>PHP</td> <td>Java</td> </tr> </tbody></table>Olhe como ficou a tabela, com as colunas destacadas (elas agora sao celulas cabecalho):Tabela 1.1Tipos de linguagemby HTML ProgressivoWebDesktopHTMLCJavaScriptC++PHPJavaE se quisessemos que a as primeiras celulas das linhas fossem headers, assim como as primeiras celulas das colunas foram?Basta substituir o <td> dessa celula em questao por <th>.Primeiro vamos colocar uma coluna a mais, na esquerda, que vai armazenar o nome todas as linguagens, e esses nomes serao headers daquela linha.Vamos usar celulas cabecalho tanto na primeira linha como na primeira coluna.Veja como ficou o codigo:<table border="1"> <caption>Tabela 1.1</caption> <thead> <tr><td>Tipos de linguagem</td></tr> </thead> <tfoot> <tr><td>by HTML Progressivo</td></tr> </tfoot> <tbody> <tr><td>Linguagem\Uso</td><th>Web</th> <th>Desktop</th></tr> <tr><th>HTML</th> <td>X</td> <td></td> </tr> <tr><th>JavaScript</th> <td>X</td> <td></td> </tr>