AUDIO - VIDEO - TABELAS

Elementos de Mídia

<audio>

O elemento <audio> é do tipo bloco e tem a função de inserir sons ou streams de áudio em uma página.

Formatos suportados: .ogg, .mp3 ou .wav.
Atributo importante:
controls – exibe os controles para o usuário manipular a reprodução do áudio (play, pause, volume etc.).

Exemplo:

Seu navegador não suporta o elemento de áudio.

</audio>

<video>

O elemento <video> é utilizado para inserir vídeos em uma página. Assim como no áudio, também pode conter controles para o usuário.

Atributo importante:
controls – exibe os controles de reprodução do vídeo.

O elemento <source> é utilizado dentro de <audio> ou <video> para especificar diferentes formatos de mídia, garantindo compatibilidade entre navegadores.

Atributos do <source>:
src – endereço do arquivo de mídia (obrigatório).
type – tipo do arquivo.

Exemplo:

Seu navegador não suporta o elemento de vídeo.

</video>

Tabelas em HTML

As tabelas em HTML são estruturadas com linhas e colunas, mas diferentemente de editores como Word, elas são definidas por linhas. Hoje em dia, tabelas devem ser usadas apenas para dados tabulares, não para estruturar layouts.

Estrutura Básica

<table>...</table> – delimita a tabela.
<caption> – define o título da tabela.
<tr> – cria uma linha.
<th> – define uma célula de cabeçalho (dentro de <tr>).
<td> – define uma célula comum (dentro de <tr>).
Atributos úteis:
border – define a borda da tabela.
colspan – mescla colunas.
rowspan – mescla linhas.

Exemplo simples:

<caption>Exemplo de Tabela</caption>

<tr>

<th>Idade</th>

</tr>

<tr>

</tr>

</table>

Elementos Avançados de Tabela

<thead> – define o cabeçalho da tabela (geralmente contém títulos das colunas).
<tbody> – representa o corpo da tabela (linhas de dados principais).
<tfoot> – representa o rodapé da tabela (geralmente usado para totais ou informações finais).

Esses elementos ajudam na organização semântica e na acessibilidade, além de facilitar a estilização via CSS.

Exemplo completo:

<caption>Relatório de Vendas</caption>

<thead>

<tr>

<th>Produto</th>

<th>Quantidade</th>

<th>Preço</th>

</tr>

</thead>

<tbody>

<tr>

<td>Caneta</td>

</tr>

<tr>

<td>Caderno</td>

</tr>

</tbody>

<tfoot>

<tr>

<td colspan="2">Total</td>

</tr>

</tfoot>

</table>

Entendendo o border-collapse para Tabelas CSS

Ao estilizar tabelas no desenvolvimento web, é comum notarmos um pequeno espaço entre as células (ou bordas) que o navegador aplica por padrão. Esse espaçamento pode atrapalhar o visual e a coesão de uma tabela.

Para resolver isso, usamos a propriedade border-collapse do CSS.

Essa propriedade é aplicada ao elemento principal <table> e possui dois valores principais:

border-collapse: separate; (Padrão): Este valor mantém as bordas de cada célula separadas, criando o espaçamento visual que se assemelha a um "gap" entre elas.
border-collapse: collapse;: Este é o truque para um visual limpo. Ele faz com que as bordas adjacentes das células sejam unidas (colapsadas) em uma única linha. O resultado é uma tabela com bordas contínuas e sem aqueles espaços indesejados entre as células, garantindo um design mais profissional e coeso.

Basta adicionar border-collapse: collapse; ao seletor da sua tabela para controlar e eliminar os espaços indesejados.