Primeiramente, gostaria de mostrar como as células dentro de uma linha podem ser unidas em colunas. Isso permite que uma coluna abranja várias colunas na linha em questão.
Um exemplo:
<tabela border="1">
<tr>
<th colspan="2">Datas</th>
</tr>
<tr>
<td>11.4.2014</td>
<td>12.4.2012</td>
</tr>
<tr>
<td>13.4.2014</td>
<td>14.4.2014</td>
</tr>
<tr>
<td>15.4.2014</td>
<td>16.4.2014</td>
</tr>
</tabela>Antes de tudo, uma palavra sobre o elemento th utilizado aqui. Através desse elemento, se marcam as células do cabeçalho. Os navegadores normalmente exibem essas células em negrito e centralizadas. E aqui está o resultado no navegador:
Dentro do th introdutório, o atributo colspan é definido. Como valor, espera-se o número de colunas que a célula atual deve ocupar. Preste atenção para garantir que o número de colunas especificado está correto, caso contrário os resultados podem não ficar como desejado. No exemplo apresentado, a linha do cabeçalho marcada por th deve ocupar duas colunas. Dentro das outras duas linhas novamente são incluídas duas colunas cada.
Uma observação relacionada à união de linhas. Durante a fase de desenvolvimento, atribua uma borda (border) às tabelas. Assim, você sempre verá imediatamente se a união está funcionando como desejado.
Unir células em uma coluna linha por linha
Através do atributo rowspan, múltiplas células em uma coluna podem ser unidas umas às outras. A célula em questão então se estende por várias linhas dentro da coluna. Novamente, um exemplo:
<tabela border="1">
<tr>
<th rowspan="2">Cor</th>
<td>Azul</td>
</tr>
<tr>
<td>Verde</td>
</tr>
<tr>
<th rowspan="2">Tamanho</th>
<td>1,70</td>
</tr>
<tr>
<td>1,80</td>
</tr>
</tabela>No navegador, isso é exibido da seguinte maneira:
Para o atributo rowspan, um valor numérico é atribuído. Esse valor determina, em última análise, a quantidade de linhas dentro de uma coluna sobre as quais uma célula deve se estender. Novamente, a quantidade de linhas especificadas deve ser precisa.
Unir células simultaneamente em colunas e linhas
Os dois atributos rowspan e colspan podem ser combinados entre si. Assim, células podem ser definidas que se estendem simultaneamente por várias linhas e colunas. Novamente, a melhor maneira de mostrar é através de um exemplo.
<tabela border="1">
<tr>
<th colspan="2" rowspan="2">Apartamento</th>
<td>5 cômodos</td>
</tr>
<tr>
<td>154 m²</td>
</tr>
<tr>
<td>Charlottenburg</td>
<td>Vaga de estacionamento</td>
<td>Piso aquecido</td>
</tr>
</tabela>
Uma olhada no navegador resulta em:
Ao combinar esses dois atributos, é necessário ter atenção para garantir que o número de células seja preciso no final.
Rotule as tabelas
Uma maneira muito interessante de tornar as tabelas mais compreensíveis é através do elemento caption. Pois assim é possível adicionar um título ou uma legenda a uma tabela. O conteúdo de caption é exibido fora da tabela, embora a definição seja feita dentro da tabela.
Aqui está uma aplicação típica do caption:
Um subtítulo da tabela é exibido acima da tabela. Por padrão, o subtítulo é centralizado acima da tabela. Isso também pode ser personalizado de forma individual através de CSS.
O elemento caption é definido diretamente após a abertura do <tabela>.
Aqui está a sintaxe completa do exemplo mostrado anteriormente:
<tabela border="1">
<caption>Dados de Mídia</caption>
<colgroup><col /><col /><col /><colgroup>
<thead>
<tr>
<th>Tópico</th>
<th>Visualizações</th>
<th>Tendência</th>
</tr>
<thead>
<tfoot>
<tr>
<td colspan="3">Atualizado em junho de 2014</td>
</tr>
<tfoot>
<tbody>
<tr>
<td>HTML5</td>
<td>12.245</td>
<td>+</td>
</tr>
<tr>
<td>CSS3</td>
<td>12123</td>
<td>+</td>
</tr>
<tr>
<td>JavaScript</td>
<td>11.546</td>
<td>+</td>
</tr>
</tbody>
</tabela>Estilizando tabelas
Para a estilização de tabelas, existiam em versões anteriores do HTML vários atributos. Aqui estão alguns exemplos de coisas que podiam ser definidas usando atributos. (Naturalmente, os navegadores ainda suportam esses atributos hoje em dia. No entanto, em HTML5, eles não devem mais ser utilizados).
• Moldura externa
• Moldura interna das tabelas
• Largura e altura
• Linhas da grade
• Alinhamento do conteúdo das células
• Cores
• Imagens de fundo
Você já pode ver que de fato é possível controlar tudo por meio dos respectivos atributos HTML. O exemplo a seguir mostra uma tabela na qual essas possibilidades foram amplamente utilizadas:
<table border="1">
<tr>
<td width="200" height="100" bgcolor="#999933">Um</td>
<td width="200" bgcolor="#00ffff">Dois</td>
<td width="200">Três</td>
</tr>
<tr bgcolor="#ff00ff">
<td height="100">Quatro<</td>
<td bgcolor="#996666">Cinco</td>
<td bgcolor="#003333">Seis</td>
</tr>
</table>
A visualização do resultado proporciona o resultado desejado.
No entanto, mesmo que pareça da maneira como deveria ser, a sintaxe subjacente não é de maneira nenhuma eficaz. É melhor controlar as propriedades da tabela usando CSS. Graças às novas propriedades CSS, não só é possível substituir os antigos atributos por uma sintaxe moderna, mas também é possível implementar funcionalidades adicionais. Por exemplo, agora é muito fácil colorir alternadamente as linhas das tabelas.
Nos tempos antigos de HTML e CSS, era necessário fazer malabarismos com o código para obter um resultado como este. Agora, ao optar consistentemente pelas possibilidades oferecidas pelo CSS, algo assim pode ser facilmente implementado.
tr:nth-child(even) {
background-color: #fd9d5d;
}
tr:nth-child(odd) {
background-color: #c0f390;
}
table {
border-spacing: 0px;
}
Como descrito várias vezes, abordarei o CSS detalhadamente ao longo desta série.
