Curso de HTML 4.01 e Introdução ao XHTML 1.0
195 pág.

Curso de HTML 4.01 e Introdução ao XHTML 1.0


DisciplinaHtml143 materiais1.079 seguidores
Pré-visualização41 páginas
</tr> 
</table> 
 
Aspecto da tabela quando visualizada no seu browser: 
 
 
 
Dicas 
 
Os elementos <thead>,<tbody> e <tfoot> ainda são pouco usados devido ao 
suporte deficiente oferecido pelos browsers antigos. Os browsers modernos já 
suportam bem estes elementos. 
 
10.5 Elementos relativos a tabelas 
 
Elemento Descrição 
<table> Define uma tabela 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 70 
<th> Define um cabeçalho para uma tabela 
<tr> Insere uma nova linha numa tabela 
<td> Insere uma célula numa tabela 
<caption> Define uma legenda para uma tabela 
<colgroup> Agrupa colunas numa tabela 
<col> Define os valores dos atributos para uma ou mais colunas da tabela 
<thead> Define um cabeçalho de uma tabela 
<tbody> Define um corpo numa tabela 
<tfoot> Define o rodapé de uma tabela 
 
 
Exemplos de Aplicação 
 
 
Colocar um cabeçalho numa tabela 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <h4>Cabeçalhos de tabela:</h4> 
 
 <table border=&quot;1&quot;> 
 <tbody> 
 <tr> 
 <th>Nome</th> 
 <th>Número de sócio do Belenenses</th> 
 <th>Artista Favorito</th> 
 </tr> 
 <tr> 
 <td>Zé das Couves</td> 
 <td>31</td> 
 <td>Zé Kabra</td> 
 </tr> 
 </tbody> 
 </table> 
 
 <h4>Cabeçalhos alinhados ao centro:</h4> 
 
 <table border=&quot;1&quot;> 
 <tbody> 
 <tr> 
 <th>Nome:</th> 
 <td>Zé das Couves</td> 
 </tr> 
 <tr> 
 <th>Número de sócio do Belenenses:</th> 
 <td>31</td> 
 </tr> 
 <tr> 
 <th>Artista Favorito:</th> 
 <td>Zé Kabra</td> 
 </tr> 
 </tbody> 
 </table> 
</body> 
</html> 
 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 71 
 
 
Problemas com as células vazias 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <table border=&quot;1&quot;> 
 <tbody> 
 <tr> 
 <td>Algum texto</td> 
 <td>Algum texto</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td>Algum texto</td> 
 </tr> 
 </tbody> 
 </table> 
 <p>Como você pode ver, uma das células não tem linhas de 
 fronteira desenhadas. Isso deve-se ao fato de a célula 
 estar vazia. Se inserir um espaço vai ver que ela 
 continuará vazia.</p> 
 <p>Para resolver o problema deve inserir um espaço 
 &quot;no-breaking space&quot; na célula que está vazia.</p> 
 <p>O espaço &quot;no-breaking space&quot; é uma entidade de 
 caractere do HTML e escreve-se na forma &quot;&amp;nbsp;&quot;.</p> 
</body> 
</html> 
 
 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 72 
Uma tabela com legenda 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <h4>Esta tabela tem uma legenda:</h4> 
 
 <table border=&quot;1&quot;> 
 <caption>A Minha Legenda</caption> 
 <tbody> 
 <tr> 
 <td>100</td> 
 <td>200</td> 
 <td>300</td> 
 </tr> 
 <tr> 
 <td>400</td> 
 <td>500</td> 
 <td>600</td> 
 </tr> 
 </tbody> 
 </table> 
</body> 
</html> 
 
 
 
Células que se estendem por mais do que do que uma linha ou coluna 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <h4>Uma célula que ocupa duas colunas:</h4> 
 
 <table border=&quot;1&quot;> 
 <tbody> 
 <tr> 
 <th>Nome</th> 
 <th colspan=&quot;2&quot;>Número de sócio do Belenenses</th> 
 </tr> 
 <tr> 
 <td>Zé das Couves</td> 
 <td>31</td> 
 <td>31</td> 
 </tr> 
 </tbody> 
 </table> 
 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 73 
 <h4>Uma célula que ocupa duas linhas:</h4> 
 
 <table border=&quot;1&quot;> 
 <tbody> 
 <tr> 
 <th>Nome:</th> 
 <td>Zé das Couves</td> 
 </tr> 
 <tr> 
 <th rowspan=&quot;2&quot;>Número de sócio do Belenenses:</th> 
 <td>31</td> 
 </tr> 
 <tr> 
 <td>31</td> 
 </tr> 
 </tbody> 
 </table> 
</body> 
</html> 
 
 
 
Utilização de elementos dentro de uma tabela 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <table border=&quot;1&quot;> 
 <tbody> 
 <tr> 
 <td> 
 <p>Isto é um parágrafo</p> 
 <p>Isto é outro parágrafo</p> 
 </td> 
 <td>Esta célula contém uma tabela: 
 <table border=&quot;1&quot;> 
 <tbody> 
 <tr> 
 <td>A</td> 
 <td>B</td> 
 </tr> 
 <tr> 
 <td>C</td> 
 <td>D</td> 
 </tr> 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 74 
 </tbody> 
 </table> 
 </td> 
 </tr> 
 <tr> 
 <td>Esta célula contém uma lista: 
 <ul> 
 <li>livros</li> 
 <li>revistas</li> 
 <li>jornais</li> 
 </ul> 
 </td> 
 <td>Esta contém apenas texto.</td> 
 </tr> 
 </tbody> 
 </table> 
</body> 
</html> 
 
 
 
Como alinhar o conteúdo dentro de uma célula 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <h3>Pontos acumulados</h3> 
 
 <table width=&quot;400&quot; border=&quot;1&quot;> 
 <tbody> 
 <tr> 
 <th align=&quot;left&quot;>Tipo de compra</th> 
 <th align=&quot;right&quot;>Dezembro</th> 
 <th align=&quot;center&quot;>Janeiro</th> 
 </tr> 
 <tr> 
 <td align=&quot;left&quot;>Gasolina</td> 
 <td align=&quot;right&quot;>28</td> 
 <td align=&quot;center&quot;>16</td> 
 </tr> 
 <tr> 
 <td align=&quot;left&quot;>Supermercado</td> 
 <td align=&quot;right&quot;>17</td> 
 <td align=&quot;center&quot;>21</td> 
 </tr> 
 <tr> 
 <td align=&quot;left&quot;>Doces</td> 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 75 
 <td align=&quot;right&quot;>5<br></td> 
 <td align=&quot;center&quot;>9<br> 
 </td> 
 </tr> 
 <tr> 
 <th align=&quot;left&quot;>Totais</th> 
 <th align=&quot;right&quot;>50</th> 
 <th align=&quot;center&quot;>46</th> 
 </tr> 
 </tbody> 
 </table> 
</body> 
</html> 
 
 
 
O atributo &quot;frame&quot; 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <p>Se não conseguir ver uma moldura desenhada ao redor da 
 tabela então o seu browser deve ser muito antigo ou tem uma 
 deficiência no suporte para HTML 4.01.</p> 
 
 <h4>Com frame=&quot;border&quot;:</h4> 
 
 <table frame=&quot;border&quot;> 
 <tbody> 
 <tr> 
 <td>Primeira</td> 
 <td>Linha</td> 
 </tr> 
 <tr> 
 <td>Segunda</td> 
 <td>Linha</td> 
 </tr> 
 </tbody> 
 </table> 
 
 <h4>Com frame=&quot;box&quot;:</h4> 
 
 <table frame=&quot;box&quot;> 
 <tbody>