Criando tabelas simples

As tabelas são elementos fundamentais na estruturação de dados em páginas da web. Com o uso adequado de tags e atributos HTML, é possível criar tabelas simples e organizadas para apresentar informações de forma clara e concisa.

Então, vamos explorar como criar tabelas em HTML, abordando tags essenciais, atributos importantes e algumas boas práticas para melhorar a legibilidade e a acessibilidade do conteúdo.

Estrutura básica da tabela

A estrutura de uma tabela em HTML envolve o uso das tags <table>, <tr>, <th> e <td>.

A tag <table> é usada para definir a tabela em si, enquanto as tags <tr> indicam as linhas e as tags <th> e <td> representam as células de cabeçalho e células de dados, respectivamente.

Exemplo de código

<table>
    <tr>
        <th>Cabeçalho 1</th>
        <th>Cabeçalho 2</th>
    </tr>

    <tr>
        <td>Dado 1</td>
        <td>Dado 2</td>
    </tr>

</table>

Atributos para personalizar a tabela

Existem alguns atributos úteis para personalizar a aparência e o comportamento das tabelas.

O atributo colspan permite mesclar células horizontalmente, enquanto o atributo rowspan permite mesclar células verticalmente.

Além disso, é possível adicionar estilos às tabelas usando o atributo class ou o atributo id.

Exemplo de código:

<table>
  <tr>
    <th colspan="2">Cabeçalhos Mesclados</th>
  </tr>
  <tr>
    <td>Dado 1</td>
    <td rowspan="2">Dado 2</td>
  </tr>
  <tr>
    <td>Dado 3</td>
  </tr>
</table>

Estilizando a tabela

Para melhorar a aparência da tabela, é possível aplicar estilos CSS. Por exemplo, você pode definir a largura das colunas usando a propriedade width e adicionar cores de fundo e bordas às células.

Isso permite criar tabelas mais visualmente atraentes e adequadas ao design do seu site.

Exemplo de código CSS

  table {
    width: 100%;
    border-collapse: collapse;

}

th, td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;

}

th {
  background-color: #f2f2f2;
}

Visualização

Cabeçalhos Mesclados
Dado 1	Dado 2
Dado 3

Dicas para melhorar a legibilidade

Ao criar tabelas, é importante manter a legibilidade do conteúdo. Evite tabelas muito extensas e que dificultem a visualização das informações.

Utilize cabeçalhos adequados para cada coluna e forneça uma descrição clara e concisa do conteúdo das células, especialmente quando se trata de dados complexos.

Neste tópico, você aprendeu como criar tabelas simples em HTML. Com as tags e atributos corretos, é possível organizar informações de maneira estruturada e acessível.

Lembre-se de utilizar os recursos disponíveis, como mesclagem de células e estilização CSS, para melhorar a aparência e a funcionalidade das suas tabelas.

Pratique criando diferentes tipos de tabelas e explore maneiras de torná-las mais interativas e responsivas. Lembre-se também de verificar a compatibilidade da sua tabela em diferentes navegadores e dispositivos para garantir uma experiência consistente aos usuários.

Confira nosso curso sobre tabela na Playlist no YouTube ou na forma escrita aqui mesmo no site.