Tabelas em HTML

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, o recomendado é utilizar CSS para alterar as bordas.

<table border="1">
  <tr>
    <td>Francisco</td>
    <td>Brasil</td>
    <td>francisco@example.com</td>
    <td>60</td>
  </tr>
</table>

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.

<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>

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:

<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>

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.

<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>

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.

<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>

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

Blog

Francisco Chaves

Join Our Newsletter. No Spam, Only the good stuff.

Related