Tabelas

Tabelas são uma ferramenta poderosa para organizar dados de maneira clara e eficiente em páginas da web. HTML (HyperText Markup Language) oferece uma maneira simples de criar tabelas que variam de simples grids de texto a estruturas complexas de dados. Neste artigo, vamos explorar a criação de tabelas HTML, entender sua estrutura básica, aprender a formatá-las e explorar técnicas avançadas para tornar a apresentação de dados na web mais informativa e atraente.

Estrutura Básica de uma Tabela:

Em HTML, uma tabela é criada usando as tags <table>, <tr> (linha) e <td> (célula). Aqui está uma estrutura básica de uma tabela:

```html
<table>
    <tr>
        <td>Célula 1, Linha 1</td>
        <td>Célula 2, Linha 1</td>
    </tr>
    <tr>
        <td>Célula 1, Linha 2</td>
        <td>Célula 2, Linha 2</td>
    </tr>
</table>

Neste exemplo, temos uma tabela simples com duas linhas e duas colunas.

Cabeçalho de Tabela (<th>):

Para identificar o cabeçalho de uma tabela, usamos a tag <th>. Cabeçalhos são geralmente usados na primeira linha ou na primeira coluna para descrever o conteúdo das células.

```html
<table>
    <tr>
        <th>Cabeçalho 1</th>
        <th>Cabeçalho 2</th>
    </tr>
    <tr>
        <td>Dados 1</td>
        <td>Dados 2</td>
    </tr>
</table>

Colspan e Rowspan:

As atribuições colspan e rowspan permitem que as células ocupem várias colunas ou linhas, respectivamente.

```html
<table>
    <tr>
        <td colspan="2">Célula que ocupa duas colunas</td>
    </tr>
    <tr>
        <td rowspan="2">Célula que ocupa duas linhas</td>
        <td>Outra Célula</td>
    </tr>
    <tr>
        <td>Outra Célula</td>
    </tr>
</table>

Estilo e Formatação com CSS:

Tabelas podem ser estilizadas usando CSS para alterar cores, tamanhos de fonte, bordas e outras propriedades visuais.

```html
<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
</style>

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

As tabelas HTML são uma ferramenta valiosa para apresentar dados de maneira organizada e compreensível. Com sua estrutura simples e a capacidade de personalização usando CSS, as tabelas podem variar de simples a complexas para atender às necessidades de qualquer site. Ao criar tabelas, lembre-se de manter a clareza e a concisão dos dados, garantindo que os usuários possam acessar as informações de forma fácil e eficiente.