Deblogger

Tabelas, listas e formulários no HTML

No artigo anterior já falamos sobre tags de texto, link e imagem no HTML. Agora, vamos ver alguns algumas outras tags que são essenciais na hora de criar um site com HTML:


Tabelas no HTML

Tabelas são elementos utilizados com frequência para exibir dados de forma organizada em linhas e colunas.

Tags

Em resumo, as tabelas são formadas pelas seguintes tags:

  • <table>: para delimitar a tabela;
  • <caption>: geralmente é usado como um breve resumo, uma explicação sobre o que será exibido na tabela. Esse título será agregado, como se fizesse parte da tabela, ficando na parte superior da tabela.
  • <tr>: delimita as linhas (significa “table rows”);
  • <th>: indica as células do cabeçalho da tabela (significa “table header”);
  • <td>: usado para formar as colunas (significa “table data”).

Um exemplo simples de um código de uma tabela é:

<table>
    <caption>Exemplo de Tabela</caption>
    <tr>
        <th>L1, Coluna 1 (Cabeçalho)</th>
        <th>L1, Coluna 2 (Cabeçalho)</th>
    </tr>
    <tr>
        <td>L2, Coluna 1</td>
        <td>L2, Coluna 2</td>
    </tr>
    <tr>
        <td>L3, Coluna 1</td>
        <td>L3, Coluna 2</td>
    </tr>
</table>

Dessa forma, temos a seguinte visualização:

L1, Coluna 1 (Cabeçalho)L1, Coluna 2 (Cabeçalho)
L2, Coluna 1L2, Coluna 2
L3, Coluna 1L3, Coluna 2

Lembre-se: o meu blog possui CSS que deixa a tabela com bordas, espaçamento, entre outras características visualmente mais agradáveis. Se você tentar colocar o mesmo código apresentado em um arquivo HTML, você verá algo mais ou menos assim:

Lembre-se de focar na sintaxe por enquanto

Nesse sentido, existem ainda outras três tags utilizadas para delimitar, de forma mais organizada, as partes da tabela:

  • <thead>: cabeçalho;
  • <tbody>: corpo;
  • <tfoot>: rodapé.
Atributos

Além disso, podemos definir alguns atributos às tags, como o colspan que define a quantidade de colunas que aquela célula ocupará, e o rowspan que define a quantidade de linhas que aquela célula ocupara. Dessa forma temos um controle maior das linhas e colunas da tabela. A seguir temos um exemplo de uma tabela mais complexa, que utiliza as tags de organização e utilizam os atributos: rowspan, de modo a indicar dois preços de feijão diferentes; e colspan na célula que contém o texto “Total“, a fim de ocupar toda a parte de baixo da tabela:

<table>
    <thead>
        <tr>
            <th>Produto</th>
            <th>Preço</th>
            <th>Quantidade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">Tênis</td>
            <td>R$ 159,99</td>
            <td>1</td>
        </tr>
        <tr>
            <td>R$99,90</td>
            <td>0</td>
        </tr>
        <tr>
            <td>Camiseta</td>
            <td>R$ 49,90</td>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Total</td>
            <td>R$ 259,79</td>
        </tr>
    </tfoot>
</table>

Dessa forma, temos a seguinte visualização:

Produto Preço Quantidade
Tênis R$ 159,99 1
R$99,90 0
Camiseta R$ 49,90 2
Total R$ 259,79

Em conclusão, são muitas as tags e atributos que podem ser usados na construção de tabelas no HTML. Por isso, nem todas estão citadas aqui, mas você pode consultar uma lista completa no artigo da w3schools (que está em inglês).


Listas em HTML

Listas são elementos usados para organizar e ordenar itens que estão relacionados de alguma forma. No HTML é possível criar três tipos de listas:

1. Lista ordenada

Primeiramente, as listas ordenadas utilizam a tag <ol>. Dessa forma, as listas apresentam números à esquerda, ordenando os itens, e sua sintaxe fica da seguinte forma:

<ol>
    <li>Primeiro</li>
    <li>Segundo</li>
    <li>Terceiro</li>
</ol>

Assim, sua representação se dará da seguinte forma:

  1. Primeiro
  2. Segundo
  3. Terceiro

Nesse tipo de lista podemos definir o parâmetro type, que ordena a lista por :

  • 1 – números arábicos (1, 2, 3, 4…)
  • a – letras minúsculas (abcd…);
  • A – letras maiúsculas (ABCD…);
  • i – números romanos minúsculos (iiiiiiiv….)
  • I – números romanos maiúsculos (IIIIIIIV…)

Nesse tipo de lista podemos definir, também, o parâmetro start, que define em qual número ou letra essa lista se inicia. Importante ressaltar que independente do parâmetro type escolhido, o parâmetro start utilizará sempre números arábicos para sua definição. Por exemplo, se quisermos uma lista que comece com a letra c, devemos definir o parâmetro type como “a” e o parâmetro start como “3“:

<ol type="a" start="3">
   <li>Item "c"</li>
   <li>Item "d"</li>
   <li>Item "e"</li>
</ol>

Assim, sua representação se dará da seguinte forma:

c. Item “c”

d. Item “d”

e. Item “e”

2. Lista não ordenada

As listas não ordenadas utilizam a tag <ul>. Nela, as listas não apresentam números à esquerda, apenas pontuam os itens. Sua sintaxe fica da seguinte forma:

<ul>
    <li>Primeiro</li>
    <li>Segundo</li>
    <li>Terceiro</li>
</ul>

Assim, sua representação se dará da seguinte forma:

  • Primeiro
  • Segundo
  • Terceiro

Nas listas não ordenadas podemos usar o parâmetro type para modificar as demarcações de lista. Dessa forma temos quatro tipos:

  • disc – é a demarcação padrão: um círculo preenchido;
  • circle – círculo não-preenchido;
  • square – quadrado preenchido;
  • none – é a opção “sem demarcação”, que semanticamente está definindo uma lista, mas visualmente não aparece nenhum demarcador.
3. Listas de definição

Por último temos as listas de definição, que têm um comportamento um pouco diferente, uma vez que cada item é composto por um título (<dt>) e uma definição (<dd>). Igualmente ao que vemos em dicionários, nos quais temos os verbetes e suas definições. Dito isso, vamos a sua sintaxe:

<dl>
    <dt>Título 1</dt>
    <dd>Definição 1</dd>
    <dt>Título 2</dt>
    <dd>Definição 2</dd>
    <dt>Título 3</dt>
    <dd>Definição 3</dd>
</dl> 

Assim, sua representação se dará da seguinte forma:

Título 1

Definição 1

Título 2

Definição 2

Título 3

Definição 3


Formulários no HTML

Antes de mais nada, quando são usados os formulários? Os formulários são usados para integrar uma página HTML a algum processamento no lado servidor. Dessa forma, a página envia dados para uma aplicação, que os recebe, trata e retorna algum resultado. Ou seja, geralmente usamos este elemento para delimitar a área na qual se encontram os campos a serem preenchidos pelo usuário, que depois serão processamento no back-end (a página HTML é conhecida como front-end da aplicação).

Um exemplo de formulário com vários tipos de campos para entrada de dados e um botão para submetê-los ao servidor é:

<form>
    <input type="text" placeholder="Digite aqui"><br/>
    <input type="checkbox">Checkbox<br/>
    <input type="radio">Radio button<br/>
    <input type="range"><br/>
    <input type="submit" value="Enviar" id="botao-salvar">
</form>

Assim, sua representação se dará da seguinte forma:

Exemplo de formulário HTML
Exemplo de formulário

É importante lembrar que os formulários não tem função alguma se o HTML não contiver alguma linguagem de programação para processar os dados. Em uma próxima série de arquivos serão apresentados conceitos básicos de JavaScript, que permitirá que você insira lógica nos arquivos de HTML.


<div> e <span> no HTML

As tags div e span são duas das mais utilizadas no HTML, com objetivos distintos, para não dizer opostos, porém com grande importância para a composição do layout das páginas e formatação do texto.

<div>

As divs são normalmente utilizados para representarem containers para outros elementos, agrupando-os visualmente dentro de um bloco que pode conter dimensões e posição definidas. Todavia, por padrão, uma <div> não possui características visuais definidas, isso precisa ser feito com CSS a fim de atribuir bordas, cores, etc. Sua principal característica, no entanto, é que essa tag representa um elemento do tipo bloco, ou seja, que quando adicionado na página, automaticamente gera uma nova linha no layout (semelhante a um parágrafo), ao invés de ser alocado lateralmente nos demais componentes.

O código a seguir demonstra um uso básico das divs:

<input type="text">Nome
<input type="text">Sobrenome
<div><input type="text">Cidade</div> 
<div><input type="text">Estado</div>

Assim, sua representação se dará da seguinte forma:

NomeSobrenome
Cidade
Estado

Podemos verificar, nesse exemplo, que os inputs 1 e 2 ficaram em uma mesma linha (mesmo bloco), e houve quebra de linha (bloco) com os inputs 3 e 4.

<span>

Ao contrário do elemento <div>, a tag <span> é um elemento do tipo inline, ou seja, quando adicionado na página ele é inserido lateralmente após os demais componentes.

Assim como as divisórias, os elementos <span>, por padrão, não possuem nenhuma característica visual definida. Por isso, é necessário acrescentar CSS ao elemento se a sua intenção é mudar algo visualmente. Sendo assim, vou demonstrar o uso deste elemento em dois casos: primeiramente usando somente tag, sem nenhum atributo adicional, e em seguida, adicionando a ela uma aparência diferenciada com CSS.

<p>
    Uma frase simples <span>sem trecho em destaque.</span>
</p>
<p>
    Uma frase simples <span style="background: #ffff00;border-radius:5px;padding:5px;color:#18191a;">com trecho em destaque</span>.
</p>

Assim, sua representação se dará da seguinte forma:

Uma frase simples sem trecho em destaque.

Uma frase simples com trecho em destaque.

Não se preocupe com o código CSS por enquanto, colocamos no exemplo só para demonstrar uma usabilidade da tag <span>


No próximo artigo vamos sair um pouco da esfera de tags no HTML e ver um pouco sobre os caracteres especiais. Por isso, se você achar que precisa revisar a utilização desses elementos, treine antes de seguir com o tutorial. Dessa forma você fixa bem o conhecimento, embora não seja necessário memorizar tudo. Como eu disse anteriormente, a melhor forma de aprender uma linguagem é praticando.


Avalie:
4.5 (2)

Publicado por Mauro Oliveira

Desenvolvedor apaixonado por JavaScript, especialista em VueJS. Atualmente focado em padrões de projeto e código, estudando sobre testes unitários, Clean Code e segurança em aplicações Web, Mobile e Desktop.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *