05 html tabelas

PáginasWeb com: HTML, CSS e JavaScript
Profª. Marlene da Silva Maximiano de Oliveira
& Profª. Alessandra Aparecida da Silva

Tabelas
As tabelas são definidas com a tag <table>.
Uma tabela é dividida em linhas (com a tag <tr>), e cada linha é dividida em
células de dados (com a tag <td>).
As letras tr significam “table row”, que é a linha da tabela.
As letras td significam "table data“, que é o conteúdo de uma célula de dados.
Uma célula de dados pode conter texto, imagens, listas, parágrafos,
formulários, filetes horizontas, tabelas, etc.

Exemplo1
Como aparece no navegador:<table border="1">
<tr>
<td>linha 1, célula 1</td>
</tr>
<tr>
</tr>
</table>

AsTabelas e o Atributo Border (Borda)
• Se você não especificar um atributo border a tabela será exibida sem
qualquer borda. Às vezes isto pode ser útil, mas geralmente, você irá querer
que as bordas sejam mostradas.
• Para exibir uma tabela com bordas, você usará o atributo border:
<table border="1">
<tr>
</tr>
</table>

Cabeçalhos em umaTabela
• Os cabeçalhos em uma tabela são definidos com a tag <th>.
<table border="1">
<tr>
<th>Cabeçalho</th>
<th>Outro Cabeçalho</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

CélulasVazias em umaTabela
• Células sem conteúdo não são bem exibidas em muitos navegadores.
<table border="1">
<tr>
</tr>
<tr>
<td>linha 2, célulal 1</td>
<td></td>
</tr>
</table>

Sem bordas <html>
<body>
<h4>E esta tabela não tem bordas:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<h4>Esta tabela não tem bordas:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>

Mesclando linhas e/ou colunas
<html>
<body>
<h4>Células que abrangem duas colunas:</h4>
<table border="1">
<tr>
<th>Nome</th>
<th colspan="2">Telefone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Células que abrangem duas linhas:</h4>
<table border="1">
<tr>
<th>Primeiro Nome:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telefone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>

Tags dentro da tabela
</td>
<td>Alô</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<table border="1">
<tr>
<td>
<p>Este é um parágrafo</p>
<p>Este é outro parágrafo</p>
</td>
<td>Esta célula contém uma tabela:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Esta célula contém uma lista:
<ul>
<li>maçãs</li>
<li>bananas</li>
<li>abacaxis</li>
</ul>
</td>

Exemplos
<h4>Sem enchimento de célula (cellpadding): </h4>
<table border="1">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com enchimento de célula (cellpadding):</h4>
<table border="1" cellpadding="10">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
Sem enchimento de célula Com enchimento de célula

Exemplos
<h4>Sem espaçamento de célula (cellspacing):</h4>
<table border="1">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com espaçamento de célula (cellspacing):</h4>
<table border="1" cellspacing="10">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
Sem espaçamento de célula Com espaçamento de célula

Tabela com imagem ou cor de fundo

Tabela com imagem ou cor de fundo
<table border="1“ bgcolor="red">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Uma imagem de fundo:</h4>
<table border="1" background="pordosol.jpg">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>

Cor de fundo ou imagem na célula
<table border="1">
<tr>
<td bgcolor="red">Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td background="pordosol.jpg">
Segunda</td>
<td>Linha</td>
</tr>
</table>

Alinhamento de conteúdo na tabela

Alinhamento de conteúdo na tabela
<table width="320" border="1">
<tr>
<th align="left">Gastos com ...</th>
<th align="right">Janeiro</th>
<th align="right">Fevereiro</th>
</tr>
<tr>
<td align="left">Roupas</td>
<td align="right">R$ 241,10</td>
</tr>
<tr>
<td align="left">Maquiagem</td>
</tr>
<tr>
<td align="left">Alimentação</td>
</tr>
<tr>
<th align="left">Soma</th>
<th align="right">R$ 1.001,50</th>
<th align="right">R$ 744,65</th>
</tr>
</table>

Exemplo
<h4>Com moldura="border":</h4>
<table frame="border">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com moldura="box":</h4>
<table frame="box">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>

Exemplo
<h4>Com moldura="void":</h4>
<table frame="void">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com moldura="above":</h4>
<table frame="above">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>

Exemplo
<h4>Com moldura="below":</h4>
<table frame="below">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com moldura="hsides":</h4>
<table frame="hsides">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>

Exemplo
<h4>Com moldura="vsides":</h4>
<table frame="vsides">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com moldura="lhs":</h4>
<table frame="lhs">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>

Exemplo
<h4>Com moldura="rhs":</h4>
<table frame="rhs">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>

05 html tabelas

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a 05 html tabelas

Semelhante a 05 html tabelas (12)

Mais de Centro Paula Souza

Mais de Centro Paula Souza (20)

Último

Último (20)

05 html tabelas