Curso de TI HTML Básico 012_Listas e Tabelas

Listas

As listas HTML são elementos importantes para organizar e apresentar informações em páginas web. Ao usar diferentes tipos de listas, você pode estruturar e exibir conteúdo de forma mais eficaz.

Existem três tipos de listas HTML:

1. Lista não ordenada (Unordered list): criada usando o elemento <ul>, cada item da lista deve ser representado pelo elemento <li>.
2. Lista ordenada (Ordered list): criada usando o elemento <ol>, os itens da lista também são representados pelo elemento <li>, mas eles recebem numeração automaticamente.
3. Lista de definição (Definition list): criada usando o elemento <dl>, contém os elementos <dt> (título da definição) e <dd> (descrição da definição).

Lista não ordenada

A lista não ordenada é o tipo de lista mais comum, adicionando um pequeno ponto (também chamado de marcador de lista) antes de cada item. Ela usa <ul> como contêiner da lista e <li> para descrever os itens específicos da lista.

Exemplo:

1
<ul>
2
  <li>Item 1</li>
3
  <li>Item 2</li>
4
  <li>Item 3</li>
5
</ul>

Efeito:

Lista ordenada

Ao contrário da lista não ordenada, cada item da lista ordenada é marcado com números. A lista ordenada usa <ol> como contêiner da lista e também usa <li> para descrever os itens específicos da lista.

Exemplo:

1
<ol>
2
  <li>Primeiro item</li>
3
  <li>Segundo item</li>
4
  <li>Terceiro item</li>
5
</ol>

Efeito:

Lista de definição

A lista de definição é composta pelos elementos <dl> (lista de definição), <dt> (item de definição) e <dd> (descrição da definição). As listas de definição são geralmente usadas para exibir um conjunto de termos e suas definições.

Exemplo:

1
<dl>
2
  <dt>Termo 1</dt>
3
  <dd>Descrição 1</dd>
4
  <dt>Termo 2</dt>
5
  <dd>Descrição 2</dd>
6
</dl>

Efeito:

[!Resumo]

• Os itens da lista podem conter parágrafos, quebras de linha, imagens, links e outras listas.

Tabelas

A tabela HTML é um elemento poderoso para exibir dados estruturados. Uma tabela HTML básica é representada pelo elemento <table>, que contém alguns elementos-chave, como <tr> (linha da tabela), <th> (célula de cabeçalho) e <td> (célula de dados da tabela).

Exemplo:

1
<table>
2
  <tr>
3
    <th>Nome</th>
4
    <th>Idade</th>
5
    <th>Gênero</th>
6
  </tr>
7
  <tr>
8
    <td>João Silva</td>
9
    <td>20</td>
10
    <td>Masculino</td>
11
  </tr>
12
  <tr>
13
    <td>Maria Santos</td>
14
    <td>21</td>
15
    <td>Feminino</td>
16
  </tr>
17
</table>

Efeito:

Elementos da tabela:

• <table>: representa a tabela inteira.
• <thead>: define a seção de cabeçalho da tabela, que contém elementos <th> usados para representar os títulos das colunas.
• <tr>: linha da tabela, contém células de cabeçalho <th>.
• <th>: célula de cabeçalho, usada para identificar o título da coluna.
• <tbody>: define a seção do corpo da tabela, onde cada linha contém elementos <td> usados para representar os dados reais.
• <td>: célula de dados da tabela, contém os dados reais.
• <tfoot>: define a seção de rodapé da tabela, geralmente usada para colocar resumos, totalizações ou outras informações de rodapé da tabela.
• <caption>: usado para adicionar um título à tabela HTML, o título geralmente é exibido no topo da tabela.
• <colgroup>: define um grupo de colunas da tabela.
• <col>: define os atributos para as colunas da tabela.

Exemplo:

1
<table border="1">
2
  <caption>Este é o título de uma tabela</caption>
3
  <colgroup>
4
    <col style="width: 50px; background-color: #f2f2f2;">
5
    <col style="width: 100px; background-color: #ddd;">
6
    <col style="width: 150px; background-color: #f2f2f2;">
7
  </colgroup>
8
  <thead>
9
    <tr>
10
      <th>Nome</th>
11
      <th>Idade</th>
12
      <th>Cidade</th>
13
    </tr>
14
  </thead>
15
  <tbody>
16
    <tr>
17
      <td>João Silva</td>
18
      <td>25</td>
19
      <td>São Paulo</td>
20
    </tr>
21
    <tr>
22
      <td>Maria Santos</td>
23
      <td>30</td>
24
      <td>Rio de Janeiro</td>
25
    </tr>
26
  </tbody>
27
  <tfoot>
28
    <tr>
29
      <td colspan="3">Total de pessoas: 2</td>
30
    </tr>
31
  </tfoot>
32
</table>

Efeito:

Atributos da tabela:

• border: usado para especificar a borda da tabela. O valor é um número que representa a largura da borda.
• cellpadding: usado para especificar o espaçamento entre as células. O valor é um número que representa o tamanho do espaçamento.
• cellspacing: usado para especificar o espaçamento entre as bordas das células. O valor é um número que representa o tamanho do espaçamento.
• width: usado para especificar a largura da tabela. O valor é um número que representa a largura.
• height: usado para especificar a altura da tabela. O valor é um número que representa a altura.
• style: usado para especificar o estilo da tabela.

Exemplo:

1
<table style="border-collapse: collapse; width: 60%; margin: 20px auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
2
  <caption style="font-size: 1.5em; font-weight: bold; padding: 10px; background-color: #3498db; color: #fff;">Esta é uma tabela bonita</caption>
3
  <colgroup>
4
    <col style="width: 30%;">
5
    <col style="width: 30%;">
6
    <col style="width: 40%;">
7
  </colgroup>
8
  <thead>
9
    <tr>
10
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Nome</th>
11
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Idade</th>
12
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Cidade</th>
13
    </tr>
14
  </thead>
15
  <tbody>
16
    <tr>
17
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">João Silva</td>
18
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">25</td>
19
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">São Paulo</td>
20
    </tr>
21
    <tr>
22
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Maria Santos</td>
23
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">30</td>
24
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Rio de Janeiro</td>
25
    </tr>
26
  </tbody>
27
  <tfoot>
28
    <tr>
29
      <td colspan="3" style="border: 1px solid #ddd; padding: 8px; text-align: center; background-color: #3498db; color: #fff;">Total de pessoas: 2</td>
30
    </tr>
31
  </tfoot>
32
</table>

Efeito:

Mesclagem de tabelas

A mesclagem de tabelas refere-se à combinação de duas ou mais células em uma única célula. A mesclagem de tabelas pode ser usada para simplificar o layout da tabela ou destacar dados específicos. Use o atributo colspan para especificar o número de linhas que a célula abrange, ou use o atributo rowspan para especificar o número de colunas que a célula abrange. O valor do atributo é um número que representa o número de linhas abrangidas.

Exemplo:

1
<table border="1">
2
  <tr>
3
    <td>Célula 1</td>
4
    <td colspan="2">Mesclagem horizontal de duas colunas</td>
5
    <td>Célula 4</td>
6
  </tr>
7
  <tr>
8
    <td rowspan="2">Mesclagem vertical de duas linhas</td>
9
    <td>Célula 3</td>
10
    <td>Célula 4</td>
11
    <td>Célula 5</td>
12
  </tr>
13
  <tr>
14
    <td>Célula 7</td>
15
    <td>Célula 8</td>
16
    <td>Célula 9</td>
17
  </tr>
18
</table>

Efeito:

[!Resumo]

• As tabelas não exibem bordas por padrão.
• <tr> é a abreviação de table row, representando uma linha da tabela.
• <td>: td é a abreviação de table data, representando a célula de dados da tabela.
• <th>: th é a abreviação de table header, representando a célula de cabeçalho da tabela.
• A maioria dos navegadores exibe os cabeçalhos como texto em negrito e centralizado.
• As tabelas podem conter texto, imagens, listas, parágrafos, formulários, linhas horizontais, tabelas, etc.