Apostila html listas, links, tabelas

GDF- SECRETARIA DE EDUCAÇÃO DO DF
CEP - ESCOLA TÉCNICA DE BRASÍLIA
CURSO TÉCNICO EM INFORMÁTICA
DESENVOLVIMENTO WEB I
PROF. FRANCISCO CASSIO DA S.ALVES
CENTRO DE EDUCAÇÃO PROFISSIONAL - ESCOLA TÉCNICA DE BRASÍLIA
QS 07 lote 02/08 Avenida Águas Claras - Águas Claras/DF - CEP 71966-700.
Telefones: (61) 3901-6767 / 3901-3534
Sumário
Listas ....................................................................................................................................................... 4
I - Listas ordenadas ou numerada........................................................................................................... 4
Sintaxe utilizada para a inserção de listas ordenadas: ........................................................................... 4
Definição de marcadores para listas ordenadas - Atributo (type):.......................................................... 4
Definindo o início da numeração: atributo (start): ................................................................................... 6
II - Listas Não ordenadas ........................................................................................................................ 7
Sintaxe utilizada para a inserção de listas desordenadas: ..................................................................... 7
III - Lista intercalada ou encadeada ou mista.......................................................................................... 9
IV - Lista de definição ou glossário ....................................................................................................... 10
Sintaxe utilizada para a criação da lista de definição ou glossário:...................................................... 10
Seletores, Classes e IDs ....................................................................................................................... 11
I - Seletores ........................................................................................................................................... 11
II - Seletores tipo Classes...................................................................................................................... 12
III - Seletores tipo ID.............................................................................................................................. 15
Diferença entre CLASS e ID.................................................................................................................. 16
Links ...................................................................................................................................................... 17
Criando links.......................................................................................................................................... 17
I - Links para outras URLs..................................................................................................................... 17
II - Links para e-mail.............................................................................................................................. 18
III -Links âncoras ................................................................................................................................... 18
Referência relativa e absoluta dos links................................................................................................ 20
I - Referência Relativa........................................................................................................................... 20
II - Referência Absoluta......................................................................................................................... 20
Uso da propriedade target..................................................................................................................... 20
Uso da propriedade title ........................................................................................................................ 20
Tabelas.................................................................................................................................................. 22
Tags básicas de uma tabela.................................................................................................................. 23
A tag <th> (title heading) ....................................................................................................................... 23
A tag <caption>(título da tabela) ........................................................................................................... 24
Formatação de tabelas.......................................................................................................................... 25
Atributos do elemento <table> .............................................................................................................. 25
 border ............................................................................................................................................... 25
 cellspacing........................................................................................................................................ 25
 cellpadding ....................................................................................................................................... 25
 width: ................................................................................................................................................ 25
 height................................................................................................................................................ 25
 align .................................................................................................................................................. 25
 bgcolor:............................................................................................................................................. 25
 bordercolor: ...................................................................................................................................... 25

Telefones: (61) 3901-6767 / 3901-3534
2
 background:...................................................................................................................................... 25
Atributos do elemento <tr> .................................................................................................................... 25
 align: especifica o alinhamento horizontal do conteúdo das células. As opões são: left, right, center
e justify................................................................................................................................................... 25
 valign: especifica o alinhamento vertical do conteúdo das células. As opções são: top, middle,
bottom e baseline. ................................................................................................................................. 25
 bgcolor: especifica a cor de fundo para a linha................................................................................ 25
 bordercolor: define a cor de borda das células da linha. ................................................................. 25
 background:...................................................................................................................................... 25
 height:............................................................................................................................................... 25
Atributos do elemento <td> ................................................................................................................... 26
 align: ................................................................................................................................................. 26
 valign: ............................................................................................................................................... 26
 nowrap:............................................................................................................................................. 26
 colspan: ............................................................................................................................................ 26
 rowspan:........................................................................................................................................... 26
 width: ................................................................................................................................................ 26
 height:............................................................................................................................................... 26
 bgcolor:............................................................................................................................................. 26
 bordercolor: ...................................................................................................................................... 26
 background:...................................................................................................................................... 26
Atributos do elemento <th> ................................................................................................................... 26
 align: ................................................................................................................................................. 26
 valign: ............................................................................................................................................... 26
 nowrap:............................................................................................................................................. 26
 colspan: ............................................................................................................................................ 26
 rowspan:........................................................................................................................................... 26
 width ................................................................................................................................................. 26
 height:............................................................................................................................................... 26
 bgcolor:............................................................................................................................................. 26
 bordercolor: ...................................................................................................................................... 26
 background:...................................................................................................................................... 26
Mesclagem de células de tabelas ......................................................................................................... 26
Atributo Colspan .................................................................................................................................... 26
Atributo Rowspan .................................................................................................................................. 27
Os elementos colgroup e col................................................................................................................. 30
A Tag colgroup ...................................................................................................................................... 30
A sintaxe básica do elemento colgroup é:............................................................................................. 30
A Tag col................................................................................................................................................ 30
Os elementos <tbody>, <thead> e <tfoot>............................................................................................ 32
O elemento <thead> - (Table Head Element): ...................................................................................... 32
O elemento <tbody> - (Table Body Element):....................................................................................... 34
O elemento <tbody> define ................................................................................................................... 34

Telefones: (61) 3901-6767 / 3901-3534
3
O elemento <tfoot> - (Table Foot Element):.......................................................................................... 35
Índice de figuras
Figura 1: Listas ordenadas...................................................................................................................... 5
Figura 2: Lista ordenada-marcador tipo romano..................................................................................... 6
Figura 3: Lista ordenada com início de numeração definido - atributo “start”......................................... 7
Figura 4: Lista não ordenada................................................................................................................... 8
Figura 5: Marcador tipo imagem ............................................................................................................. 9
Figura 6: Lista mista .............................................................................................................................. 10
Figura 7: Lista de definição ................................................................................................................... 11
Figura 8: Formatação com uso de "class"............................................................................................. 13
Figura 9: Parágrafos não estilizados..................................................................................................... 14
Figura 10: Parágrafo estilizado ............................................................................................................. 14
Figura 11: Uso de ID ............................................................................................................................. 16
Figura 12: Links..................................................................................................................................... 18
Figura 13: Links âncora......................................................................................................................... 19
Figura 14: Links âncora na mesma página ........................................................................................... 20
Figura 15: Propriedade “title” de um link ............................................................................................... 21
Figura 16: Partes de uma tabela ........................................................................................................... 23
Figura 17: Uso do atributo “<th>” .......................................................................................................... 24
Figura 18: tag <caption>........................................................................................................................ 25
Figura 19: Mesclagem de células com “colspan”.................................................................................. 27
Figura 20: Mesclagem de células com “rowspan”................................................................................. 28
Figura 21: Tabela formatada ................................................................................................................. 30
Figura 22: Uso de colgroup ................................................................................................................... 31
Figura 23: Uso de colgroup e col .......................................................................................................... 32
Figura 24: Uso do elemento <thead>.................................................................................................... 34
Figura 25: Uso do elemento <tfoot>...................................................................................................... 36

Telefones: (61) 3901-6767 / 3901-3534
4
Listas
A criação de listas e tabelas, são recursos muito utilizados para promover uma melhor apresen-
tação dos conteúdos expostos nos sites da Internet.
A utilização das listas apenas será viável, quando houver a necessidade de se organizar as in-
formações em itens, de modo a facilitar a sua compreensão, quantificação e classificação.
Na versão atual da linguagem HTML, são utilizados os seguintes estilos de listas, conforme a
relação abaixo:
 Lista ordenada ou numerada: listam itens numerando-os sequencialmente.
 Lista não ordenada ou não numerada: listam itens sem numerá-los;
 Lista de definição ou glossário: listam um termo e sua definição.
 Lista intercalada ou encadeada ou mistas: combinação dos tipos de listas citados anteri-
ormente.
O tipo lista intercalada ou encadeada se originou da combinação dos diferentes tipos de listas
usados em conjunto.
A possibilidade de disponibilizar as informações em tabelas, supria a falta de comandos mais
elaborados na realização eficaz do posicionamento e alinhamento dos textos e objetos, principalmen-
te com relação aos links, imagens e controles, dando um novo realce quanto ao aspecto da apresen-
tação visual destes elementos, quando inseridos nas páginas em HTML.
Tanto as listas como as tabelas podem usufruir dos diversos comandos de formatação de tex-
to, disponíveis na linguagem HTML e estudados nos módulos anteriores.
Observe a sintaxe e os atributos utilizados na criação das listas e tabelas, para que possamos
implementar mais estes recursos na construção de páginas em HTML.
I - Listas ordenadas ou numerada
Listas ordenadas são também denominadas listas numeradas, pois, quando um navegador
encontra uma tag, iniciando uma lista ordenada, ele passa a mostrar cada item utilizando números,
como 1, 2, 3, e assim sucessivamente.
O estilo de lista ordenada insere ao lado esquerdo de cada nova informação, um algarismo do
sistema numérico cardinal, ou do sistema numérico romano, ou ainda, um caractere do sistema alfa-
bético, classificando estas informações, como itens ordenados em uma lista.
O formato produzido na utilização de uma lista ordenada é idêntico a inserção do recurso de
numeração, disponível em alguns editores de textos, como por exemplo, no Microsoft Word.
Sintaxe utilizada para a inserção de listas ordenadas:
<ol type=”tipo“ start=”número“>
<li>[itens da lista]
</ol>
<ol>: Tag utilizada para abertura da lista ordenada (OL = Ordered List).
<li>: Tag utilizada para a inserção de cada novo item da lista.
</ol>: Tag utilizada para o fechamento da lista ordenada.
A tag <li> deverá ser inserida antes de cada novo item da lista, a fim de lhe atribuir um índice
de classificação sequencial.
A tag <li> não precisa de fechamento com </li> ao término da descrição, mas seu uso ajuda na
visualização do código.
Definição de marcadores para listas ordenadas - Atributo (type)1:
O atributo type na lista ordenada é utilizado para definir qual sistema de ordenação entre os
disponíveis deverá ser aplicado aos itens da lista. Os tipos possíveis são:
 Type="1": Algarismos do sistema numérico cardinal (1, 2, 3 etc.)
 Type="i": Algarismos em minúscula do sistema numérico romano (i, ii, iii etc.)
 Type="I": Algarismos em maiúscula do sistema numérico romano (I, II, III etc.)
 Type="a" -Caracteres em minúscula do sistema alfabético (a, b, c etc.)
 Type="A": Caracteres em maiúscula do sistema alfabético (A, B, C etc.)
Exemplo:
Observe o arquivo listas.html abaixo:
<!DOCTYPE html>
<html lang="pt-br">
<head><title>Listas ordenadas</title>
<meta charset="utf-8">
1
O elemento type não é mais suportado em HTML 5. Para definir o tipo de marcador usamos o atributo list-style-type (CSS).

Telefones: (61) 3901-6767 / 3901-3534
5
</head>
<body>
<h1>Listas Ordenadas</h1>
<h3>Cursos</h3>
<ol>
<li>Graduação</li>
<li>Pós-Graduação Lato Sensu</li>
<li>Cursos de Pós-Graduação Stricto Sensu</li>
</ol>
</body>
</html>
Figura 1: Listas ordenadas
Observe que não foi definido o atributo “type” a tag <ol>, portanto a lista é exibida em seu for-
mato padrão.
No próximo exemplo vamos definir o atributo “type” para a tag <ol>:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Listas ordenadas</title>
</head>
<body>
<h3>Cursos</h3>
<ol type=”I”>
</ol>
</body>
</html>

Telefones: (61) 3901-6767 / 3901-3534
6
Figura 2: Lista ordenada-marcador tipo romano
Nesse exemplo foi definido o atributo type=”I”, assim o tipo de marcador exibido é no formato
de numeral romano.
Definindo o início da numeração: atributo (start):
O atributo start define o ponto de partida para a classificação dos itens de uma lista ordenada.
A sua utilização é feita da seguinte forma:
Start="n" - O “n” deverá ser substituído por um número que será tomado como referência para
o início da classificação em uma lista ordenada.
Exemplos da utilização do atributo (start):
Quando (type="1") e (start="0"), a classificação será iniciada no número 0 (valor aplicado ape-
nas quando for usado o sistema cardinal para a classificação).
Quando (type="A") e (start="11"), a classificação será iniciada no caractere K.
Quando (type="a") e (start="10"), a classificação será iniciada no caractere j.
Quando (type="I") e (start="10"), a classificação será iniciada no algarismo romano X.
Quando (type="i") e (start="5"), a classificação será iniciada no algarismo romano v.
Tanto o atributo (type) como o (start), deverão ser inseridos dentro da tag <ol>, definindo um
mesmo estilo para todos os itens da lista.
Observe com atenção a distribuição dos comandos HTML (tags) na construção do documento
e ficaria sua visualização no browser:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Listas ordenadas</title>
</head>
<body>
<h3>Cursos</h3>
<ol type=”I”start=”5”>
</ol>

Telefones: (61) 3901-6767 / 3901-3534
7
</body>
</html>
Observe como ficou a lista:
Figura 3: Lista ordenada com início de numeração definido - atributo “start”
II - Listas Não ordenadas
O estilo de lista desordenada, ou não numerada ou não ordenada, insere um símbolo gráfico
(bullet) ao lado esquerdo de cada uma das informações, a fim de identifica-las individualmente como
itens de uma lista.
Sintaxe utilizada para a inserção de listas desordenadas:
<ul> - Tag utilizada para abertura da lista desordenada (UL = Unordered List).
<li> - Tag utilizada para a inserção de cada novo item da lista.
</ul> - Tag utilizada para o fechamento da lista desordenada.
A tag <li> não precisa de fechamento com </li> ao término da descrição, mas como dito antes,
seu uso ajuda na visualização do código.
Atributo (type):
O atributo (type) é utilizado para definir qual símbolo gráfico (bullet) entre os três disponíveis
deverá ser inserido juntamente com os itens da lista. Os valores possíveis são:
Type="disc" - Insere um círculo preenchido.
Type="circle" - Insere um círculo vazio.
Type="square" - Insere um quadrado preenchido.
O atributo (type) poderá ser usado tanto com a tag <ul> (definindo o símbolo para todos os
itens da lista), quanto com a tag <li> personalizando apenas os itens desejados.
Observe com atenção a distribuição dos comandos HTML (tags) na construção do documento,
no exemplo a seguir:
Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head><title>Lista não ordenada</title></head>
<body>
<h1>Listas não ordenadas</h1>
<p align="justify"> O território brasileiro é dividido em cinco regiões.</p>
<ul type="square">
<li> Norte
<li> Nordeste
<li> Centro-oeste
<li> Sudeste
<li> Sul</ul>
</font>
</body>
</html>

Telefones: (61) 3901-6767 / 3901-3534
8
Figura 4: Lista não ordenada
É possível usar imagens como marcadores de listas, para isso definimos a imagem a ser usada
na propriedade list-style-image no CSS.
Exemplo:
<!DOCTYPE html>
<head><title>Lista não ordenada</title>
<style type="text/css">
ul {
list-style-image: url("seta.png");
}
</style>
</head>
<body>
<h1>Listas não ordenadas</h1>
<ul>
<li> Norte
<li> Nordeste
<li> Centro-oeste
<li> Sudeste
<li> Sul
</ul>
</font>
</body>
</html>
usamos as regras CSS para definir o tipo do
marcador.

Telefones: (61) 3901-6767 / 3901-3534
9
Figura 5: Marcador tipo imagem
III - Lista intercalada ou encadeada ou mista
Este estilo é resultante da intercalação ou encadeamento dos demais estilos de listas disponí-
veis, não havendo uma sintaxe própria para a sua implementação, mas sim, a utilização da sintaxe de
um ou mais estilos de listas em conjunto.
As listas poderão estar dispostas sequencialmente ou aninhadas internamente a outras listas.
A lista mista pode ser ordenada ou não ordenada, combinando esses estilos de acordo com o
objetivo da lista a ser criada. Pode conter ainda estilo de lista de definição.
Apenas diante de determinadas situações específicas é que você irá identificar a quantidade e
quais estilos de listas, serão mais apropriados para melhor esquematizar as informações por itens.
No exemplo a seguir, observe com atenção a distribuição dos comandos HTML (tags) na cons-
trução do documento.
<!DOCTYPE html>
<html lang="pt-br">
<head><title>Listas mistas</title>
</head>
<body>
<h3>Listas mistas</h3>
<h4>Ordenada, não ordenada, de definição</h4>
<dl>
<dt>INGREDIENTES</dt>
<dd>
<ul>
<li>2 batatas médias</li>
<li>1 tablete de caldo de galinha</li>
<li>1 colher (sopa) de óleo</li>
<li>1 colher (sopa) de sal</li>
<li>5 xícaras (chá) de água</li>
<li>1 xícara (chá) de couve em tiras</li>
<li>1 linguiça calabresa em rodelas</li>
</ul>
</dd>
<dt>MODO DE PREPARO</dt>
<dd>
<ol>
<li>Separe a couve e a linguiça.</li>
<li>Cozinhe os demais ingredientes por 10 minutos.</li>
<li>Bata no liquidificador.</li>
<li>Acrescente a linguiça e ferva.</li>
<li>Adicione a couve manteiga.</li>

Telefones: (61) 3901-6767 / 3901-3534
10
</ol>
</dd>
<dt>INFORMAÇÕES ADICIONAIS</dt>
<dd>Servir com torradas e azeite.</dd>
<dd>Porção para 3 pessoas.</dd>
</dl>
</body>
</html>
Figura 6: Lista mista
IV - Lista de definição ou glossário
Este estilo de lista é diferenciado pelo fato de que cada um dos seus itens é composto por um
termo e por sua respectiva definição, justificando o segundo nome dado a este estilo de lista, por ca-
racterizar o formato de um glossário.
Sintaxe utilizada para a criação da lista de definição ou glossário:
<dl> - Tag utilizada para a abertura da lista de definição
<dt> - Tag utilizada para a inserção de um novo termo à lista
<dd> - Tag utilizada para a inserção de uma definição associada ao seu respectivo termo.
</dl> - Tag utilizada para o fechamento da lista de definição
As tags <dt> e <dd>, deverão ser inseridas tanto quanto for à quantidade de itens (termos e de-
finições) disponíveis para a montagem da lista.
A tag <dd> também pode ser usada individualmente fora de uma lista de definição, inserindo
um espaço em branco à esquerda da informação escrita na sua sequência.
Exemplo:
<dd> Texto com um espaço à esquerda.
No próximo exemplo, observe com atenção a distribuição dos comandos HTML (tags) na cons-
trução do documento.
<!DOCTYPE html>
<html lang="pt-br">
<head><title> LISTA DE DEFINIÇÃO OU GLOSSÁRIO </title>
</head>
<body>
<h1>LISTA DE DEFINIÇÃO OU GLOSSÁRIO </h1>
<dl>
<dt> NORTE
<dd> A região norte do Brasil é subdividida em 7 estados.
<dt> NORDESTE
<dd> O nordeste brasileiro, está subdividido em 9 estados.
<dt> CENTRO-OESTE

Telefones: (61) 3901-6767 / 3901-3534
11
<dd> A região centro-oeste, além do Distrito Federal onde está localizado Brasília, a capital
do país, possui 3 estados.
<dt> SUDESTE
<dd> O sudeste brasileiro, possui 4 estados.
<dt> SUL
<dd> A região sul, é composta por 3 estados.
</dl>
</body>
</html>
Figura 7: Lista de definição
Seletores, Classes e IDs
I - Seletores
Seletor é a própria tag do elemento da marcação na qual será aplicado o estilo CSS. Um sele-
tor aponta exatamente em qual lugar da marcação será aplicada a regra CSS.
Regra CSS
seletor{propriedade: valor}
Declaração
 A Declaração especifica os critérios que serão aplicados no CSS. A declaração é formada
pela propriedade e valor.
 A Propriedade informa qual a característica do elemento receberá o estilo CSS.
 O Valor é a descrição do que vai mudar na propriedade, podendo ser cor, tamanho, estilo,
posição etc.
As regras CSS podem alterar mais de uma propriedade e atribuir diversos valores a essas. Po-
demos declarar vários valores de uma propriedade numa mesma regra.
Veja abaixo um exemplo de declaração do elemento <p> onde vamos declarar valores para
sua cor, fundo, fonte e alinhamento.
p.{
color:.#000;
background-color:.#ff0;
font-style:.italic;
text-align:.right;
}
As declarações devem ser separadas por ponto-e-vírgula. Se for apenas uma propriedade e
após a declaração da última propriedade, não é necessário usá-lo.
Podemos escrever uma regra CSS na mesma linha.

Telefones: (61) 3901-6767 / 3901-3534
12
Exemplo:
p.{
color:#000;background-color:#ff0;font-style:italic;text-align:right
}
Dessa forma fica mais compacta a regra, sem espaços entre as propriedades e sem o ponto-e-
vírgula após a última declaração.
O seletor deve ser separado da declaração. A declaração deve estar entre chaves - {} e a pro-
priedade deve ser separada do valor por dois pontos - :, e cada declaração separada por ponto-e-
vírgula - ;
No entanto, a leitura e a visualização da regra ficam mais difíceis, sobretudo quando se faz ne-
cessário localizar determinada regra num evento de manutenção e correção de sites que tem folhas
de estilo muito extensas.
A forma de escrever as regras e declarações é de livre escolha do desenvolvedor.
II - Seletores tipo Classes
Classes são tipos de seletores específicos que usamos quando queremos aplicar formata-
ção a elementos que se repetem no código, ou seja, podemos ter vários elementos <h1> com cores e
estilos diferentes. As classes servem também para identificar um trecho qualquer na página, como
por exemplo um elemento <p>, <span>, <div> etc. que podemos destacar seu conteúdo dos demais
existentes.
Isso nos permite ampliar nossas opções de estilização. É possível agrupar e dar nome, por
exemplo, ao primeiro parágrafo de cada texto.
Podemos identificar um texto e uma imagem com um determinado nome.
Classes são muito úteis na estilização de menus, aplicando-se efeitos diversos aos itens e
permitindo que cada um se comporte de maneira diferente dentro da página.
Se quisermos fazer um menu na lateral, podemos criar uma classe com aqueles links e aplicar
efeitos neles, que são efeitos diferentes daqueles links dentro dos artigos, que são diferente dos efei-
tos dos links no rodapé.
A sintaxe de uma classe é apresentada a seguir:
.nome_da_classe{
regras CSS;
}
Exemplos:
<h1 class=”titulo1”>Texto do título</h1>
<p class="paragrafo1">No menu Inserir, as galerias incluem itens que são projetados para cor-
responder à aparência geral do documento.</p>
Observe que para a tag <h1> foi definida a class ”titulo1” e para a tag <p> a classe “paragra-
fo1”.
Ao definirmos os nomes das classes o próximo passo é aplicar as regras CSS que irão estilizar
essas classes.
Confira o código exemplo a seguir:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Exemplo do uso de Classes</title>
<style>
.titulo1{
font-family:Tahoma; font-size:18px; color:#oo00ff;
}
.paragrafo1{
font-family:Verdana; font-size:16px; color:#3300cc;
}
</style>
</head>
<body>
<h5>Exemplo de parágrafo formatado com uso de class</h5>
<p class="paragrafo1">No menu Inserir, as galerias incluem itens que são projetados
para corresponder à aparência geral do documento.</p>

Telefones: (61) 3901-6767 / 3901-3534
13
</body>
</html>
Figura 8: Formatação com uso de "class"
Mesmo havendo milhares de elementos <p>, as regras CSS definidas serão aplicadas nos
elementos <p> que pertençam as suas respectivas classes.
No exemplo acima, apenas os elementos <p class=”parafrafo1”> e <h1> serão estilizados pelo
CSS.
A declaração da classe é precedida por um PONTO (.) e as regras são declaradas da forma
como já explicado.
Não existe uma regra definida para o uso do nome de classes, no entanto não se deve usar
acentos, espaços e caracteres especiais; também não se deve usar o mesmo nome de elementos já
definidos pela W3C.
A seguir veremos outro exemplo de uma página com estilização de elementos com o uso clas-
ses.
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<title>Uso de Seletor tipo class em CSS</title>
<meta charset=”utf-8">
</head>
<body>
<p>Parágrafo normal</p>
<p>Mais um parágrafo</p>
<p class="especial">Parágrafo com a class="especial"</p>
<p>Último parágrafo, também sem estilo</p>
</body>
</html>
A página será exibida como abaixo. Observe que não há nenhuma diferença nos textos.

Telefones: (61) 3901-6767 / 3901-3534
14
Figura 9: Parágrafos não estilizados
Vamos aplicar o estilo CSS que queremos à classe definida - class=”especial”.
<!DOCTYPE html>
<head>
<style>
.especial{background-color: #99ff99;} definição da regra CSS ao elemento <p>
“class=”especial”.
</style>
</head>
<body>
</body>
</html>
A estilização do elemento <p class=”especial”> pode ser visualizada a seguir:
Figura 10: Parágrafo estilizado

Telefones: (61) 3901-6767 / 3901-3534
15
III - Seletores tipo ID
Outro tipo de seletor é o id também é muito usado para destacar trechos de uma página HTML
com o uso de regras CSS.
O seletor id (id selector) é utilizado para identificar uma parte única do código e não pode ser
atribuído a outros elementos, como class que pode ser utilizado para estilizar diversos elementos.
O uso do seletor id é semelhante ao seletor class. Define-se um nome para o seletor id e faz-se
as devidas declarações CSS.
O valor que será atribuído ao seletor id é definido pelo desenvolvedor. O nome escolhido é úni-
co e não pode ser usado em outros seletores id e classes, para evitar confusões. As regras de nomes
escolhidos são as definidas pela W3C, ou seja, não pode haver espaços, caracteres especiais, acen-
tos etc.
A sintaxe do uso de id no código HTML é:
<TAG id="identificador">
Exemplo:
Vamos identificar diversos cabeçalhos:
<h1 id="primeiroH1">Cabeçalho principal</h1>
<h1 id="segundoH1">Cabeçalho secundário</h1>
<h1 id="ultimoH1">Último cabeçalho do artigo</h1>
Agora define-se as regras CSS que serão aplicadas a cada id definido.
No CSS o elemento id é escrito da seguinte forma:
#id{
regras CSS
}
A declaração CSS do identificado ID é semelhante ao seletor CLASS, mas no elemento ID
usamos o símbolo # (cerquilha, também chamado de hashtag ou jogo da velha) antes do nome do id.
Veja:
#primeiroH1{
regras CSS para o primeiro <h1>;
}
#segundoH1{
regras CSS para o segundo <h1>;
}
#ultimoH1{
regras CSS para o último <h1>;
}
Vejamos uma página estilizada com elementos id:
<!DOCTYPE html>
<head>
<style>
#primeiroH1{
font-size: 14px;
color: #000099;
font-family: Arial, Serif;
}
#segundoH1{
font-size: 14px;
color: #ff0000;
font-family: Tahoma, Serif;
}
#ultimoH1{
font-size: 14px;
color: #003300;
font-family: Verdana, Serif;
}
</style>
</head>

Telefones: (61) 3901-6767 / 3901-3534
16
<body>
<h1 id=”primeiroH1”>Primeiro H1 cor azul</h1>
<h1 id=”segundoH1”>Segundo H1 cor verde</h1>
<h1 id=”ultimoH1”>Último H1 cor
</body>
</html>
Figura 11: Uso de ID
Diferença entre CLASS e ID
É comum confundir o uso dos seletores class e id. Mas é importante lembrar que o seletor id é
único e só pode aplicado a um elemento e o seletor class pode ter o mesmo nome em diversas tags
e elementos no código.
Por exemplo, podemos usar class="link" em diversos links de uma página. Quando for definido
o efeito CSS nessa class, todos os links que tem esse atributo com este valor serão estilizados.
Outro fator importante é que para o seletor id usamos o símbolo # e em classes usamos o pon-
to (.)
O seletor id é muito usado em formulários e em códigos Java script.

Telefones: (61) 3901-6767 / 3901-3534
17
Links
Em HTML é possível ligar textos e imagens a outros documentos. Esse recurso é chamado de
link.
Silva
2
(2007, p. 113) define link como “a conexão entre um documento e outro.”
Ainda segundo Silva (2007, p. 113-114) “links podem ser usados para direcionar o usuário para
uma outra página, para um ponto da mesma página, abrir uma imagem, fazer download de algum ar-
quivo, enviar um e-mail etc.”
A interligação entre documentos é feito utilizando-se a tag <a> (âncora) e o atributo href
3
e não
se restringe apenas a outras páginas, podem apontar para qualquer recurso disponível na WEB.
A sintaxe de um link é:
<a href=”url”>Link</a>
Exemplo:
<p><a href="http://www.google.com.br">Página do Google</a> <p>
Criando links
I - Links para outras URLs
Para criarmos um link precisamos do nome do arquivo, a URL para a qual se deseja criar o link
e o texto que será destacado e quando clicado, levará ao link.
URL é a abreviação de Uniform Resource Locator, que tem a função de especificar a localiza-
ção de páginas ou arquivos em servidores da WEB.
A URL é composta de duas partes:
1) O protocolo Internet do documento;
2) O endereço do servidor da página.
<a href: “protocolo://servidor.arquivo”> texto ou imagem </a>
<a href:http://google.com.br>Site do Google</a>
O protocolo é o tipo de servidor que está sendo acessado. Os mais utilizado são:
 HTTP: Hiper Text Transfer Protocol, é um servidor da www.
 FTP: File Transfer Protocol, é um serviço para a troca de arquivos, programas entre o servi-
dor e o computador remoto.
Servidor: Entenda como servidor o computador onde a página está localizada.
Arquivo: o arquivo que deseja ser visualizado, podendo ser um diretório e o nome
do arquivo.
Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head><title>Regiões brasileiras</title>
<meta charset="utf-8"></head>
<body>
<h1>Regiões brasileiras</h1>
<ul>
<li><a href=”#”>Norte</a>
<li><a href=”#”>Nordeste</a>
<li><a href=”#”>Centro-Oeste</a>
<li><a href=”#”>Sudeste</a>
<li><a href=”#”>Sul</a>
</ul>
</body>
</html>
2
Silva, Osmar. J. - HTML 4.0 e XHTML 1.0: Domínio e Transição. 2ª ed. São Paulo: Érica, 2007.
3
A HREF: "A" significa Anchor (âncora) e dá início ao link e HREF significa Hypertext REFerence (referência do hipertexto)

Telefones: (61) 3901-6767 / 3901-3534
18
Figura 12: Links
II - Links para e-mail
Pode-se também criar links para e-mails em páginas HTML. Ao clicar sobre o link do e-mail, o
programa padrão para envio de e-mails será aberto, por exemplo o Microsoft Oultlook.
<a href=”mailto:endereço”>Texto ou Imagem </a>
III -Links âncoras
Âncoras são links definidos para trechos específicos de uma mesma página ou de outra página
qualquer.
Podemos criar um link para que o usuário vá direto para um ponto específico de uma página
sem que ele tenha que descer a página, ou ainda direcionar para outro site qualquer.
Um exemplo muito comum de âncora em sites é o elemento "topo" que leva a página para sua
parte inicial. Os links tipo âncora também são muito usados em páginas de FAQ (perguntas e respos-
tas). Ao clicar na pergunta a página rola para a sua respectiva resposta.
Outro uso do recurso de âncoras é em índice de documentos, permitindo que se vá ao ponto
exato desejado na página.
Essa prática é utilizada em páginas demasiadamente extensas possibilitando que o usuário se
desloque do início para o fim do documento ou vice-versa.
Como valor deste atributo informamos o nome da marcação, precedida do sinal #, caso esta
marcação pertença à mesma página da referência. Caso a referência seja para uma outra página, o
atributo (href) receberá como valor o endereço da página em HTML, seguido do sinal # com o nome
da marcação contida nesta página referenciada ao qual se deseja atingir.
Exemplos:
<a href="#fimdodocumento"> Vai para o fim do documento </a>
Esta referência atingirá uma marcação de nome (fimdodocumento), criada dentro desta mesma
página onde se encontra esta referência.
<a href="http://www.fundacaobradesco.org.br/vv-apostilas/cursoHTML/Sumario.htm#sumario"> Sumá-
rio </a>
A marcação #sumario será o objeto alvo da referência. Ao se clicar no elemento na página, será
aberta a página contendo a marcação identificada (#sumário).
É possível criar diversas referências no site, mas é necessário que nas páginas destino haja o
elemento como o mesmo no nome do id definido no código da página origem e que não haja restrição
de acesso à pagina destino.
Uma marcação de âncora é definida utilizando o atributo (name) que receberá como valor o
nome pela qual esta marcação será chamada.

Telefones: (61) 3901-6767 / 3901-3534
19
Exemplo:
<!DOCTYPE html>
<head>
<title>Links Âncora</title>
</head>
<body>
<p>Site da Fundação Bradesco</p>
<p> <a href="http://www.fundacaobradesco.org.br/vv-apostilas/cursoHTML/Sumario.htm#sumario">
Clique aqui</a> para abrir o índice do curso
</p>
</body>
</html>
Figura 13: Links âncora
<!DOCTYPE html>
<head>
<title>Links Âncora</title>
</head>
<body>
<p>
<a name="#iniciododocumento">
<a href="#fimdodocumento"> Vai para o fim deste documento </a>
...texto
...texto
...texto
...texto
...texto
...texto
...texto
...texto
...texto
...texto
<a name="#fimdodocumento"
<a href="#iniciododocumento">Vai para o início deste documento </a>
</p>
</body>
</html>

Telefones: (61) 3901-6767 / 3901-3534
20
Figura 14: Links âncora na mesma página
Nos exemplos acima, ao se clicar no link cuja descrição é "Vai para o fim deste documento", a
página irá rolar até o ponto em que foi definida a âncora. O mesmo acontecerá se o click for no link
definido como “Vai para o início deste documento”.
Referência relativa e absoluta dos links
I - Referência Relativa
Os links relativos apontam para arquivos ou páginas que estão ou não na mesma pasta em seu
disco local. A localização do objeto faz-se a partir da página atual. Usará o domínio e o caminho da
página que se está visualizando para se chegar ao link desejado.
Exemplo:
<a href="inscricao.htm">Inscrição</a>
II - Referência Absoluta
A referência absoluta específica o caminho completo do documento-alvo. É usada para refe-
renciar documentos ou arquivos de outros sites. Nesse caso os documentos ou arquivos não estão
no mesmo domínio ou subdomínio.
Nos links absolutos deve-se informar a URL completa do site destino.
Exemplo:
<a href=http://www.downloads.com>Downloads</a>
Uso da propriedade target
A propriedade target define em qual janela do browser o link será aberto.
Os valores possíveis para a propriedade target são:
 _blank: abre o link em uma nova janela.
 _self: abre o link na mesma janela ou frame em que o link foi clicado.
 _parent: abre o link no frameset principal.
 _top: abre o destino do link na mesma janela, sem frames.
 _search: disponível somente no IE 5+. Abre o link no painel pesquisar.
Os valores _parent e _top são usados com frames ou quando as páginas de seu site são
apresentadas dentro de um frame.
Uso da propriedade title
Quando queremos exibir informações sobre o link usamos a propriedade title, assim quando o
mouse for passado em cima do link, será exibida um texto informativo sobre a finalidade do link ou o
que vai acontecer quando o link for clicado.
Exemplo:
<p>Faça o <a href=http://downloads.com title=”Clique aqui para baixar o arqui-
vo”>download</a>do arquivo.</p>

Telefones: (61) 3901-6767 / 3901-3534
21
Figura 15: Propriedade “title” de um link
Exibição do texto do elemento
title quando o mouse é posicio-
nado sobre o link.

Telefones: (61) 3901-6767 / 3901-3534
22
Tabelas
Tabela é um “conjunto de dados dispostos, na forma de linhas e colunas, dentro de células
4
”.
As tabelas são muito utilizadas nos documentos web, pois facilitam a organização e apresenta-
ção de dados de uma página através de linhas e colunas. As tabelas permitem o alinhamento de tex-
tos e imagens, além de ordenar as informações de uma forma padronizada.
Uma tabela é constituída de linhas e colunas, e a interseção entre estes dois elementos é de-
nominada célula.
Era muito usada na construção de layout da página web, mas atualmente não é (e nem deve)
mais ser utilizada para esse fim. Seu uso é restrito para a distribuição de dados tabulares ao longo do
documento.
As tabelas são compostas por:
 título: indica qual o conteúdo da tabela; são opcionais na criação do código HTML;
 cabeçalho: definem o título das linhas, colunas ou a ambas. A fonte do cabeçalho geral-
mente é diferente do resto da tabela dando destaque a essa parte. Seu uso também é opcional;
 células: são cada um dos espaços quadrangulares. Nas células podem ser exibidos os
dados comuns ou um cabeçalho da tabela;
 dados: são os valores efetivos da tabela. O total de uma tabela é composto pela combi-
nação dos cabeçalhos com os dados.
Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Tabela1</title>
</head>
<body>
<table border="1" style="border-collapse:collapse">
<caption style="font-weight:bold">Dados físicos</caption>
<tr style="text-align:center">
<th>Nome</th>
<th>Altura</th>
<th>Peso</th>
<th>Cor dos olhos</th>
</tr>
<tr style="text-align:center">
<td text-align="center">Alisson</td>
<td>1,58 m</td>
<td>78 kg</td>
<td>castanhos</td>
</tr>
</table>
</body>
</html>
4
https://pt.wiktionary.org/wiki/tabela

Telefones: (61) 3901-6767 / 3901-3534
23
Figura 16: Partes de uma tabela
Tags básicas de uma tabela
Quanto ao código HTML, as tabelas são composta por três elementos básicos:
 <table> e </table>
Tag de abertura e fechamento da tabela, respectivamente.
As demais tags devem estar entre essas duas tags.
 <tr> e </tr> (table row)
A tag <tr> insere uma linha da tabela. Cada linha deve ser escrito usando-se as tags <tr> e
</tr>.
As linhas de uma tabela não precisam ter necessariamente o mesmo número de células.
 <td> e </td> (table data)
A tag <td> define o conteúdo existente nas células de uma linha. As tags <td> devem estar
sempre entre as tags <tr> e</tr>.
A tag <th> (title heading)
Podemos ainda utilizar as tag <th> e </th> (title heading) para definir títulos para as colunas da
célula.
Essa tags são semelhantes as tags <td> e </td>; a diferença é que o conteúdo da célula é exi-
bido no estilo negrito e centralizado.
Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<title>Exemplo de Tabela </title>
<style>
table, th, tr, td{
text-align:center;
}
</style>
</head>
<body>
<table border="1" width="250px">
<th>Coluna 1</th>
<th>Coluna 2</th><th>Coluna 3</th>
<tr>
<td>linha 1</td>
<td>linha 1</td>
<td>linha 1</td>
</tr>

Telefones: (61) 3901-6767 / 3901-3534
24
<tr>
<td>linha 2</td>
<td>linha 2</td>
<td>linha 2</td>
</tr>
</table>
</body>
</html>
Figura 17: Uso do atributo “<th>”
A tag <caption>(título da tabela)
A tag <caption> insere um título á tabela.
Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Tabela 5</title>
</head>
<body>
<table border="1" width="400px" align="center">
<caption style="font-family:verdana;font-weight:bold">Título da Tabela</caption>
<tr height="40px" align="center">
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
</table>
</body>
</html>

Telefones: (61) 3901-6767 / 3901-3534
25
Figura 18: tag <caption>
Formatação de tabelas
As tabelas podem ser formatadas usando-se alguns atributos em seus elementos. No entanto, cada
elemento deve receber atributos específicos, ou seja, o elemento <table> tem atributos que só podem
ser usados nele e assim por diante.
Atributos do elemento <table>
A tag <table> pode receber os seguintes atributos:
 border: especifica a largura da linha das bordas que separam as células da tabela. Se não
for especificado este parâmetro, não será exibida uma borda para a tabela.
 cellspacing: especifica o espaçamento, em pixels, entre as células.
 cellpadding: especifica o espaçamento, em pixels, entre o conteúdo e a borda da célula.
 width: especifica a largura da tabela em pixels ou em porcentagem relativa à largura da ja-
nela.
 height: especifica a altura da tabela em pixels ou em porcentagem relativa à altura da pá-
gina.
 align: define o alinhamento da tabela na página. As opções são: left, center e right.
 bgcolor: especifica a cor de fundo de toda a tabela.
 bordercolor: define a cor de borda da tabela. Só funciona se algum valor diferente de zero
tiver sido atribuído ao atributo border.
 background: define uma imagem como plano de fundo para toda a tabela.
Atributos do elemento <tr>
 align: especifica o alinhamento horizontal do conteúdo das células. As opões são: left, right, center e
justify.
 valign: especifica o alinhamento vertical do conteúdo das células. As opções são: top, middle, bottom
e baseline.
 bgcolor: especifica a cor de fundo para a linha.
 bordercolor: define a cor de borda das células da linha.
 background: define uma imagem como plano de fundo para a linha.
 height: especifica a altura da linha em pixels.

Telefones: (61) 3901-6767 / 3901-3534
26
Atributos do elemento <td>
 align: especifica o alinhamento horizontal do conteúdo da célula. As opções são: left, right,
center e justify.
 valign: especifica o alinhamento vertical do conteúdo da célula. As opções são: top, middle,
bottom e baseline.
 nowrap: - evita a quebra de linha do conteúdo da célula.
 colspan: permite aumentar a largura de uma célula fazendo com que ela ocupe colunas ad-
jacentes. Deve ser especificado o número de colunas que a célula irá ocupar.
 rowspan: Permite aumentar a altura de uma célula fazendo com que ela ocupe linhas ad-
jacentes. nele deve ser especificado o número de linhas que a célula irá ocupar.
 width: especifica a largura da célula em pixels ou em porcentagem relativa à largura da ta-
bela.
 height: especifica a altura da coluna em pixels.
 bgcolor: especifica a cor de fundo da célula.
 bordercolor: define a cor de borda da célula.
 background: define uma imagem como plano de fundo para a célula.
Atributos do elemento <th>
 align: especifica o alinhamento horizontal do conteúdo da célula. As opções são: left, right,
center e justify.
 valign: especifica o alinhamento vertical do conteúdo da célula. As opções são: top, middle,
bottom e baseline.
 nowrap: - evita a quebra de linha do conteúdo da célula.
 colspan: permite aumentar a largura de uma célula fazendo com que ela ocupe colunas ad-
jacentes. Deve ser especificado o número de colunas que a célula irá ocupar.
 rowspan: Permite aumentar a altura de uma célula fazendo com que ela ocupe linhas ad-
jacentes. nele deve ser especificado o número de linhas que a célula irá ocupar.
 width: especifica a largura da célula em pixels ou em porcentagem relativa à largura da ta-
bela.
 height: especifica a altura da célula em pixels ou em porcentagem.
 bgcolor: especifica a cor de fundo da célula.
 bordercolor: define a cor de borda da célula.
 background: define uma imagem como plano de fundo para a célula.
Mesclagem de células de tabelas
Podemos aumentar a largura ou a altura de uma célula para tornar a aparência da tabela mais
bem definida. Para isso usamos os atributos “colspan” e “rowspan”
Atributo Colspan
O atributo colspan é aplicado na tag <td>. Permite mesclar uma célula com suas colunas adja-
centes, aumentando sua largura.
Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Tabela1 - Mesclagem com colspan</title>
</head>
<body>
<h1>Mesclagem de células com Colspan</h1>
<th colspan="3" nowrap>Tabela 1 - Sem células (colunas) mescladas</th>
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr><tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>

Telefones: (61) 3901-6767 / 3901-3534
27
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
</table><br/>
<th colspan="3" nowrap>Tabela 2 - Com células (colunas) mescladas</th>
<tr>
<td colspan="3" bgcolor="#cccfff">Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
</table>
</body>
</html>
Figura 19: Mesclagem de células com “colspan”
Atributo Rowspan
O atributo rowspan mescla as células de uma tabela aumentando a altura da linha, ocupando
as linhas adjacentes.

Telefones: (61) 3901-6767 / 3901-3534
28
Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Tabela 2 - Mesclagem com Rowspan</title>
</head>
<body>
<h1>Mesclagem de células com Rowspan</h1>
<th colspan="3">Tabela com linhas mescladas</th>
<tr>
<td rowspan="5">Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
<tr>
<td>Coluna 1</td><td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
<br/>
<br/>
</body>
</html>
Figura 20: Mesclagem de células com “rowspan”

Telefones: (61) 3901-6767 / 3901-3534
29
Vejamos agora um exemplo de uma tabela em que foi usado os atributos colspan, rowspan e
outros:
<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<body>
<table cellspacing="0" cellpadding="5px" border="1" align="center" width="30%" height="80%">
<tr>
<th colspan="3" nowrap="nowrap" bgcolor="#FFFF99">Tabela de Contas e Saldos</th>
</tr>
<tr>
<th bgcolor="#FFCCFF">Tipo de Despesa</th>
<th bgcolor="#FFCCFF">Descrição</th>
<th bgcolor="#FFCCFF">Valor</th>
</tr>
<tr>
<td rowspan="5" bgcolor="#CCFFFF">Doméstica</td>
<td>Compras do Mês</td>
<td>$ 280,00</td>
</tr>
<tr>
<td>Aluguel</td>
<td>$ 450,00</td>
</tr>
<tr>
<td>Luz</td>
<td>$ 120,00</td>
</tr>
<tr>
<td>Água</td>
<td>$ 111,00</td>
</tr>
<tr>
<td>Telefone</td>
<td>$ 90,00</td>
</tr>
<tr>
<td rowspan="2" bgcolor="#CCFFFF">Externa</td>
<td>Gasolina</td>
<td>$ 450,00</td>
</tr>
<tr>
<td>Almoço</td>
<td>$ 200,00</td>
</tr>
<tr>
<td colspan="2" align="right">Subtotal</td>
<td bgcolor="#FFFF00">$ 1.701,00</td>
</tr>
</table>
</body>
</html>

Telefones: (61) 3901-6767 / 3901-3534
30
Figura 21: Tabela formatada
Os elementos colgroup e col
As colunas de uma tabela podem ser divididas em grupos. Essa divisão facilita uma formatação
específica para cada grupo de colunas.
Para agrupar colunas de uma tabela usamos os elementos <colgroup> e <col>.
O atributo span do elemento col define a quantidade de colunas de um determinado grupo.
A Tag colgroup
A tag <colgroup> é usada para agrupar colunas de uma tabela para formatação e é útil para
aplicação de estilos de colunas inteiras, em vez de repetir os estilos para cada célula, para cada li-
nha.
A tag <colgroup> só pode ser usado dentro de um elemento <table>.
A tag <colgroup> é suportado em todos os principais navegadores.
A sintaxe básica do elemento colgroup é:
<table>
<colgroup></colgroup>
<tr>
<td></td>
</tr>
</table>
A Tag col
A tag col é usada em tabelas para definir atributos para todas as células em uma coluna ou
grupo de colunas. Define valores de atributos para uma ou mais colunas em uma tabela evitando-se
assim, a repetição do mesmo ou de vários estilos para cada célula e para cada linha.
A tag <col> só pode ser utilizado dentro de um <table> ou um elemento de <colgroup>.
A tag <col> é suportado por todos os principais navegadores.
Tanto para a tag <colgroup> como para a tag <col> o melhor caminho é adicionar o atributo de
estilo para a marca <col> e aplicar as regras de CSS para formatar as propriedades desejadas (cores
de fundos, largura, bordas, fontes etc.
Exemplos:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Exemplo de agrupamento de colunas</title>
<title>Colgroup e Col</title>
<style>
tr,.centro{
text-align:center;
}

Telefones: (61) 3901-6767 / 3901-3534
31
caption{
font-weight:bold;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<caption>Carros Japoneses</caption>
<colgroup>

<col span="2" style="background-color:#ccc" width="100">

<col class="centro" style="background-color: #ffff66" width="100">
</colgroup>
<tr>
<th>Toyota</th>
<th>Honda</th>
<th>Nissan</th>
</tr>
<tr>
<td>Corolla</td>
<td>Civic</td>
<td>Sentra</td>
</tr>
</table>
</body>
</html>
Figura 22: Uso de colgroup
O primeiro abrange duas colunas e define a cor de fundo para cinza, o segundo define a cor de
fundo para amarelo.
Exemplo:
O exemplo abaixo define a cor de fundo das três colunas com o colgroup e tags col.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Uso de Colgroup</title>
<meta charset="UTF-8" />
</head>
<table border="1">
<colgroup>

Telefones: (61) 3901-6767 / 3901-3534
32
<col span="2" style="background-color: #33cc66" />
<col style="background-color:yellow" />
</colgroup>
<tr>
<th>Registro</th>
<th>Título</th>
<th>Preço</th>
</tr>
<tr>
<td>3639572</td>
<td>Aprenda HTML</td>
<td>R$52,00</td>
</tr>
</table>
</body>
</html>
Figura 23: Uso de colgroup e col
Os elementos <tbody>, <thead> e <tfoot>
Os elementos <thead>, <tbody> e <tfoot> são necessários em tabelas extensas, que ocupam
mais de uma página. Permitem uma melhor estruturação de tabelas, o que é muito importante para
separar e documentar seções da tabela.
O uso desses elementos permite que as linhas contidas nos elementos <thead> e <tfoot> se-
jam fixas no navegador, permitindo que as células de dados contidas no <tbody> ‘rolem’ entre as du-
as e que quando impressas, as tabelas mostrem o cabeçalho e o rodapé em todas as páginas.
Os elementos <thead>, <tfoot> e <tbody> de uma tabela devem ter o mesmo número de colu-
nas - <td></td>
O elemento <thead> - (Table Head Element):
Agrupa uma ou mais linhas de cabeçalho da tabela. O elemento <thead> engloba tanto os ca-
beçalhos, quanto os títulos da tabela.
No caso de uso do elemento <thead>, devemos usar as tags <th> ao invés de <td> para inserir
os títulos das colunas da tabela, se houver. Caso tenha uma linha de subtítulos as células desta linha
poderão ser do tipo <td></td>.
Uma das vantagens em se usar a tag <thead></thead> é que no caso de uma tabela muito
longa a ser impressa, o cabeçalho se repetirá em cada página de impressão.
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Thead</title>

Telefones: (61) 3901-6767 / 3901-3534
33
<style>
tr,th,td{
text-align:center;
}
</style>
</head>
<body>
<table cellspacing="1" cellpadding="2" align="center" style="background: #000000; border: 1px
solid #333333; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; font-size: 11px;">
<caption style="font-weight:bold">Produtos Recebidos</caption>
<thead>
<tr align="center" style="background: #FFCC00; font-weight: bold;">
<th>Data</th>
<th>Prod A<br />Quantidade</th>
<th>Nível de<br />Qualidade</th>
<th>Prod B<br />Quantidade</th>
<th>Prod C<br />Quantidade</th>
<th>Produto D<br />Quantidade</th>
</tr>
</thead>
<tr style="background: #FFFF99;">
<td align="center">30/05/11</td>
<td align="right">100</td>
<td>Bom</td>
<td>Ótimo</td>
<td>Bom</td>
<td>Bom</td></tr>
<td>31/05/11</td>
<td>Bom</td>
<td>Bom</td>
<td>Ótimo</td>
<td>Bom</td>
</tr>
</table>
</body>
</html>

Telefones: (61) 3901-6767 / 3901-3534
34
Figura 24: Uso do elemento <thead>
O elemento <tbody> - (Table Body Element):
O elemento <tbody> define o corpo da tabela que contém as células de dados. Uma tabela po-
de conter mais de um elemento <tbody> separando os diferentes grupos de dados.
Indicam ao browser que as linhas devem ser exibidas após o elemento <thead></thead> e an-
tes das células contidas no elemento <tfoot></tfoot>.
Todos as células de dados devem estar dentro da tag <tbody>.
A tag <tbody> deve vir imediatamente depois da tag <tfoot></tfoot>.
Pode-se definir mais de um elemento <tbody> por tabela.
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Tbody</title>
<style>
tr,th,td{
text-align:center;
}
</style>
</head>
<body><table cellspacing="1" cellpadding="2" align="center" style="background: #000000; bor-
der: 1px solid #333333; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; font-size:
11px;">
<thead>
<tr style="background: #FFCC00;">
<th>Data</th>
<th>Prod D<br />Quantidade</th>
<th>Nível de<br />Qualidade</th></tr></thead>
<tfoot>
<tr style="background: Olive">
<td>Média</td>
<td>Bom</td>

Telefones: (61) 3901-6767 / 3901-3534
35
<td>Bom</td>
<td>Ótimo</td>
<td>Bom</td></tr></tfoot>
<tbody>
<td>Bom</td>
<td>Ótimo</td>
<td>Bom</td>
<td>Bom</td></tr>
<td>31/05/11</td>
<td>Bom</td>
<td>Bom</td>
<td>Ótimo</td>
<td>Bom</td>
</tr>
</tbody>
</table>
</body>
</html>
O elemento <tfoot> - (Table Foot Element):
O elemento <tfoot> permite o agrupamento de tags no final da tabela. Geralmente exibem in-
formações como a soma de valores, fonte de dados e outras.
Só pode haver um elemento <tfoot> na tabela.
Esse elemento indica ao browser que essa é a última linha de uma tabela.
No código HTML o elemento <tfoot> deve aparecer antes do elemento <tbody>.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Tbody</title>
<style>
tr,th,td{
text-align:center;
}
</style>
</head>
<body>
<table cellspacing="1" cellpadding="2" align="center" style="background: #000000; border: 1px
solid #333333; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; font-size: 11px;">
<thead>
<tr style="background: #FFCC00;">
<th>Data</th>

Telefones: (61) 3901-6767 / 3901-3534
36
<th>Prod D<br />Quantidade</th>
</tr>
</thead>
<tfoot>
<tr style="background: Olive">
<td>Média</td>
<td>Bom</td>
<td>Bom</td>
<td>Ótimo</td>
<td>Bom</td>
</tr>
</tfoot>
<td>Bom</td>
<td>Ótimo</td>
<td>Bom</td>
<td>Bom</td>
</tr>
<td>31/05/11</td>
<td>Bom</td>
<td>Bom</td>
<td>Ótimo</td>
<td>Bom</td>
</tr>
</table>
</body>
</html>
Figura 25: Uso do elemento <tfoot>

Telefones: (61) 3901-6767 / 3901-3534
37
Referências:
 Aprendendo CSS e HTML. Disponível em
http://www.mundoblogger.com.br/categoria/iniciantes/aprendendo-css-e-html/page/2>. Acesso em 09
de abril de 2016.
 Codex - Seu wiki de referência para tecnologias web. Disponível em:
<http://www.codex.wiki.br/Html/TagCol>. Disponível em 10 de abril de 2016.
 Codex - Seu wiki de referência para tecnologias web. Disponível em:
<http://www.codex.wiki.br/Html/Tabelas>. Acesso em 10 de abril de 2016.
 FILHO, José Timóteo Teixeira Filho. Hmtl com estilo. Disponível em:
<http://www.portaldefinancas.com/html/thead.html>. Acesso em 11 de abril de 2016.
 FLATSCHART, Fábio. Livro Html5 - Embarque Imediato. Disponível em:
http://flatschart.com/html5/lista.html#5>. Acesso em 09 de abril de 2016.
 HTML com Acessibilidade. Disponível em: <http://www.fundacaobradesco.org.br/vv-
apostilas/cursoHTML/Sumario.htm>. Acesso em 08 de abril de 2016.
 HTML Progressivo. Curso Online Grátis - Tutorial de HTML, CSS & HTML5. Disponível
em:<http://www.htmlprogressivo.net/p/indice-da-apostila-html-progressivo.html>. Acesso em 08 de
abril de 2016.
 HTML(5) Tutorial. Disponível em: <http://www.w3schools.com/>. Acesso em 08 de abril de 2016.
 SILVA, Maurício Samy. Introdução às CSS. Disponível em:
<http://www.maujor.com/tutorial/intrtut.php>. Acesso em 08 de abril de 2016.

Apostila html listas, links, tabelas

Mais conteúdo relacionado

Semelhante a Apostila html listas, links, tabelas

Apostila html listas, links, tabelas