Estruturando Conteúdo Web: Tabelas e Formulários em HTML

Criação de Tabelas com HTML

Tags Fundamentais para Tabelas

A estrutura de uma tabela em HTML é definida por um conjunto de tags específicas:

  • <table>: O contêiner principal para toda a tabela.
  • <tr>: Representa uma linha na tabela.
  • <th>: Define uma célula de cabeçalho na linha. O texto geralmente é exibido em negrito e centralizado.
  • <td>: Define uma célula de dados padrão em uma linha.
  • <caption>: Fornece um título ou descrição para a tabela.

Exemplo de Tabela Básica:


<table>
   <caption>Previsão do Tempo</caption>
   <tr>
       <th>Data</th>
       <th>Condição</th>
       <th>Recomendação</th>
   </tr>
   <tr>
       <td>2023-10-26</td>
       <td><img src="sol.png" alt="Ensolarado"></td>
       <td>Céu limpo, ótimo para atividades ao ar livre.</td>
   </tr>
   <tr>
       <td>2023-10-27</td>
       <td><img src="chuva.png" alt="Chuva leve"></td>
       <td>Pequena garoa prevista, lembre-se do guarda-chuva.</td>
   </tr>
</table>

Otimizando a Semântica das Tabelas

Para melhorar a estrutura e acessibilidade, utilize tags semânticas:

  • <thead>: Agrupa as linhas de cabeçalho da tabela.
  • <tbody>: Agrupa as linhas do corpo principal da tabela. Pode ser repetido para organizar dados.
  • <tfoot>: Agrupa as linhas de rodapé da tabela.

Estas tags não alteram a aparência visual, mas organizam o conteúdo de forma lógica.

Exemplo com Tags Semânticas:


<table>
   <caption>Previsão do Tempo</caption>
   <thead>
       <tr>
           <th>Data</th>
           <th>Condição</th>
           <th>Recomendação</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>2023-10-26</td>
           <td><img src="sol.png" alt="Ensolarado"></td>
           <td>Céu limpo, ótimo para atividades ao ar livre.</td>
       </tr>
       <tr>
           <td>2023-10-27</td>
           <td><img src="chuva.png" alt="Chuva leve"></td>
           <td>Pequena garoa prevista, lembre-se do guarda-chuva.</td>
       </tr>
   </tbody>
   <tfoot>
       <!-- Informações adicionais do rodapé podem ir aqui -->
   </tfoot>
</table>

Controle de Aparência: Bordas e Espaçamento

Atributos como border, cellpadding e cellspacing (embora obsoletos em favor de CSS) controlam a aparência da tabela:

  • border: Define a espessura da borda da tabela.
  • cellpadding: Controla o espaço interno de cada célula.
  • cellspacing: Controla o espaço entre as células.

Exemplo com Atributos de Estilo (Obsoletos):


<table border="2" cellpadding="15" cellspacing="10">
   <caption>Previsão do Tempo Detalhada</caption>
   <thead>
       <tr>
           <th>Data</th>
           <th>Condição</th>
           <th>Recomendação</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>2023-10-26</td>
           <td><img src="sol.png" alt="Ensolarado"></td>
           <td>Céu limpo, ótimo para atividades ao ar livre.</td>
       </tr>
       <tr>
           <td>2023-10-27</td>
           <td><img src="chuva.png" alt="Chuva leve"></td>
           <td>Pequena garoa prevista, lembre-se do guarda-chuva.</td>
       </tr>
   </tbody>
</table>

Combinando Células

É possível mesclar células para criar layouts mais complexos:

  • colspan: Atributo para fazer uma célula se estender por várias colunas.
  • rowspan: Atributo para fazer uma célula se estender por várias linhas.

Exemplo de Combinação de Colunas (colspan):


<table border="1">
   <caption>Vendas Mensais</caption>
   <thead>
       <tr>
           <th colspan="2">Produto</th>
           <th>Janeiro</th>
           <th>Fevereiro</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td rowspan="2">Eletrônicos</td>
           <td>Smart TV</td>
           <td>150</td>
           <td>160</td>
       </tr>
       <tr>
           <td>Smartphone</td>
           <td>500</td>
           <td>520</td>
       </tr>
   </tbody>
</table>

Exemplo de Combinação de Linhas (rowspan):


<table border="1">
   <caption>Histórico de Pedidos</caption>
   <thead>
       <tr>
           <th>ID Pedido</th>
           <th>Cliente</th>
           <th>Data</th>
           <th>Status</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td rowspan="2">#1001</td>
           <td rowspan="2">Maria Silva</td>
           <td>2023-10-20</td>
           <td>Enviado</td>
       </tr>
       <tr>
           <td>2023-10-25</td>
           <td>Entregue</td>
       </tr>
       <tr>
           <td>#1002</td>
           <td>João Santos</td>
           <td>2023-10-22</td>
           <td>Processando</td>
       </tr>
   </tbody>
</table>

Alinhamento de Conteúdo em Células

Os atributos align e valign (também obsoletos em favor de CSS) controlam o posicionamento do conteúdo:

  • align: Define o alinhamento horizontal (left, center, right).
  • valign: Define o alinhamento vertical (top, middle, bottom).

Estes atributos podem ser aplicados a diferentes tags (<table>, <tr>, <th>, <td>) com efeitos distintos.

Construindo Formulários Interativos

Tags Essenciais para Formulários

Formulários permitem a coleta de dados do usuário. As tags principais são:

  • <form>: O contêiner principal que engloba todos os elementos do formulário.
  • <input>: Um campo de entrada versátil. Seu comportamento é determinado pelo atributo type.

Tipos Comuns de <input>:

  • text: Campo de texto simples.
  • password: Campo para senhas (caracteres ocultos).
  • checkbox: Caixa de seleção para múltiplas opções.
  • radio: Botão de opção para seleção única dentro de um grupo (definido pelo atributo name).
  • file: Permite o upload de arquivos.
  • submit: Botão para enviar os dados do formulário.
  • reset: Botão para limpar os campos do formulário.

Exemplo de Estrutura de Formulário:


<form action="/processar-dados" method="post">
   <label for="nome">Nome:</label>
   <input type="text" id="nome" name="nome_usuario"><br>

   <label for="senha">Senha:</label>
   <input type="password" id="senha" name="senha_usuario"><br>

   <p>Interesses:</p>
   <input type="checkbox" id="musica" name="interesses" value="musica">
   <label for="musica">Música</label><br>
   <input type="checkbox" id="esportes" name="interesses" value="esportes">
   <label for="esportes">Esportes</label><br>

   <p>Gênero:</p>
   <input type="radio" id="masculino" name="genero" value="masculino">
   <label for="masculino">Masculino</label><br>
   <input type="radio" id="feminino" name="genero" value="feminino">
   <label for="feminino">Feminino</label><br>

   <label for="arquivo">Anexar arquivo:</label>
   <input type="file" id="arquivo" name="arquivo_anexo"><br>

   <input type="submit" value="Enviar">
   <input type="reset" value="Limpar">
</form>

Atributos Importantes de Formulários

action e method

  • action: Especifica a URL para onde os dados do formulário serão enviados quando submetido.
  • method: Define o método HTTP usado para enviar os dados (GET ou POST). POST é geralmente preferível para dados sensíveis ou grandes volumes.

<form action="/salvar-cadastro" method="post">
   <!-- ... campos do formulário ... -->
   <input type="submit" value="Cadastrar">
</form>

checked e selected

  • checked: Usado em <input type="checkbox"> ou <input type="radio"> para pré-selecionar uma opção por padrão.
  • selected: Usado em <option> dentro de um <select> para pré-selecionar um item no menu suspenso.

<form>
   <input type="checkbox" name="termos" value="aceito" checked> Aceito os termos.<br>

   <select name="cidade">
       <option value="sp">São Paulo</option>
       <option value="rj" selected>Rio de Janeiro</option>
       <option value="bh">Belo Horizonte</option>
   </select>
</form>

disabled

O atributo disabled impede que o usuário interaja com um elemento de formulário (input, select, textarea, button). O valor desse campo não é enviado com o formulário.


<form>
   <input type="text" value="Informação fixa" disabled>
   <button type="button" disabled>Botão desativado</button>
</form>

placeholder

O atributo placeholder fornece uma dica de texto dentro de um campo de entrada, que desaparece quando o usuário começa a digitar.


<form>
   <input type="text" placeholder="Digite seu e-mail aqui"><br>
   <textarea placeholder="Escreva sua mensagem..."></textarea>
</form>

Tags Adicionais para Formulários

<textarea>

Permite a entrada de texto em múltiplas linhas. Os atributos cols e rows definem as dimensões visíveis iniciais (embora CSS seja o método preferido para estilização).


<form>
   <label for="comentario">Seu comentário:</label><br>
   <textarea id="comentario" name="comentario_usuario" cols="40" rows="5"></textarea>
</form>

<select> e <option>

Criam listas suspensas (menus dropdown). O atributo multiple permite a seleção de múltiplos itens.

  • size: Define quantas opções são visíveis de uma vez. Se multiple for usado, size controla a altura da lista.
  • disabled em <option>: Torna uma opção específica não seleiconável.

<form>
   <label for="frutas">Escolha suas frutas favoritas:</label><br>
   <select id="frutas" name="frutas_favoritas" size="3" multiple>
       <option value="maca">Maçã</option>
       <option value="banana">Banana</option>
       <option value="laranja" selected>Laranja</option>
       <option value="uva" disabled>Uva (indisponível)</option>
       <option value="manga">Manga</option>
   </select>
</form>

<label>

Associa um rótulo a um controle de formulário (input, textarea, select). O atributo for no <label> deve corresponder ao id do controle. Isso melhora a acessibilidade, permitindo que o usuário clique no rótulo para focar ou ativar o controle.


<form>
   <div>
       <input type="radio" id="opcao_sim" name="resposta" value="sim">
       <label for="opcao_sim">Sim</label>
   </div>
   <div>
       <input type="radio" id="opcao_nao" name="resposta" value="nao">
       <label for="opcao_nao">Não</label>
   </div>
</form>

multiple em <input type="file">

Permite que o usuário selecione múltiplos arquivos para upload.


<form>
   <label for="galeria">Envie fotos:</label><br>
   <input type="file" id="galeria" name="arquivos_galeria[]" multiple>
</form>

Tags: HTML tabelas Formulários input select

Publicado em 7-23 13:36

Tags em Destaque

©2026 Doido Dev