Listas e Tabelas
No HTML existem elementos específicos
para a criação de listas, que podem ser listas ordenadas
(OL), listas sem ordenação (UL), ou listas de definições
(DL). Um detalhe interessante é que podem ser criadas listas aninhadas,
ou seja, listas dentro de listas.
A seguir veremos as características
de cada uma delas.
...
Elementos delimitadores de listas
ordenadas (OL - Ordered Lists.) A estrutura das listas ordenadas
é bastante simples - os itens são apresentados em linhas
consecutivas, e precedidos por umanumeração atribuída
pelo browser.
Elemento número 1
Elemento número 2
.
.
.
Elementos delimitadores de lista sem
ordenação (UL - Unordered Lists). A estrutura das listas
sem ordenação é a mesma das listas ordenadas, sendo
que na apresentação os itens serão precedidos por
um marcador (bullet). No caso de listas sem ordenação aninhadas
(listas dentro de listas), o browser utilizará um marcador (bullet)
para os itens de cada lista.
Elemento número 1
Elemento número 2
.
.
.
Como já foi visto, é
o elemento que define um item de uma lista ordenada ou sem ordenação.
O seu conteúdo pode ser simplesmente texto, mas também outras
listas, imagens, links, etc.
Exemplo:
Listas
Elemento número 1
Elemento número 2
Elemento número 1
Elemento número 2
Veja como ficou: EXEMPLO 3
Tabelas
Elementos de formação de
tabelas fazem parte da especificação do HTML 3.0, e representam
uma interessante ferramenta na construção de documentos de
WEB. São suportadas por diversos browsers, como o Netscape (Apartir
da versão 1.1) e o pessoal que usa Internet Explorer QUE SE EXPLODA!.
São largamente utilizadas na web. Nas células de uma tabela
podemos inserir tudo o que normalmente faz parte do corpo de um documento
HTML - textos, links de hipertexto, imagens, e até outras tabelas
Elementos Básicos de Tabelas:
São as marcas que englobam
a definição de uma tabela. Todas as demais marcas referentes
a tabelas - título, linhas e células - somente serão
condsideradas se incluídas entre
...
Trata-se de um elemento opcional
que define o título da tabela, e deve constar entre marcas que a
definem, mas fora das marcas que definem linhas e colunas. Como padrão,
o título é apresentado acima da tabela e centralizado.
...
TR - Table Row - Linha de tabela. Este é o elemento
utilizado na definição de linhas de tabelas. Tabelas são
definidas em linhas, sendo as linhas compostas de células. O número
de linhas de uma tabela corresponde ao número de |
existentes.
... |
TD - Table Data - Dados de Tabela. Marcas que delimitam
as células que compões as linhas, e assim sendo devem estar
inseridas entre marcas de linhas. Uma célula pode conter tudo o
que normalmente consta do corpo de um documento HTML - links, referências
a imagens, textos, e até tabelas.
Por default, o alinhamento de uma
célula é à esquerda, horizontalmente, e centralizado
verticalmente; e caso o número de células varie de
uma linha para outra, as linhas com menos células são completadas
à direita com células em branco.
... |
TH - Table Header - Cabeçalho de Tabela.
elemento que define células de cabeçalho. Células
de cabeçalho têm características idênticas a
células de dados definidas por , a não ser pelo alinhamento
default horizontal, que é centralizado, e pela utilização
de fonte em negrito.
Atributos
Com os elementos básicos descritos
acima, você já pode construir uma tabela e visualizá-la
no seu browser. Estes elementos básicos, enteretanto, possuem alguns
atributos que permitem maior controle sobre alguns detalhes da apresentação
da tabela. Esses atributos são inseridos dentro do comando .
Todos são opcionais, mas você certamente vai querer fazer
uso de alguns deles.
Tabelas são apresentadas,
como padrão, sem bordas. A presença do atributo BORDER indica
justamente que deve ser desenhada umaborda em torno de cada célula
da tabela.
BORDER=... - A especificação
da espessura da borda em pixels vem a ser uma extensão Netscape.
(I.e que se EXPLODA!)
Um exemplo :
<TABLE WIDTH=...>
Especifica a largura da tabela,
que pode ser definida em pixels ou em percentual referenbte à largura
da janela.
Caso não seja especificado, o próprio browser
se encarrega de determinar a largura mais adequada.
Um exemplo:
Define o espaço entre as células,
ou seja, a largura das linhas de grade (as bordas que envolvem as células).
Especificado em pixels.
Um exemplo:
Determina, em pixels, o espaço
a ser deixado entre o conteúdo e as bordas da célula.
Um exemplo:
|