Tabelas em HTML
Tags: html, braziliandevs, beginners, webdev
Published: 2021-01-13 15:38:00

Olá pessoal, hoje iremos aprender sobre tabelas em **HTML**. Antigamente as tabelas eram utilizadas para construções de _layout_, isso não é mais recomendado, inclusive é uma má prática. Tabelas em HTML serve para organizar, separar e exibir conteúdo mostrando informações mais consistentes.

O exemplo abaixo, mostra uma tabela simples com uma linha e quatro colunas, o atributo `border` foi adicionado somente para mostrar as bordas, <marK>o recomendado é utilizar **CSS** para alterar as bordas</mark>.

```html
<table border="1">
  <tr>
    <td>Francisco</td>
    <td>Brasil</td>
    <td>francisco@example.com</td>
    <td>60</td>
  </tr>
</table>
```
{% jsfiddle https://jsfiddle.net/franciscochaves/6Lxzm40w result,html %}

- `table`  defini a tabela, _tag_ responsável por armazenar as linhas e colunas;
- `tr` linha da tabela; e
- `td` dado da tabela.

Também podemos adicionar uma descrição para os campos, utilizando um cabeçalho com a _tag_ `th`, o texto ficará centralizado e em negrito.

```html
<table border="1">
  <tr>
    <th>Nome</th>
    <th>País</th>
    <th>E-mail</th>
    <th>Pontuação</th>
  </tr>
  <tr>
    <td>Francisco</td>
    <td>Brasil</td>
    <td>francisco@example.com</td>
    <td>60</td>
  </tr>
  <tr>
    <td>Monize</td>
    <td>Brasil</td>
    <td>monize@example.com</td>
    <td>80</td>
  </tr>
</table>
```

{% jsfiddle  https://jsfiddle.net/franciscochaves/mr87f2jh result,html %}

Podemos utilizar o atributo `rowspan` , que ajusta a quantidade de linhas que a célula de dados pode ocupar, por exemplo, podemos ver a utilização de dois e-mails em uma mesma pessoa no código abaixo:

```html
<table border="1">
  <tr>
    <th>Nome</th>
    <th>País</th>
    <th>E-mail</th>
    <th>Pontuação</th>
  </tr>
  <tr>
    <td rowspan="2">Francisco</td>
    <td rowspan="2">Brasil</td>
    <td>francisco@example.com</td>
    <td rowspan="2">60</td>
  </tr>
  <tr>
    <td>chaves@example.com</td>
  </tr>
  <tr>
    <td>Monize</td>
    <td>Brasil</td>
    <td>monize@example.com</td>
    <td>80</td>
  </tr>
</table>
```

{% jsfiddle https://jsfiddle.net/franciscochaves/fehq20to result,html %}

Vamos também criar uma linha para obter a média da pontuação, e para isso utilizaremos o atributo `colspan` que permite fazer uma célula ocupar várias linhas. 

```html
<table border="1">
  <tr>
    <th>Nome</th>
    <th>País</th>
    <th>E-mail</th>
    <th>Pontuação</th>
  </tr>
  <tr>
    <td rowspan="2">Francisco</td>
    <td rowspan="2">Brasil</td>
    <td>francisco@example.com</td>
    <td rowspan="2">60</td>
  </tr>
  <tr>
    <td>chaves@example.com</td>
  </tr>
  <tr>
    <td>Monize</td>
    <td>Brasil</td>
    <td>monize@example.com</td>
    <td>80</td>
  </tr>
  <tr>
    <th colspan="3">Média da pontuação</th>
    <td>70</td>
  </tr>
</table>
```

{% jsfiddle https://jsfiddle.net/franciscochaves/L04g8q2o result,html %}

E para deixa o nosso código mais semântico, vamos utilizar as _tags_:

- `thead` utilizado para informações sobre os dados;
- `tbody` conteúdo da tabela; e
- `tfoot` informações de rodapé, sumarização de dados.

```html
<table border="1">
  <thead>
    <tr>
      <th>Nome</th>
      <th>País</th>
      <th>E-mail</th>
      <th>Pontuação</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Francisco</td>
      <td rowspan="2">Brasil</td>
      <td>francisco@example.com</td>
      <td rowspan="2">60</td>
    </tr>
    <tr>
      <td>chaves@example.com</td>
    </tr>
    <tr>
      <td>Monize</td>
      <td>Brasil</td>
      <td>monize@example.com</td>
      <td>80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3">Média da pontuação</th>
      <td>70</td>
    </tr>
  </tfoot>
</table>
```

{% jsfiddle https://jsfiddle.net/franciscochaves/463nbde9 result,html %}

Pronto pessoal, conhecemos e utilizamos tabelas em **HTML**, valeu 😎✌!