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.


       
  1. Elemento número 1
       
  2. 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.


  •     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



         
    1. Elemento número 1
         
    2. 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 e

    ...
        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:

    HTML>

    Tabela








    Coluna1
    Coluna2
    Coluna3



    Veja como ficou: EXEMPLO 4

    <CAPTION ALIGN=...>
         Este atributo permite indicar se o título deve ser paresentado abaixo da tabela (ALIGN=bottom) ou acima (ALIGN= top). Neste último caso o atributo é dispensável, pois como já foi dito antes, o valor pré-determinado é que o título seja apresentado na posição superior.


        Indica se o conteúdo das células de uma linha deve estar alinhado horizontalmente à esquerda (ALIGN=left), à direita (ALIGN= right), ou centralizado (ALIGN= center). Por default, o alinhamento horizontal é à esquerda para células de dados, e centralizado para células de cabeçalho.


        Indica alinhamento vertical dentro das células de uma linha. Pode ser superior  (VALIGN= top), inferior (VALIGN= bottom), ou centralizado (VALIGN=middle). Por default, o alinhamento vertical das células é centralizado.


     Dentro de uma célula, estes atributos assumem os mesmos valores e possuem as mesmas funções que quando aplicados à uma linha inteira, sendo que o alinhamento definido aplica-se somente à própria célula. Caso seja definido uma alinhamento para a linha e outro para a célula, este último sobrepõe o primeiro.


        Quando este atributo encontra-se associado a uma célula, o browser entende que o texto dentro daquela célula não pode ser dividido em mais de uma linha. Significa que toda a coluna terá o mesmo tamanho que o texto nela contido. Este atributo deve ser utilizado com cuidado, para evitar colunas demasiadamente largas.


        Especifica o número de colunas de uma tabela a serem ocupadas por uma célula. Utilizado, portanto para expandir uma célula horizontalmente, tendo como default o valor 1 em todas as células. Se atrubuirmos COLSPAN=2 a uma célula, ela ocupará o seu espaço  e o espaço de mais uma célula para a direita, assim esta linha deverá possuir um célula a menos que as demais, já que uma de suas células "vale" por duas.


        Especifica o número de linhas a serem ocupada por uma célula. Utilizado para expandir uma célula verticalmente, também assume valor default de 1 em todas as células. A expansão ocorre para baixo. Assim ao atrubuir ROWSPAN=2 para uma célula, diminue em 1 o número de células da linha abaixo.

      Anterior                                                   VOLTAR                                                     Próxima