Tabelas HTML não são usadas tanto hoje em dia como costumavam ser. But, as a front-end developer, you should still be familiar with them. Tabelas são uma das primeiras formas que os desenvolvedores tinham para exibir dados em um navegador lá na década de 1990. Aqui está um exemplo de código usado para gerar uma tabela dos EUA. Bureau of Labor Statistics:

<table id="quickfacts">
  <thead>
    <tr>
      <th colspan="2">Quick Facts: Software Developers, Quality Assurance Analysts, and Testers</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2023 Median Pay</th>
      <td>
        $130,160 per year
        <br>$62.58 per hour
      </td>
    </tr>
    <tr>
      <th>Typical Entry-Level Education</th>
      <td>Bachelor's degree</td>
    </tr>
    <tr>
      <th>Work Experience in a Related Occupation</th>
      <td>None</td>
    </tr>
    <tr>
      <th>On-the-job Training</th>
      <td>None</td>
    </tr>
    <tr>
      <th>Number of Jobs, 2022</th>
      <td>1,795,300</td>
    </tr>
    <tr>
      <th>Job Outlook, 2022-32</th>
      <td>25% (Much faster than average)</td>
    </tr>
    <tr>
      <th>Employment Change, 2022-32</th>
      <td>451,200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>If this table had a footer it would be here.</th>
    </tr>
  </tfoot>
</table>

Como você pode ver, há um elemento principal table com um id definido como quickfacts. Dentro dela, a tabela possui um elemento de cabeçalho de tabela, thead, um elemento de corpo de tabela, tbody, e um elemento de rodapé de tabela, tfoot. Os elementos head, body e foot da tabela podem conter cada um algum número de linhas da tabela, tr. E cada linha da tabela pode conter um cabeçalho de tabela th que rotula os dados naquela linha. Também pode conter algum número de células de dados individuais, chamadas dados da tabela, td. Agora, isso é muitos elementos HTML. Mas não se intimide – estes seguem uma hierarquia simples. Aqui está a tabela mais simples que podemos criar que inclui todos esses elementos:

<table>
  <thead>
    <tr>
      <th>The title of this table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>First Row</th>
      <td>
        First Data Cell
      </td>
    </tr>
    <tr>
      <th>Second Row</th>
      <td>
        Second Data Cell
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>The footer of this table, which might contain date of publication, author credits, or other meta information.</th>
    </tr>
  </tfoot>
</table>

Como você pode ver, os dados em si estão sempre dentro de um tr – e dentro desse elemento tr há um elemento th com um cabeçalho e um elemento td com dados. Alguns sites optarão por usar divs para construir suas próprias tabelas em vez de usar o elemento table mais apropriado. Embora seja possível exibir dados tabulares usando elementos genéricos div, ainda é melhor usar o elemento table. Muitos anos atrás, desenvolvedores poderiam ter usado uma table para posicionar elementos que não são dados em uma página da web. Isso nunca foi considerado uma boa prática. Mas você pode encontrar algumas bases de código onde tabelas ainda são usadas assim. Hoje em dia, os desenvolvedores usam CSS flexbox e grid para organizar seus designs. G.E.A.R ACADEMY abordará essas ferramentas em profundidade mais adiante. Por enquanto, use tabelas HTML apenas para seu propósito original: exibir dados tabulares.