Como usar atributos colspan e rowspan para expandir o tamanho de células através de linhas e colunas

No tutorial passado de nosso curso de HTML, ensinamos como criar e definir o corpo, cabeçalho e rodapé de uma tabela, o que deixou nossas tabelas bem organizadas e definidas.

Agora, vamos aprender como organizar ainda mais nossas células, fazendo nossas células de linha e coluna terem tamanho e espaçamento diferente.

• Estude offline: Apostila HTML + CSS

Os atributos colspan e rowspan - Expandindo células

Até o momento, nossas tabelas estão bem uniformes: linha abaixo de linha, coluna abaixo de coluna, uma célula ao lado da outra, em cima/abaixo de outra etc.

Ou seja, está no padrão normal de uma tabela em HTML.

Porém, nem sempre é assim.

Como dissemos em nosso artigo introdutório sobre o que são e para que servem tabelas HTML, podemos usá-las para definir até mesmo o layout de um site.

E se você notar bem, há sites que o layout não tem esse padrão simples, de células após célula, todas de mesmo tamanho e uniforme.

Vamos aprender agora como definir o tamanho de células, para ocuparem o tamanho de várias linhas ou colunas, deixando nossas tabelas mais organizadas e interessantes aos visitantes de nosso site.

colspan em HTML

Há tabelas que uma linha (geralmente o cabeçalho e o rodapé) ocupam o espaço de todas as colunas.

E podemos definir isso, o tanto de colunas que uma célula vai ocupar, através do atributo colspan  da tag <td>.

O "col" vem de column (coluna) e span quer dizer expandir, abranger.
(É importante saber a tradução dos códigos HTML, pois eles sempre são óbvios, como no exemplo acima, assim evita ter que decorar, basta saber inglês e já saberá o que cada comando representa).

Ou seja, <colspan> é para expandirmos células para que fiquem do tamanho de quantas colunas quisermos. Vamos a um exemplo prático.

No tutorial passado, criamos a seguinte tabela:

Linguagens de programação

Tipos de linguagem
by HTML Progressivo
Linguagem\Uso	Web	Desktop
HTML	X
JavaScript	X
C		X
C++		X
PHP	X
Java		X

Note as células de cabeçalho e rodapé, onde tem escrito "Tipos de linguagem" e "by HTML Progressivo".
Estas células estão sozinhas em suas linhas (linha de cabeçalho, <thead> e <tfoot>). Como tem somente uma célula ali, ela fica alinhada na primeira coluna.

Ficaria MUITO MAIS interessante, bonito, organizado e profissional se estas células ocupassem o espaço das três colunas da tabela!
Para fazermos uma célula ocupar o espaço de três colunas, inserimos na tag da célula em questão o atributo: colspan="3"

Assim, para organizar mais essa tabela, substituímos:

<thead>
    <tr><td>Tipos de linguagem</td></tr>
</thead>

<tfoot>
    <tr><td>by HTML Progressivo</td></tr>
</tfoot>

Por:

<thead>
    <tr><td colspan="3">Tipos de linguagem</td></tr>
</thead>

<tfoot>
    <tr><td colspan="3">by HTML Progressivo</td></tr>
</tfoot>

E veremos como resultado a seguinte tabela:

Linguagens de programação

Tipos de linguagem
by HTML Progressivo
Linguagem\Uso	Web	Desktop
HTML	X
JavaScript	X
C		X
C++		X
PHP	X
Java		X

Ocorreu o que queríamos! As células do cabeçalho e do rodapé de nossa tabela ocupam uma linha e o espaço três colunas!
Bem mais organizado e bonita nossa tabela, não?

E sabe o que ficaria ainda melhor? Se os textos dentro dessas células ficassem no centro da tabela.
Ora, quando estudamos textos em HTML, usávamos o atributo align para alinhar textos em nossos sites.

Vamos usar o atributo align="center" dentro destas mesmas células, junto do atributo colspan, e nossa tabela ficará:

Linguagens de programação

Tipos de linguagem
by HTML Progressivo
Linguagem\Uso	Web	Desktop
HTML	X
JavaScript	X
C		X
C++		X
PHP	X
Java		X

rowspan em HTML

Uma outra maneira de representar essa mesma tabela é usando apenas duas colunas.

Na primeira coluna vamos colocar "Linguagens para Web" e "Linguagens para Desktop", e na segunda coluna vamos colocar as linguagens.

Como temos 3 exemplos para Web e 3 para Desktop, teremos 6 linhas no corpo da tabela, que ficaria mais ou menos assim:

Linguagens de programação

Tipos de linguagem
by HTML Progressivo
Linguagens para Web	HTML
	JavaScript
	PHP
Linguagens para Desktop	C
	C++
	Java

Ok, dá pra entender o propósito da tabela, e sabemos criar ela, só usar o código:

<table border="1">
   <caption>Linguagens de programação</caption>
   <thead>
      <tr><td colspan="2" align="center"><b>Tipos de linguagem</b></td></tr>
   </thead>

   <tfoot>
      <tr><td colspan="2" align="center"><i>by HTML Progressivo</i></td></tr>
   </tfoot>

   <tbody>
      <tr>
 <td>Linguagens<br>para Web</td> <td>HTML</td>
      </tr>

      <tr><td></td><td>JavaScript</td></tr>
      <tr><td></td><td>PHP</td></tr>


      <tr>
 <td>Linguagens<br>para Desktop</td> <td>C</td>
      </tr>

      <tr><td></td><td>C++</td></tr>
      <tr><td></td><td>Java</td></tr>
   </tbody>

</table>

Porém, ficaria mais interessante se essas células abaixo de "Linguagens para Web" e as abaixo da "Linguagens para Desktop" que estão vazias, deixassem de existir.

Para isso, basta tirarmos as células vazias, representadas por: <td> </td>
E fazer com que a primeira célula tenha o tamanho de 3 LINHAS!

Ora, se para ocupar o tamanho de 3 COLUNAS, fazemos: colspan="3"
Para uma célula ocupar 3 LINHAS, fazemos: rowspan="3"

Ou seja, vamos usar o atributo rowspan para fazer uma célula ocupar o tamanho de várias linhas.
Lembre-se, row quer dizer linhas e span expandir, abranger.

O código de nossa tabela fica:

<table border="1">
   <caption>Linguagens de programação</caption>
   <thead>
      <tr><td colspan="3" align="center"><b>Tipos de linguagem</b></td></tr>
   </thead>

   <tfoot>
      <tr><td colspan="3" align="center"><i>by HTML Progressivo</i></td></tr>
   </tfoot>

   <tbody>
      <tr>
 <td rowspan="3">Linguagens<br>para Web</td> <td>HTML</td>
      </tr>

      <tr><td>JavaScript</td></tr>
      <tr><td>PHP</td></tr>


      <tr>
 <td rowspan="3">Linguagens<br>para Desktop</td> <td>C</td>
      </tr>

      <tr><td>C++</td></tr>
      <tr><td>Java</td></tr>
   </tbody>

</table>

E o resultado, é a bela tabela abaixo:

Linguagens de programação

Tipos de linguagem
by HTML Progressivo
Linguagens para Web	HTML
	JavaScript
	PHP
Linguagens para Desktop	C
	C++
	Java

Interessante, não?
Mas note que agora temos somente duas colunas, então ajustamos o atributo colspan, que no exemplo passado era igual a 3, e agora é 2.