Aula 03 de 10

Listas e Tabelas

Organizar informação em listas com marcadores, listas numeradas e tabelas de dados.

// entendendo

Como funciona

Lista não ordenada — pontos (•): usa <ul> como container e <li> para cada item.

Lista ordenada — números (1, 2, 3...): usa <ol> como container e <li> para cada item.

Tabela: <table> é o container, <tr> é uma linha, <th> é uma célula de cabeçalho (negrito) e <td> é uma célula de dados.

<ul>
  <li>Item sem ordem</li>
  <li>Outro item</li>
</ul>

<ol>
  <li>Primeiro passo</li>
  <li>Segundo passo</li>
</ol>

<table>
  <tr><th>Nome</th><th>Nota</th></tr>
  <tr><td>Ana</td><td>9.5</td></tr>
</table>

// mão na massa

Agora é com você

Lista de compras

Crie uma lista não ordenada com pelo menos 5 itens de uma lista de compras.

a3e1.html

Preciso de uma dica

<ul> abre a lista. Cada item é um <li>pão</li>. Feche com </ul>.

Observação: Use <ul> quando a ordem não importa (lista de ingredientes, de links). Use <ol> quando a sequência importa (receita passo a passo, ranking).

Receita passo a passo

Crie uma lista ordenada com os passos de uma receita simples (miojo, ovo frito, qualquer coisa).

a3e2.html

Preciso de uma dica

Igual à lista anterior, mas troca <ul> por <ol>. O navegador numera automaticamente.

Tabela de notas

Crie uma tabela com 3 colunas (Nome, Disciplina, Nota) e pelo menos 3 linhas de dados. Use <th> para o cabeçalho.

a3e3.html

Preciso de uma dica

Cada <tr> é uma linha. A primeira linha usa <th> (cabeçalho). As demais usam <td> (dado). Todas dentro de <table>.

Observação: O CSS do preview já coloca borda nas células automaticamente. Quando você aprender CSS, vai personalizar isso do jeito que quiser.

// desafio

cardápio do restaurante

Monte um cardápio com: título do restaurante, uma seção "Pratos" com lista não ordenada, uma seção "Bebidas" com outra lista, e uma tabela com os preços (Prato, Tamanho, Preço).

a3d1.html DESAFIO

Aula 02 Aula 04