td width height colspan rowspan

Prévia do material em texto

www.tiexpert.net Pág. 1 de 3 
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 http://www.tiexpert.net/programacao/web/html/cores-na-web.php.
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>
http://www.tiexpert.net/programacao/web/html/td-width-height-colspan-rowspan.php
www.tiexpert.net Pág. 2 de 3 
<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>
<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>
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>
http://www.tiexpert.net/programacao/web/html/td-width-height-colspan-rowspan.php
www.tiexpert.net Pág. 3 de 3 
 <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>
Autor: Denys William Xavier
Fonte:http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#h-11.2.6
Este artigo está sob Licença Creative Commons
Para ver uma cópia desta licença, visite http://creativecommons.org/licenses/by-nc-sa/2.5/br/
ou envie uma carta para Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.
http://www.tiexpert.net/programacao/web/html/td-width-height-colspan-rowspan.php