HTML5 - Tabelas

Tabela Simples

Trompete Trombone
Trompa Tuba
<table>
<tr>
<td>Trompete</td>
<td>Trombone</td>
</tr>
<tr>
<td>Trompa</td>
<td>Tuba</td>
</tr>
</table>

Tabela com células de título

Agudo Grave
Trompete Trombone
<table>
<tr>
<th>Agudo</th>
<th>Grave</th>
</tr>
<tr>
<td>Trompete</td>
<td>Trombone</td>
</tr>
</table>

Cabeçalho, corpo e rodapé da tabela

Tabela de preços
Visite nossa loja
Seminovos Trompete Trombone Trompa
$500 $640 $650
<table>
<thead>
<tr><th colspan="4">Tabela de preços</th></tr>
</thead>
<tfoot>
<tr><td colspan="4">Visite nossa loja</td></tr>
</tfoot>
<tbody>
<tr>
<td rowspan="2"> Seminovos</td>
<td>Trompete</td>
<td>Trombone</td>
<td>Trompa</td>
</tr>
<tr>
<td>$500</td>
<td>$640</td>
<td>$650</td>
</tr>
</tbody>
</table>

Grupo de colunas 1

Agudo Médio Grave
Trompete Trompa Trombone
Bb Fa C
<table>
<colgroup span="3"></colgroup>
<tr>
<th>Agudo</th>
<th >Médio</th>
<th>Grave</th>
</tr>
<tr>
<td>Trompete</td>
<td>Trompa</td>
<td>Trombone </td>
</tr>
<tr>
<td>Bb</td>
<td>Fa</td>
<td>C</td>
</tr>
</table>

Grupo de colunas 2

Agudo Médio Grave
Trompete Trompa Trombone
<table>
<colgroup>
<col  class="coluna1"/>
<col class="coluna2"/>
<col class="coluna3"/>
</colgroup>
<tr>
<th>Agudo</th>
<th >Médio</th>
<th >Grave</th>
</tr>
<tr>
<td>Trompete</td>
<td>Trompa</td>
<td>Trombone</td>
</tr>
</table> 

Cabeçalho com sumário e título

O elemento summary, existente nas versões anteriores do HTML, ainda não tem seu lugar garantido dentro do HTML 5 e o mais provável é que ele seja considerado obsoleto na versão final da nova especificação: http://www.w3.org/TR/html5/tabular-data.html#attr-table-summary

Catálogo da Metal & Cia
Tabela de preços
Visite nossa loja
Seminovos Trompete Trombone Trompa
$500 $640 $650
<table summary="A nossa loja, Metal & Cia,  oferece uma grande variedade de instrumentos semi-novos em ótimo estado de conservação">
<caption>Catálogo da Metal & Cia</caption>
<thead>
<tr><th colspan="4">Tabela de preços</th></tr>
</thead>
<tfoot>
<tr><td colspan="4">Visite nossa loja</td></tr>
</tfoot>
<tbody>
<tr>
<td rowspan="2"> Seminovos</td>
<td>Trompete</td>
<td>Trombone</td>
<td>Trompa</td>
</tr>
<tr>
<td>$500</td>
<td>$640</td>
<td>$650</td>
</tr>
</tbody>
</table>

Estilo aplicado

<style>
table, td, th, tfoot {border:solid 1px #000; padding:5px;}
th {background-color:#999;}
caption {font-size:x-large;}
colgroup {background:#F60;}
.coluna1 {background:#F66;}
.coluna2  {background:#F33;}
.coluna3  {background:#F99;}
</style>