2024-AULA 08 - Tabelas

1º MÓDULO
PROGRAMAÇÃO WEB -I-
Professora:
Célia
TABELAS
• As tabelas são muito utilizadas para organizar

os layouts das páginas.
• Em uma tabela podemos inserir textos,

imagens, links e outros elementos, além de
podermos utilizar uma tabela dentro de outra.
Marcações Básicas
<table>...</table> Indica inicio e fim da tabela.
<tr>...</tr> Indica linha da tabela;
<td>...</td> Indica as células contidas na tabela.
<th>...</th> Indica os títulos da tabela e aparecem em

negrito.
<caption>...</caption> Insere a legenda da tabela, deve ser inserida

entre as tags <table> </table>.
Atributos
width Usado para alterar a largura da tabela e das células.

border Usado para definir as linhas de contorno da tabela (borda).
align Controla o alinhamento da tabela em relação à página.
valign Controla o alinhamento do conteúdo das células em relação à borda
superior e inferior, ou seja, trata-se de alinhamento vertical.
cellspacing Define a distância entre as células e linhas.
cellpadding Define a distância entre o conteúdo da célula em relação à sua borda.
collspan Define quantas colunas uma célula pode abranger, funciona como uma
mesclagem de celulas.
rowspan Define quantas linhas uma célula pode abranger, funciona como uma
mesclagem de celulas.
bgcolor Usado para aplicar cor de fundo a célula ou a tabela.
<table></table>
Marcação Primeira Tabela
<html>
<title></title>
<body>
<p> PRIMEIRA TABELA </p>
<table border =“1”>
<tr>
<td>Primeira Célula – 1ª Linha</td>
<td>Segunda Célula – 1ª Linha</td>
</tr>
<tr>
<td>Primeira Célula – 2ª Linha</td>
<td>Segunda Célula – 2ª Linha</td>
</tr>
</table>
</body>
</html>
Dependendo do navegador os valores não precisam estar entre “ “

Exemplo Primeira Tabela
Marcação Segunda Tabela
<html>
<title></title>
<body>
<p> SEGUNDA TABELA </p>
<table border>
<CAPTION>Modelo de Tabela Simples</caption>
<tr>
<td>Itens/Mês</td>
<th>Janeiro</th>
<th>Fevereiro</th>
<th>Março</th>
</tr>
<tr>
<th>Usuarios</th>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<th>Linhas</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
Resultado
Exemplo atributo width na tag <table>
<html>
<title></title>
<body>
<p> Atributo width</p>
<table border width=“50”>
<tr>
<td>Segunda</td>
<td>Terça</td>
<td>Quarta</td>
</tr>
<tr>
<td>Quinta</td>
<td>Sexta</td>
<td>Sábado</td>
</tr>
</table>
</body>
</html>

Resultado
Atributo width na tag<td>
<html>
<title></title>
<body>
<p> Atributo width na tag<td></p>
<table border>
<tr>
<td width=“50%”>Segunda</td>
<td>Terça</td>
<td>Quarta</td>
</tr>
<tr>
<td>Quinta</td>
<td>Sexta</td>
<td>Sábado</td>
</tr>
</table>
</body>
</html>

Resultado
Com Atributo border
<html>
<title>Tabelas</title>
<body>
<h1> Atributo com border</h1><br>
<table width=“300” border=“2”>
<tr>
<td >Segunda</td>
<td>Terça</td>
<td>Quarta</td>
</tr>
<tr>
<td>Quinta</td>
<td>Sexta</td>
<td>Sábado</td>
</tr>
</table>
</body>
</html>

Sem Atributo border
<html>
<body>
<h1> Atributo com border</h1><br>
<table width=“300”>
<tr>
<td >Segunda</td>
<td>Terça</td>
<td>Quarta</td>
</tr>
<tr>
<td>Quinta</td>
<td>Sexta</td>
<td>Sábado</td>
</tr>
</table>
</body>
</html>

Resultados
Com atributo border
Sem o atributo border

Atributo align – tag table
<html>
<body>
<h1> Atributo align tag table</h1><br>
<table width=300 border=“2” align=“center”>
<tr>
<td >1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>

Resultado
Atributo align – tag td e th
<html>
<body>
<h1> Atributo align - tag td e th</h1><br>
<tr>
<td align=center>1</td>
<td align=left>2</td>
<td align=right>3</td>
</tr>
<tr>
<th align=center>Alinhamento CENTER</th>
<th align=left>Alinhamento LEFT</th>
<th align=“rigth”>Alinhamento RIGHT</th>
</tr>
</table>
</body>
</html>

Resultado
Atributo Valign
<html>
<body>
<h1> Atributo Valign </h1><br>
<tr>
<td align=center valign=top height=50>1</td>
<td align=left valign=middle>2</td>
<td align=right valign=bottom>3</td>
</tr>
<tr>
<th align=center>Alinhamento TOP</th>
<th align=center>Alinhamento MIDDLE</th>
<th align=center>Alinhamento BOTTOM</th>
</tr>
</table>
</body>
</html>

Resultado
Atributo Cellspacing na tag table
<html>
<body>
<h1> Atributo Cellspacing </h1><br>
<table width=300 border=“2” align=“center” cellspacing=0>
<tr>
<td align=center height=30>1</td>
</tr>
</table>
</body>
</html>

Resultado
Resultado
Cellspacing=10
Atributo Cellpadding na tag table
<html>
<body>
<h1> Atributo Cellpadding </h1><br>
<table width=300 border=“2” align=“center” cellspacing=0
cellpadding=10>
<tr>
</tr>
</table>
</body>
</html>

Resultado
Atributo COLSPAN nas tags td
<html>
<body>
<h1> Atributo Colspan</h1><br>
<table width=300 border=2 align=center cellspacing=2 cellpadding=2>
<tr>
<td align=center colspan=2>1</td>
</tr>
<tr>
<td align=center >3</td>
</tr>
</table>
</body>
</html>

Resultado
Atributo Rowspan na tag td
<html>
<body>
<h1> Atributo Rowspan</h1><br>
<tr>
<td align=center rowspan=2>1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>

Resultado
Cores na tabela
<html>
<body>
<h1> CORES NA TABELA</h1><br>
<tr>
<td align=center bgcolor=“blue”>1</td>
</tr>
<tr>
<td align=center bgcolor=“yellow”>5</td>
</tr>
</table>
</body>
</html>
Pode-se usar nas tags table, th e th

Resultado
Imagem em tabela
<html>
<body>
<h1> IMAGEM NA TABELA</h1><br>
<tr>
<td align=center><img src="xicara.gif" width=80></td>
<td align=center> </td>
</tr>
<tr>
<td align=center><img src="borboleta.gif" width="80"></td>
</tr>
</table>
</body>
</html>

Resultado
EXERCÍCIOS
1. Crie uma tabela para seu horário de aula, salve como
horario.html
2. Crie uma tabela para o calendário do mês, salve como
calend.html
3. Crie um tabela de cores no mínimo 10 cores, salve
como tabcores.html
4. Crie uma tabela com 15 figuras, podendo ser selos,
cd, roupas, doces, emoji, etc; salve como figuras.html.
5. Link todas as tabelas no seu portfólio!

2024-AULA 08 - Tabelas

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

2024-AULA 08 - Tabelas

Enviado por

Direitos autorais:

Formatos disponíveis

1º MÓDULO

PROGRAMAÇÃO WEB -I-

• As tabelas são muito utilizadas para organizar

• Em uma tabela podemos inserir textos,

<table>...</table> Indica inicio e fim da tabela.

<tr>...</tr> Indica linha da tabela;

<td>...</td> Indica as células contidas na tabela.

<th>...</th> Indica os títulos da tabela e aparecem em

<caption>...</caption> Insere a legenda da tabela, deve ser inserida

width Usado para alterar a largura da tabela e das células.

Dependendo do navegador os valores não precisam estar entre “ “

Dependendo do navegador os valores não precisam estar entre “ “

Dependendo do navegador os valores não precisam estar entre “ “

Dependendo do navegador os valores não precisam estar entre “ “

Dependendo do navegador os valores não precisam estar entre “ “

Com atributo border

Sem o atributo border

Dependendo do navegador os valores não precisam estar entre “ “

Dependendo do navegador os valores não precisam estar entre “ “

Dependendo do navegador os valores não precisam estar entre “ “

Dependendo do navegador os valores não precisam estar entre “ “

Dependendo do navegador os valores não precisam estar entre “ “

Dependendo do navegador os valores não precisam estar entre “ “

Dependendo do navegador os valores não precisam estar entre “ “

Pode-se usar nas tags table, th e th

Dependendo do navegador os valores não precisam estar entre “ “

Você também pode gostar