teste - WHITENOTE

HTML - Tabelas

As tabelas HTML representam dados, como texto ou imagens, num formato estruturado com linhas e colunas. Esta funcionalidade oferece uma estrutura visual que auxilia na clareza e na compreensão da informação, o que a torna um elemento fundamental no desenvolvimento web.

Razões para a Utilização de Tabelas HTML

Estruturação de Dados: As tabelas proporcionam uma estrutura coerente para organizar e exibir dados, o que facilita a interpretação da informação por parte do utilizador.
Apresentação Comparativa: Quando existe a necessidade de comparar diferentes conjuntos de dados lado a lado, as tabelas oferecem um formato claro e visualmente acessível.
Representação de Dados Tabulares: Informações que se ajustam naturalmente a linhas e colunas, como horários, estatísticas ou tabelas de preços, encontram nas tabelas HTML a representação ideal.

Criação de uma Tabela HTML

A criação de uma tabela em HTML ocorre através da etiqueta <table>, em conjunto com etiquetas que definem a estrutura e o conteúdo interno. As etiquetas primárias utilizadas são <tr>, <td> e <th>.

Etiqueta <table>: Utiliza-se para criar a tabela que envolve as linhas e colunas.
Etiqueta <tr>: Significa "table row" e cria uma linha dentro da tabela.
Etiqueta <td>: Representa "table data" e cria células de dados padrão dentro de uma linha.
Etiqueta <th>: Representa "table header" e cria células de cabeçalho dentro de uma linha.


<!DOCTYPE html>
<html>
<body>
    <table border="1">
    <tr>
       <th>Produto</th>
       <th>Categoria</th>
       <th>Preço</th>
    </tr>
    <tr>
       <td>Portátil</td>
       <td>Eletrónica</td>
       <td>$800</td>
    </tr>
    <tr>
       <td>Estante</td>
       <td>Mobiliário</td>
       <td>$150</td>
    </tr>
    </table>
</body>
</html>

Estrutura da Tabela HTML - Linhas e Colunas

Linhas: Cada linha define-se com a etiqueta <tr>. Esta contém um conjunto de células (<td> ou <th>), que representam os elementos individuais dessa linha.
Colunas: A informação reside nas células da tabela. As células que ocupam a mesma posição em diferentes linhas formam uma coluna.
Cabeçalhos: A etiqueta <th> define o cabeçalho, cujos dados aparecem habitualmente destacados.
Estilo: A folha de estilo serve para criar o contorno ou moldura da tabela.

Cor de Fundo e Imagem na Tabela

Define-se a cor de fundo ou uma imagem de fundo numa tabela HTML através de propriedades CSS ou atributos específicos da etiqueta <table>.

Utilização de Atributos

Os atributos seguintes definem a largura e a altura de uma tabela:

Width: Define a largura da tabela.
Height: Define a altura da tabela.

Exemplo de Configuração de Dimensões

<!DOCTYPE html>
<html>
<body>
    <table border="1" width="80%" height="400">
        <tr>
          <th>Cabeçalho 1</th>
          <th>Cabeçalho 2</th>
        </tr>
        <tr>
          <td>Linha 1, Coluna 1</td>
          <td>Linha 1, Coluna 2</td>
        </tr>
    </table>
</body>
</html>

Tabelas HTML Aninhadas

As tabelas aninhadas referem-se à criação de tabelas dentro de outras tabelas. Este processo executa-se ao inserir a etiqueta <table> dentro de uma célula <td>, o que origina uma nova estrutura tabular no interior da célula da tabela principal.

Exemplo de Tabela Aninhada


<!DOCTYPE html>
<html>
<body>
    <table border="1">
        <tr>
            <td> Coluna da Tabela Externa </td>
            <td>
                <table border="1">
                    <tr>
                        <td> Linha da Tabela Interna </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Referência de Etiquetas Relacionadas

Etiqueta	Descrição
<table>	Cria a tabela HTML.
<th>	Define a célula de cabeçalho da tabela.
<tr>	Cria uma linha na tabela.
<td>	Armazena os dados de cada célula da tabela.