Atributos da tag TD e TH

width e height

Apesar desses atributos serem largamente utilizados, eles são marcados como antiquados (deprecated) pela W3C.

O atributo width determina a largura de uma célula e o atributo height determina a altura. Os seus valores podem ser porcentagens ou números inteiros que equivalem ao tamanho em pixels.

nowrap

Nowrap, também antiquado (deprecated), é um indicador booleano diz ao browser para desativar a quebra automática de texto da célula. O uso desse atributo pode trazer consequencias ao layout da tabela, pois o texto contido na célula irá expandir toda a coluna.

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0">
  <TR>
    <TD WIDTH="200" HEIGHT="30" NOWRAP="NOWRAP">célula</TD>
  </TR>
</TABLE>

O que se torna:

célula

bgcolor

Bgcolor determina a cor de fundo de uma célula. Cada célula pode possuir uma cor de fundo diferente.

As cores são determinadas por valores definidos ou por hexadecimais. Mais detalhes sobre cores veja cores na web.

rowspan e colspan

Rowspan e colspan servem para expandir as células fazendo com que uma única célula ocupe mais de uma linha ou mais de uma coluna.

Estes atributos recebem um número inteiro que equivalem ao número de linha a mesclar (no caso de rowspan) ou o número de colunas a mesclar (no caso de colspan). Veja:

<TABLE CELLSPACING="0" CELLPADDING="2" BORDER="1">
  <TR>
    <TD COLSPAN="2">Célula 1</TD>
  </TR>
  <TR>
    <TD>Célula 2</TD>
    <TD>Célula 3</TD>
  </TR>
<TABLE>

Célula com expansão de coluna - TD com atributo COLSPAN

<TABLE CELLSPACING="0" CELLPADDING="2" BORDER="1">
  <TR>
    <TD ROWSPAN="2">Célula 1</TD>
    <TD>Célula 2</TD>
  </TR>
  <TR>
    <TD>Célula 3</TD>
  </TR>
</TABLE>

Célula com expansão de linha - TD com ROWSPAN

<TABLE CELLSPACING="0" CELLPADDING="2" BORDER="1">
  <TR>
    <TD COLSPAN="3" ROWSPAN="3">Célula 1</TD>
    <TD>Célula 2</TD>
  </TR>
  <TR>
    <TD>Célula 3</TD>
  </TR>
  <TR>
    <TD>Célula 4</TD>
  </TR>
  <TR>
    <TD>Célula 5</TD>
    <TD>Célula 6</TD>
    <TD>Célula 7</TD>
    <TD>Célula 8</TD>
  </TR>
</TABLE>

Célula com expansão de linha e de coluna - TD com ambos os atributos ROWSPAN e COLSPAN

Abaixo está um exemplo de uma tabela usando todos atributos vistos até o momento:

<TABLE CELLSPACING="0" CELLPADDING="4" BORDER="1">
  <TR>
    <TH COLSPAN="3" NOWRAP="NOWRAP" BGCOLOR="#FFFF99">Tabela de Contas e Saldos</TH>
  </TR>
  <TR>
    <TD BGCOLOR="#FFCCFF">Tipo de Despesa</TD>
    <TD BGCOLOR="#FFCCFF">Descri&ccedil;&atilde;o</TD>
    <TD BGCOLOR="#FFCCFF">Valor</TD>
  </TR>
  <TR>
    <TD ROWSPAN="5" BGCOLOR="#CCFFFF">Dom&eacute;stica</TD>
    <TD>Compras do M&ecirc;s</TD>
    <TD>$ 280,00</TD>
  </TR>
  <TR>
    <TD>Aluguel</TD>
    <TD>$ 450,00</TD>
  </TR>
  <TR>
    <TD>Luz</TD>
    <TD>$ 120,00</TD>
  </TR>
  <TR>
    <TD>&agrave;gua</TD>
    <TD>$ 111,00</TD>
  </TR>
  <TR>
    <TD>Telefone</TD>
    <TD>$ 90,00</TD>
  </TR>
  <TR>
    <TD ROWSPAN="2" BGCOLOR="#CCFFFF">Externa</TD>
    <TD>Gasolina</TD>
    <TD>$ 450,00</TD>
  </TR>
  <TR>
    <TD>Almo&ccedil;o</TD>
    <TD>$ 200,00</TD>
  </TR>
  <TR>
    <TD COLSPAN="2" ALIGN="right">Subtotal</TD>
    <TD BGCOLOR="#FFFF00">$ 1.701,00</TD>
  </TR>
</TABLE>

Tabela usando células das tags TD e TH contendo atributos bgcolor, nowrap, colspan e rowspan