Estilizando tabelas HTML

Como estilizar as bordas de uma tabela HTML?

Para estilizar as tabelas você vai precisar saber um pouco de CSS. Veja a seguir alguns exemplos.

<style>
table, th, td {
  border: 1px solid #777;
}
</style>

<table>
  <tr>
    <th>Empresa</th>
    <th>Contato</th>
    <th>País</th>
  </tr>
  <tr>
    <td>Total Plan</td>
    <td>Maria Dolores</td>
    <td>Alemanha</td>
  </tr>
  <tr>
    <td>Epic Kiwi</td>
    <td>Mário Bento</td>
    <td>Brasil</td>
  </tr>
</table>

Como unificar as bordas da tabela HTML

Para unificar as bordas de uma tabela utilize a propriedade do CSS border-collapse: collapse; nos estilos da tabela.

<style>
table, th, td {
  border: 1px solid #777;
}
</style>

<table style="border-collapse: collapse">
  <tr>
    <th>Empresa</th>
    <th>Contato</th>
    <th>País</th>
  </tr>
  <tr>
    <td>Total Plan</td>
    <td>Maria Dolores</td>
    <td>Alemanha</td>
  </tr>
  <tr>
    <td>Epic Kiwi</td>
    <td>Mário Bento</td>
    <td>Brasil</td>
  </tr>
</table>

Como estilizar várias linhas ao mesmo tempo?

Utilize os elementos <thead>, <tbody> e <tfoot> para estilizar certos grupos de linhas.

<style>
table, th, td {
  border: 1px solid #777;
}
</style>

<table style="border-collapse: collapse">
  <thead style="background: black; color: white">
    <tr>
      <th>Data</th>
      <th>Produto</th>
      <th>Valor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10/10/2022</td>
      <td>HD</td>
      <td>250,00</td>
    </tr>
    <tr>
      <td>12/12/2022</td>
      <td>PenDrive</td>
      <td>50,00</td>
    </tr>
  </tbody>
  <tfoot style="background: #eee; color: black">
    <tr>
      <td>Total</td>
      <td>-</td>
      <td>300,00</td>
    </tr>
  </tfoot>
</table>

Adicionando linhas horizontais

Utilize a propriedade do CSS border-bottom nos elementos <th> e <td>.

<style>
th, td {
  border-bottom: 1px solid #aaa;
}
table {
  width: 100%;
  border-collapse: collapse;
}
</style>

<table>
  <tr>
    <th>Empresa</th>
    <th>Contato</th>
    <th>País</th>
  </tr>
  <tr>
    <td>Total Plan</td>
    <td>Maria Dolores</td>
    <td>Alemanha</td>
  </tr>
  <tr>
    <td>Epic Kiwi</td>
    <td>Mário Bento</td>
    <td>Brasil</td>
  </tr>
</table>

Como criar tabelas com listras alternadas?

Utilize o seletor avançado do CSS nth-child() na tag <tr> para criar tabelas listradas.

<style>
tr:nth-child(2n) {
  background-color: #bbb6;
}
</style>

<table style="width: 100%">
  <tr>
    <th>Empresa</th>
    <th>Contato</th>
    <th>País</th>
  </tr>
  <tr>
    <td>Total Plan</td>
    <td>Maria Dolores</td>
    <td>Alemanha</td>
  </tr>
  <tr>
    <td>Epic Kiwi</td>
    <td>Mário Bento</td>
    <td>Brasil</td>
  </tr>
  <tr>
    <td>Total Plan</td>
    <td>Maria Dolores</td>
    <td>Alemanha</td>
  </tr>
</table>

Como adicionar espaçamento na tabela HTML?

Utilize a propriedade do CSS padding nos elementos <th> e <td> para especificar o espaçamento das células.

<style>
th, td {
  padding: 16px;
}
table, th, td {
  border: 1px solid #777;
}
</style>

<table style="border-collapse: collapse">
  <tr>
    <th>Empresa</th>
    <th>Contato</th>
    <th>País</th>
  </tr>
  <tr>
    <td>Total Plan</td>
    <td>Maria Dolores</td>
    <td>Alemanha</td>
  </tr>
  <tr>
    <td>Epic Kiwi</td>
    <td>Mário Bento</td>
    <td>Brasil</td>
  </tr>
</table>