╨╧рб▒с > ■ Ф О ■ Ц Х ■
рЕЯЄ∙OhлС +'│┘0 ╕ Р Ш ш Ї ( @ L
h t А
М Ш а и ░ ф E A primeira tag da pсgina щ sempre e fecha o documento > pr Jurema Sampaio d ure Normal S Jurema Sampaio d 4 re Microsoft Word 8.0 с@ МЖG @ ч╪┐щ╛@ fС∙·╛@ ╘ЕTK└ K y y ■
╒═╒Ь.УЧ +,∙оD ╒═╒Ь.УЧ +,∙оt 0 h p А И Р Ш а и ░ ╕
└ ф casa w 4
│
E A primeira tag da pсgina щ sempre e fecha o documento Tэtulo Р ( R Z ▓
_PID_GUID _PID_HLINKS ф A N { 2 0 3 1 D 5 A 4 - 5 5 5 E - 1 1 D 3 - A CURSO DE WEBDESIGN- 3к AULA
Diagramaчуo Web (Tabelas)
A ferramenta que possibilita um controle sobre a diagramaчуo de sites щ a tabela. ╔ com ela que conseguimos "segurar" um conte·do diagramado, no sentido de se ter um controle maior sobre o que e como estуo dispostos os objetos que compїem o design de um site.
Como isso acontece?
Ao se criar uma tabela, de tamanho fixo (em pixels), se estrutura uma 'pсgina" imaginсria, onde se distribui os elementos que comporуo o seu site.
Pode-se inserir tabelas dentro de tabelas fazendo com que se tenha controle sobre o espaчo que cada elemento irс ocupar no lay out do site.
Exercэcio:
Colocar um texto em um documento HTML a esquerda da pсgina, uma imagem no centro e um outro texto, de 2 colunas, do lado direito da pсgina. (Usando editor.)
TABELAS:
(Material retirado do site: HYPERLINK http://www.icmsc.sc.usp.br/manuals/HTML/tabelas.html http://www.icmsc.sc.usp.br/manuals/HTML/tabelas.html)
Tabelas
A formataчуo de tabelas foi adotada bem antes de sua inclusуo na definiчуo de HTML. A manipulaчуo de tabelas, mesmo em editores, щ trabalhosa; a maior diferenчa entre tabelas em HTML e em edit ores como o MS Word, entretanto, щ o fato das tabelas em HTML serem definidas apenas em termos de linhas e nуo de colunas. Mas isso serс percebido no decorrer destas pсginas.
As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas щ possэvel, por exemplo, termos estas pсginas do tutorial organizadas em colunas, sendo uma delas voltada exclusivamente aos links de navega&cced il;уo e observaчїes. Tabelas implementam um conceito importante de layout: as УgradesФ, segundo as quais organizamos textos e ilustraчїes de maneira harmoniosa.
Como jс foi possэvel perceber, as tabelas contъm textos, listas, parсgrafos, imagens, diversas outras formataчїes - inclusive outras tabelas. Novas versїes de HTML e de browsers populares vъm acrescentando diversos atributos рs tabelas, e nosso objetivo aqui щ saber lidar com a maioria desses recursos disponэveis.
Elementos bсsicos de tabelas
delimita uma tabela. Um atributo bсsico щ BORDER, que
indica a apresentaчуo da borda.
Tэtulos, linhas e elementos
...
define o tэtulo da tabela
...
delimita uma linha
... |
define um cabeчalho para colunas ou linhas (dentro de )
... |
delimita um elemento ou cщlula (dentro de
)
Uma tabela simples:
Primeiro exemplo
Coluna 1 | Coluna 2 |
linha1, coluna 1 | linha 1, coluna 2 |
linha 2, coluna 1 | linha 2, coluna 2 |
Primeiro exemplo
Coluna1Coluna2Linha1, coluna1Linha1, coluna2Linha2, coluna 1Linha2, coluna2
Tэtulos compreendendo mais de uma coluna ou linha
╔ possэvel englobar colunas e linhas, atravщs dos atributos COLSPAN (para colunas) e
ROWSPAN (para linhas):
Colunas 1 e 2 |
linha1, coluna 1 | linha 1, coluna 2 |
linha 2, coluna 1 | linha 2, coluna 2 |
3 linhas | uma linha |
duas linhas |
tres linhas |
Colunas 1 e 2linha1, coluna 1linha1, coluna2linha2, coluna1linha2, coluna2
3 linhasUma linhaDuas linhasTres linhas
Neste exemplo, vemos que o cabeчalho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabeчalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).
Tabelas sem borda
As pсginas deste tutorial foram construэdas com tabelas sem borda. Para tanto, foi empregada a seguinte delaraчуo:
Realmente, a formataчуo de tabelas щ complicada, e o texto fonte chega a ser quase ininteligэvel quando fazemos uso dos seus diversos atributos. Hoje existem editores de HTML que fazem esse "trabalho" sozinhos, porщm, mesmo com esses recursos todos, рs vezes nуo hс outro jeito: щ preciso editar manualmente.
Alinhamentos em tabelas
Alinhamentos simples
Os alinhamentos padrуo em tabelas, como podemos ver no exemplo acima, sуo:
no sentido horizontal: alinhamento р esquerda
no sentido vertical: alinhamento no centro da cщlula
As linhas e cщlulas podem ter alinhamentos definidos atravщs dos atributos:
ALIGN = alin_horizontal
VALIGN = alin_vertical
Alinhamentos combinados
Uma mesma cщlula pode ter atributos ALIGN e VALIGN.
Texto da
cщlula |
Alinhamentos de linhas
O alinhamento pode ser aplicado a linhas inteiras, com:
Texto da
cщlula
Porщm, o alinhamento declarado em uma cщlula prevalece sobre o alinhamento da
linha, isso pode ser interessante para algumas aplicaчїes.
Atributos de largura
Na seчуo anterior, foi comentado que uma tabela comum ajusta o tamanho de suas
cщlulas ao conte·do.
Para apresentar uma tabela ocupando determinado espaчo disponэvel na linha,
usamos o atributo WIDTH. Esse atributo pode ser aplicado tambщm a linhas e cщlulas.
Essa largura pode ser definida em porcentagem (do espaчo disponэvel):
WIDTH=x%
ou em pixels:
WIDTH=x
Ex.1: Tabela ocupando 50% do espaчo disponэvel
Ex.2: Tabela ocupando 50% do espaчo disponэvel, com uma coluna de 60% do
espaчo disponэvel na tabela
janeiro | fevereiro | marчo |
abril | maio | junho |
Ex3.: O controle da largura da tabela estс limitado р dimensуo de seu conte·do:
janeiro | fevereiro | marчo |
abril | maio | junho |
Ainda faltam detalhes. Um deles щ evitar que o texto fique grudado nas bordas da
tabela; veremos na prєxima seчуo, sobre espaчamentos.
Atributos de espaчamento
Dois atributos permitem o controle de espaчamento em tabelas:
CELLPADDING - espaчo entre o texto e as bordas da cщlula
CELLSPACING - espaчo entre cщlulas
Tomemos a mesma tabela simples da seчуo anterior:
Ex.1: Espaчo entre o texto e as bordas
Ex.2: Espaчo entre cщlulas
Ex3.: Espaчo entre texto e bordas, e espaчo entre cщlulas
Extensїes de Tabelas
Diversas extensїes de tabelas possibilitam a apresentaчуo de efeitos muito bons nas pсginas.
Cor de fundo
Cor de borda
Imagem de fundo
LINKS PARA APRENDER MAIS SOBRE TABELAS;
HYPERLINK http://www.unb.br/vis/lvpa/html/tab1.htm http://www.unb.br/vis/lvpa/html/tab1.htm
HYPERLINK http://www.na-df.rnp.br/hipertextos/cr-df/cursos/tabela/ http://www.na-df.rnp.br/hipertextos/cr-df/cursos/tabela/
DICA:
Sintaxe para tirar sublinhado de links:
OBS: isso щ uma linha de estilo. Deve estar no inэcio do BODY de um documento HTML.
ARQUITEC CAMPINAS
Curso de WebDesign
PAGE
PAGE 1
Jurema Sampaio
Jurema'sampaio@sigmabbs.com.br
FONES: 0 XX 19 256.2199 e 996.0805
( D E Е Ж З ╗ ╝ ╛ $ ╗ ╪ ╒
ы
Є F y - < ░ ▒ N ` 3 K L a ░ ╚ Q h Г Ш 1 J % : Ы й э √ ╖ ╕ ь э ю ] ^ _ Ч Ш н! о! └! ╙! ╒! ╓! ▄! ▌! ▐! р! с! ч! ш! ¤ ·є·щєфє· ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ т т т ¤ ¤ т т т ▌ ╒▌╥▌ ▌ ╩▌╥▌ ¤─└ ╣╢╣╢ ╣╢╣ 0J
j 0J UB*CJ
5БB*CJ Бjb U0J БjI U j U>*0J CJ Бj CJ U
j CJ UCJ 5Б G 8 9 = > S T ч ш t u А Б ( ╛ ┐ ╟ ╚ 8 9 ╟
╚
# $ № № № · · · · · · · · · · · · · · · · · · · · · · · · · · $ 8 9 = > S T ч ш t u А Б ( ╛ ┐ ╟ ╚ 8 9 ╟
╚
# $ m П Р й п ║ ╗ ╪ ┘ Є
"
<
K
О
Э
╘
╒
ы
ь
% S У ╙ ▐ ▀ ё Є · # $ 5 E F G y z ╨ щ ъ ¤ ) i й т " , - ; < M ] ^ n ~ А Й У Ф Х б в г ■■ ■ ■№№ ■■■■■ ■ ■■ ■ ■■■■ ■ ∙∙ў∙∙ў∙∙ў ■■■■■■ ∙ў∙∙ў∙∙ў∙∙∙ў∙∙ў∙
b$ m П Р й п ║ ╗ ╪ ┘ Є
"
<
K
О
Э
╘
╒
ы
ь
% S У ╙ ▐ ▀ ё Є ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ ¤ Є · # $ 5 E F G y z ╨ щ ъ ¤ ) i й т " , - ; · · ▐Д █ █ ▐И █ █ ▐ ┘ ┘ ┘ ┘ ┘ ┘ ┘ ┘ ┘ ┘ ┘ ┘ ┘ ┘ ┘ · $ $$ T ЦF ╓ ╓ ║ ┴Б $$ ; < M ] ^ n ~ А Й У Ф Х б тИ ▌ ▌ ┐Д ▌ ▌ бT ▌ ▌ ▌ x8 u ▌ $) $$ T ЦF Ф4╓ ╓ . Ж
╘` $$ T ЦF Ф,╓ ╓ . Ж
╘ $$ T ЦF Ф╓ ╓ . Ж
╘ $$ $$ T ЦF Фh╓ ╓ . ╘
б в г п ░ ▒ M N ` a ╒ ╓ ы ё √ № 2 3 K ╓8 ╙ ╬ е г а а а а а а а а а а а а а $ ) $$ T ЦF Ф4╓ ╓ . Ж
╘ $$ $) $$ T ЦF Фc4╓ ╓ . Ж
╘ г п ░ ▒ M N ` a ╒ ╓ ы ё √ № 2 3 K L a b п ░ х ! " p q Р о п ░ ╚ ╔ > P Q h i г д т ї Ў E Б В Г Ш Щ щ L в г ы √ L M i j │ ╤ ╥ я Ў 8 @ G В К Ф Х ц ч L T [ Х Э з и ∙ 0 1 J K Л М ╠ Ў ў ¤√ ∙∙ ∙∙
bK L a b п ░ х ! " p q Р о п ░ ╚ ╔ > P Q h i г д т ї Ў E № № № № № № № № № № № № № № № № № № № № № № № № № № № № № $ E Б В Г Ш Щ щ L в г ы √ L M i j │ ╤ ╥ я Ў 8 @ G В № № № № № № № № № № № № № № № № № № № № № № № № № № № № № $ В К Ф Х ц ч L T [ Х Э з и ∙ 0 1 J K Л М ╠ Ў ў * + S T u № № № № № № № № № № № № № № № № № № № № № № № № № № № № № $ ў * + S T u v Т У ╡ ╢ ╖ є Ї $ % : ; Ъ Ы й к ь э √ № < U V g h О П ╖ Щ Ъ Ы б в ╩ ╦ ╙ ╪ ! L! P! Y! Z! н! о! └! ╙! ╘! ╒! ▐! ▀! р! ш! щ! ы! ·! " ?" @" A" B" ■■■√√∙ЎЎ∙■■■ЎЎЎ∙■■
Bu v Т У ╡ ╢ ╖ є Ї $ % : ; Ъ Ы й к ь э √ № < U V g h О П ╖ № № № № № № № № № № № № № № № № № № № № № № № № № № № № № $ Щ Ъ Ы б в ╩ ╦ ╙ ╪ ! L! P! Y! Z! о! └! ╙! ╘! ╒! ▐! ▀! р! ы! ·! " ?" № № № № № · · · · · · · · · № ў ў ў · ю ъ · ю х т т $ $Дh Дh &`#$Д° Д $ $ 8 4 0 - 0 0 0 0 2 1 C 3 6 C 0 E } A ╘ ] 9 h t t p : / / w w w . n a - d f . r n p . b r / h i p e r t e x t o s / c r - d f / c u r s o s / t a b e l a / _ ) h t t p : / / w w w . u n b . b r / v i s / l v p a / h t m l / t a b 1 . h t m V 5 h t t p : / / w w w . i c m s c . s c . u s p . b r / m a n u a l s / H T M L / t a b e l a s . h t m l <