Tutorial Intermediário de HTML: Tabelas II

10 03 2008

Tabela HTML com cabeçalhos e células mescladas

Tabelas podem ter parecido complicadas o suficiente no Tutorial Iniciante de HTML. Pode ser bem difícil visualizar uma grade de bidimensional a partir de linhas de código unidimensionais.

Bem, isso fica ainda pior. Tudo graças aos atributos rowspan e colspan, usados pra mesclar células. Esses bastardos.

O código seguinte é similar àquele na página sobre tabelas no Tutorial Iniciante de HTML.

<table border="1">
	<tr>
		<th>Coluna 1 Cabeçalho</th>
		<th>Coluna 2 Cabeçalho</th>
		<th>Coluna 3 Cabeçalho</th>
	</tr>
	<tr>
		<td>Linha 2, Célula 1</td>
		<td colspan="2">Linha 2, célula 2, também ocupando o espaço da Linha 2, célula 3</td>
	</tr>
	<tr>
		<td rowspan="2">Linha 3, célula 1, também ocupando o espaço da Linha 4, célula 1</td>
		<td>Linha 3, célula 2</td>
		<td>Linha 3, célula 3</td>
	</tr>
	<tr>
		<td>Linha 4, célula 2</td>
		<td>Linha 4, célula 3</td>
	</tr>
</table>

Primeiro, nós substituímos as tags td da primeira linha por tags th. Enquanto td é uma célula padrão de dados, th é uma célula de cabeçalho. Como as tags td, tags th precisam vir dentro de tags tr.

Nós também usamos os atributos colspan e rowspan em algumas das tags td. Se você olhar pra esse código num navegador, você vai ver que na segunda linha existem agora duas células ao invés de três, com a segunda célula ocupando o espaço da segunda e da terceira colunas.

O atributo colspan, que quer dizer “column span” (colunas mescladas), vai fazer com que uma célula ocupe o espaço do número de células que for especificado. Isso significa, nesse exemplo, que não há necessidade de uma terceira tag td na segunda linha – duas células foram mescladas numa só.

O atributo rowspan (linhas mescladas) é similiar ao colspan, exceto por ele se expandir por linhas ao invés de colunas. Novamente, as células que são “ocupadas” devem ser retiradas. Nesse exemplo, como a célula se expande sobre a quarta linha, só existem nela duas células.

Páginas Relacionadas

Exemplos
Referência
BlogBlogs Tags: , ,

Esse material é uma adaptação do HTML Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios