Elementos de tabela, lista e formulário são fundamentais para a construção de páginas web interativas e com apresentação de dados organizada.

Estrutura de Tabelas HTML

Tabelas são comumente utilizadas para exibir dados de forma estruturada e legível, especialmente em interfaces de administração ou para apresentar informações complexas de maneira ordenada.

Sintaxe Básica de Tabela

A estrutura fundamental de uma tabela HTML é definida pelos seguintes elementos:

• <table>: Delimita todo o conteúdo da tabela.
• <tr>: Define uma linha dentro da tabela. Deve ser aninhado dentro de <table>.
• <td>: Reprseenta uma célula de dados padrão dentro de uma linha. O conteúdo textual ou outros elementos HTML são colocados aqui.

Células de Cabeçalho

Para criar células de cabeçalho, que geralmente aparecem na primeira linha ou coluna e são exibidas em negrito e centralizadas por padrão, utiliza-se a tag <th>.

<table>
 <tr>
   <th>Nome do Campo</th>
 </tr>
</table>
   

Atributos de Tabela

Embora a estilização de tabelas seja preferencialmente feita via CSS, alguns atributos HTML ainda podem ser mencionados:

• align: Controla o alinhamento da tabela (left, center, right).
• border: Define a presença de bordas. Um valor de 1 as exibe; um valor vazio ou ausente as remove.
• cellpadding: Espaçamento interno entre a borda da célula e seu conteúdo.
• cellspacing: Espaçamento entre as células adjacentes.
• width: Define a largura da tabela, podendo ser em pixels ou porcentagem.

Estrutura Semântica da Tabela

Para melhorar a organização e a acessibilidade, tabelas podem ser divididas em seções:

• <thead>: Engloba o cabeçalho da tabela, geralmente contendo os títulos das colunas.
• <tbody>: Contém o corpo principal da tabela, onde os dados são apresentados.

Ambas as tags devem estar dentro de <table>.

Mesclagem de Células

É possível combinar múltiplas células em uma única:

• colspan: Mescla células horizontalmente. O valor do atributo indica quantas colunas devem ser unidas.
• rowspan: Mescla células verticalmente. O valor do atributo indica quantas linhas devem ser unidas.

A célula que recebe os atributos colspan ou rowspan deve ser a mais à esquerda (para colspan) ou a mais acima (para rowspan) do grupo a ser mesclado. As células excedentes devem ser removidas.

<td colspan="2">Célula mesclada em duas colunas</td>
   

Estrutura de Listas HTML

Listas são ideais para apresnetar informações de forma ordenada ou não ordenada, sendo também úteis para layout.

Lista Não Ordenada (<ul>)

Utilizada quando a ordem dos itens não é importante. Cada item é definido por <li>.

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
</ul>
   

Observações:

• Dentro de <ul>, apenas <li> são permitidos diretamente.
• <li> pode conter outros elementos HTML.

Lista Ordenada (<ol>)

Empregado para sequências onde a ordem é relevante. Os itens são numerados automaticamente.

<ol>
 <li>Primeiro item</li>
 <li>Segundo item</li>
</ol>
   

Observações:

• Similar à lista não ordenada, <ol> só deve conter <li> diretamente.
• <li> atua como um contêiner.

Lista de Definição (<dl>)

Ideal para apresentar termos e suas respectivas definições ou descrições.

• <dt>: Define o termo ou nome.
• <dd>: Define a descrição ou explicação do termo.

<dl>
 <dt>Termo Exemplo</dt>
 <dd>Explicação detalhada do termo exemplo.</dd>
 <dd>Outra descrição relacionada.</dd>
</dl>
   

<dl> só pode conter <dt> e <dd>. Um <dt> pode ter múltiplos <dd> associados.

Estrutura de Formulários HTML

Formulários são essenciais para coletar dados do usuário e permitir a interação.

Formulário (<form>)

O elemento <form> delimita a área onde os controles de formulário (inputs, selects, etc.) são agrupados. Ele define como os dados serão enviados ao servidor.

<form action="processa_dados.php" method="post" name="formularioUsuario">
 <!-- Controles do formulário aqui -->
</form>
   

Atributos importantes:

• action: URL do script no servidor que processará os dados.
• method: Método HTTP para envio dos dados (get ou post).
• name: Nome do formulário, útil para referência via script.

Controles de Formulário

São os elementos que permitem a entrada ou seleção de dados pelo usuário.

Campo de Entrada (<input>)

Um dos elementos mais versáteis, seu tipo é definido pelo atributo type.

<input type="text" name="nome" value="Seu Nome">
<input type="checkbox" name="interesse" value="musica" checked>
<input type="radio" name="genero" value="masculino">
<input type="submit" value="Enviar">
   

Principais valores para type:

• text: Campo de texto simples.
• password: Campo de senha, oculta caracteres.
• radio: Botão de opção (permite selecionar uma opção em um grupo).
• checkbox: Caixa de seleção (permite selecionar múltiplos itens).
• submit: Botão para enviar o formulário.
• reset: Botão para limpar os campos do formulário.
• button: Botão genérico.
• file: Permite ao usuário selecionar um arquivo.

Atributos comuns:

• name: Nome do controle, usado para identificar o dado enviado.
• value: Valor padrão do controle ou o valor a ser enviado.
• checked: Para radio e checkbox, indica se está pré-selecionado.
• maxlength: Número máximo de caracteres permitidos em campos de texto.

Rótulo (<label>)

Associa um texto descritivo a um controle de formulário, melhorando a usabilidade e acessibilidade. Clicar no label foca ou ativa o controle associado.

<label for="emailUsuario">Email:</label>
<input type="email" id="emailUsuario" name="email">
   

O atributo for do label deve corresponder ao id do controle.

Lista Suspensa (<select>)

Permite ao usuário escolher uma opção a partir de uma lista.

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

Cada opção é definida por <option>. O atributo selected em uma <option> a define como padrão.

Área de Texto (<textarea>)

Usada para entrada de texto multilinha.

<textarea name="mensagem" rows="4" cols="50">
 Digite sua mensagem aqui...
</textarea>
   

Os atributos rows e cols definem as dimensões iniciais, mas são geralmente controlados por CSS.