Programação
 › Algoritmo  › C/C++  › Java
Web
 › HTML/XHTML  › JavaScript  › PHP
Sistema Operacional
 › Comandos de DOS  › Windows  › Linux  › Mac/BSD
Office
 › Word / Writer  › Excel / Calc
Áreas do Site
 › Download  › Fórum  › Blog
Recomendamos
Computadores e Informática em Lisboa
TI Expert » Programação » Web » HTML/XHTML » Atributos da tag TD e TH - width, height, bgcolor, colspan, rowspan, nowrap

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

Creative Commons License
Autor: Denys William Xavier
Este artigo está sob Licença Creative Commons
Fonte: W3C.org.

Faça o download da versão em PDF Indique nosso site Gostou?
Indique nosso site!
Este artigo foi
lido 66992 vezes
Bookmark e Compartilhe

Páginas Relacionadas

Enquete
O Google Chrome OS irá desbancar o Microsoft Windows 7?
» ProgramaçãoAlgorítmo | C/C++ | Java

» WebHTML/XHTML | JavaScript | PHP

» Sistema OperacionalComandos de DOS | Windows | Linux | Mac/BSD

» OfficeWord/Wirter | Excel/Calc

» Áreas do SiteDownloads | Fórum | Blog