Desenvolvimento Web I - Tabela e Formulários

Prof.
Daniel Cosme Mendonça Maia

Bacharel em Sistemas de Informação (Unimontes)
Especialista em Tecnologias para Desenvolvimento Web (Unopar)
Mestre em Informática (UnB)
Desenvolvedor Web (HTML/CSS/PHP)
 As tabelas auxiliam na visualização de dados
ou na divisão da página em setores.
 As tabelas são referenciadas pelo elemento

table, e são dividas em linhas e células.
118
 Dentro do bloco “table”, os principais elementos que utilizaremos
serão o tr (table row) e o td (table data).
...
<table border=“1”> Célula / Coluna
<tr>
<td>Primeira</td>
Linha <td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>
...
119
 Dentro de um bloco “td” é possível colocar códigos em HTML e inclusive
criar outras tabelas dentro de células.
...
<table border=“1”>
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>
<table>
<tr>
<td>Quarta</td>
<td>Quinta</td>
</tr>
</table>
</td>
</tr>
</table>
...
120
 Podemos controlar o espaçamento entre células,
utilizando o atributo cellspacing.
...
<table cellspacing=“20” border=“1”>
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>
...
121
 Podemos também controlar o espaçamento entre o conteúdo da
célula e extremidade da célula, utilizando o atributo cellpadding.
...
<table cellpadding=“30” cellspacing=“20”
border=“1”>
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>
...
122
 O atributo bgcolor pode ser utilizado na tabela para o
preenchimento de células.
...
<table bgcolor="#ff0000" cellspacing="20"
cellpadding="30" border="1">
<tr bgcolor="#ffff00">
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td bgcolor="#ffffff">Terceira</td>
<td>Quarta</td>
</tr>
</table>
...
123
 Para definir a largura das células e tabela é possível utilizar o
atributo width, o mesmo utilizado na definição da largura de
imagens.
...
<table bgcolor="#ff0000" cellspacing="20"
cellpadding="30" border="1“ width=“50%”>
<tr bgcolor="#ffff00">
<td width=“400”>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td bgcolor="#ffffff">Terceira</td>
<td>Quarta</td>
</tr>
</table>
...
124
 Pode ser que queiramos fazer uma tabela que
tenha a primeira linha com 2 células, a
segunda linha com 1 célula e a terceira linha
com 3 células. Vejamos:
128
<html>
<head>
<title>Trabalhando com Tabelas</title>
 Pode ser que queiramos fazer uma tabela que
</head>
<body>
tenha a primeira linha com 2 células, a
<tr>
segunda linha com 1 célula e a terceira linha
<td>Primeira</td>
com 3 células. Vejamos:
<td>Segunda</td>
</tr>
<tr> <td>Terceira</td> </tr>
<tr>
<td>Quarta</td>
<td>Quinta</td>
<td>Sexta</td>
</tr>
</table>
</body>
</html>
129
 Podemos perceber que a tabela ficou com
alguns “buracos”, que podem ser corrigidos
através do atributo colspan.
130
<html>
<head>
 Podemos perceber que a tabela ficou com
</head>
<body>
alguns “buracos”, que podem ser corrigidos
<tr>
através do atributo colspan.
<td>Primeira</td>
<td colspan=“2”>Segunda</td>
</tr>
<tr> <td colspan=“3”>Terceira</td> </tr>
<tr>
<td>Quarta</td>
<td>Quinta</td>
<td>Sexta</td>
</tr>
</table>
</body>
</html>
131
 Da mesma forma, se quisermos uma coluna com
apenas uma célula e outra com duas, o que
faremos?
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
</tr>
</table>
132
 Da mesma forma, se quisermos uma coluna
com apenas uma célula e outra com duas, o
que faremos?
 Neste caso podemos utilizar o atributo

rowspan.
133
<html>
<head>
 Da mesma forma, se quisermos uma coluna
</head>
com apenas uma célula e outra com duas, o
<body>
que faremos?
<tr>
<td rowspan=“2”>Primeira</td>
<td>Segunda</td>
 Neste caso podemos utilizar o atributo
</tr>
rowspan.
<tr>
<td>Terceira</td>
</tr>
</table>
</body>
</html>
134
 As tags <thead>, <tbody> e <tfoot> são
utilizadas para informarmos ao navegador
onde estão localizados o cabeçalho, corpo e
rodapé da tabela.
135
<html>
<head>
</head>
<body>
<thead>
<tr>
<th>Mês</th>
<th>Faturamento (R$)</th>
</tr>
</thead>
...
136
...
<tfoot>
<tr>
<td>Soma (R$)</td>
<td>7.702,94</td>
</tr>
</tfoot>
...
137
...
<tbody>
<tr>
<td>Janeiro</td>
<td>1.302,89</td>
</tr>
<tr>
<td>Fevereiro</td>
<td>3.534,72</td>
</tr>
<tr>
<td>Março</td>
<td>2.865,33</td>
</tr>
</tbody>
... 138
...
</table>
</body>
</html>
139
<html>
<head>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Mês</th>
<th>Faturamento (R$)</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Soma (R$)</td>
<td>7.702,94</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Janeiro</td>
<td>1.302,89</td>
</tr>
<tr>
<td>Fevereiro</td>
<td>3.534,72</td>
</tr>
<tr>
<td>Março</td>
<td>2.865,33</td>
</tr>
</tbody>
</table>
</body>
</html>
140
 Os formulários são muito importantes no
ambiente web; é através deles que podemos
recolher dados introduzidos pelos visitantes;
144
 Um formulário pode conter vários campos de
diferentes tipos.
 Podemos utilizar campos que permitem

inserir dados numéricos, textos pequenos,
textos longos, selecionar elementos de uma
lista, selecionar opções exclusivas, selecionar
caixas de opções (não-exclusivas).
145
 Os formulários são criados através do
elemento form. Dentro desse elemento
colocamos diversos elementos para inserção
de dados.
O elemento form por si só não faz
com que o navegador desenhe nada
<form> na página. Ele contém elementos que
... recolhem os dados e possui atributos
que “dizem” ao navegador como e
</form> para onde devem ser enviados os
dados inseridos pelo visitante.
146
 Os principais atributos da tag <form> são:
Atributo Valores Possíveis Descrição do Atributo
name (caracteres alfanuméricos) Define o nome do formulário.
enctype application/x-www-form-urlencoded Define como os dados do formulário
multipart/form-data serão codificados.
text/plain
method get Define o método de transferência dos
post dados do formulário. (Get → Envia os
dados como parte do URL) / (Post →
Envia os dados de forma reservada.)
action URL Define quem/qual página receberá os
dados transmitidos pelo formulário.
147
 A tag <input> (entrada) é o elemento
utilizado com mais frequência em
formulários;
 Este elemento pode assumir diversas formas

com finalidades diferentes;
 Definimos o tipo da entrada através do

atributo type.
148
 Para utilizarmos campos de texto em
formulários definimos o tipo como “text”.
<form method=“get”>
Primeiro Nome: <input type=“text”
name=“primeiro_nome” />
Segundo Nome: <input type=“text”
name=“segundo_nome” />
</form>
149
 Para utilizarmos botões de envio em
formulários definimos o tipo como “submit”.
<input type=“submit” value=“Enviar”/>
</form>
150
 Para utilizarmos botões de reset (limpar
formulário) definimos o tipo como “reset”.
<input type=“submit” value=“Enviar”/>
<input type=“reset” value=“Limpar”/>
</form>
151
Nosso formulário deverá ter uma estrutura semelhante ao formulário acima.
Perceba que a barra de endereços do navegador exibe um URL maior.

Esse URL contém parâmetros (campos do formulário) e os valores de
cada parâmetro.
Parâmetros / Valores
primeiro_nome = Maria
segundo_nome = Silva
152
 Os campos de texto possuem uma variação
importante, no qual é possível utilizar campos de
senha. Para isso utiliza-se o tipo “password”.
Login: <input type=“text”
name=“usuario” />
Senha: <input type=“password”
name=“senha” />
<input type=“submit” value=“Entrar”/>
</form>
153

Desenvolvimento Web I - Tabela e Formulários

Enviado por

Dados do documento

Descrição original:

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

Desenvolvimento Web I - Tabela e Formulários

Enviado por

Direitos autorais:

Formatos disponíveis

Prof.

Daniel Cosme Mendonça Maia

 As tabelas são referenciadas pelo elemento

 Neste caso podemos utilizar o atributo

 Podemos utilizar campos que permitem

 Este elemento pode assumir diversas formas

 Definimos o tipo da entrada através do

Perceba que a barra de endereços do navegador exibe um URL maior.

Você também pode gostar