Eu sempre achei engraçado quando alguém que tá começando na web descobre que HTML pra e-mail é praticamente um museu vivo. A pessoa aprende Flexbox, CSS moderno, Bootstrap, Bulma, aí vai montar o primeiro layout de newsletter e… opa, não pode usar nada disso. Não quebra só um pouco o layout não, quebra de um jeito que parece que o Outlook tem raiva pessoal do desenvolvedor.

Com Tailwind dominando tudo, CSS isolado, TypeScript em qualquer canto… e no e-mail a gente tá ali, codando como se fosse 2004. E não é porque a gente quer. É porque não tem outro jeito.

O HTML de e-mail vive num universo paralelo onde alguns clientes simplesmente ignoram CSS externo, removem <style>, retiram propriedades básicas e, se você der azar, reescrevem teu código no envio. Se você já tentou programar um email sem saber desses detalhes, sabe que ficou horroroso no cliente.

Então, por que <table>? Porque ela é previsível. Feia, velha, cheia de tralha… mas funciona em praticamente tudo. O layout segura. Mesmo que Outlook resolva acordar com má vontade. Não precisa tentar colocar um padding se você pode usar uma td com width/height fixo. Pronto, espaçamento dado.

Para finalizar, segue um exemplo básico do jeito menos errado de montar a estrutura de um e-mail com <table>, só pra não ficar só na teoria.

HTML
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
      }

      * {
        font-family: Helvetica, Arial, sans-serif !important;
      }

      img {
        border: 0 none;
        height: auto;
        line-height: 100%;
        outline: none;
        text-decoration: none;
      }

      a img {
        border: 0 none;
      }

      table,
      td {
        border-collapse: collapse;
      }

      span {
        font-size: 16px;
        font-family: Helvetica, Arial, sans-serif;
      }

      b {
        font-weight: bold;
      }
    </style>
  </head>

  <body
    border-spacing="0"
    width="600"
    margin="0"
    padding="0"
    style="
      width: 600px;
      max-width: 600px;
      margin: 0 auto;
      padding: 0;
      border-spacing: 0;
      align-items: center;
      font-family: Helvetica, Arial, sans-serif;
    "
  >
    <table
      align="center"
      margin="0"
      padding="0"
      cellpadding="0"
      cellspacing="0"
      width="600"
      style="margin: 0 auto !important; padding: 0 !important; border-spacing: 0; width: 600px"
    >
      <tbody>
        <tr>
          <td bgcolor="#3F51B5" style="background-color: #3f51b5; border-radius: 32px">
            <table
              align="center"
              margin="0"
              padding="0"
              cellpadding="0"
              cellspacing="0"
              style="margin: 0 auto !important; padding: 0 !important; border-spacing: 0"
            >
              <tbody>
                <tr>
                  <td height="32" style="height: 32px" colspan="3"></td>
                </tr>
                <tr>
                  <td width="64" style="width: 64px"></td>
                  <td>
                    <table
                      align="center"
                      margin="0"
                      padding="0"
                      cellpadding="0"
                      cellspacing="0"
                      style="margin: 0 auto !important; padding: 0 !important; border-spacing: 0"
                    >
                      <tbody>
                        <tr>
                          <td align="center" style="text-align: center">
                            <img src="resources/hello.png" alt="Hello world" />
                          </td>
                        </tr>

                        <tr>
                          <td height="24" style="height: 24px"></td>
                        </tr>

                        <tr>
                          <td align="center" style="text-align: center">
                            <span style="color: #ffffff; text-align: center; font-size: 16px; font-weight: 300">
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet recusandae fuga ipsam? Nisi
                              odit non a soluta sequi ratione <b style="font-weight: bold">doloremque</b> quo temporibus
                              similique quibusdam? Pariatur consequatur veniam perspiciatis incidunt error?
                            </span>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                  <td width="64" style="width: 64px"></td>
                </tr>
                <tr>
                  <td height="32" style="height: 32px" colspan="3"></td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Sempre coloca o font-weight direto no b. Não confia no estilo do <head>, porque o Gmail adora ignorar tudo que tá lá. Se você deixar só o <b> solto, ele pode acabar herdando um peso qualquer do pai e o destaque some. Então, pra evitar dor de cabeça, já mete style="font-weight: bold" no próprio elemento e segue a vida.

Mas no final, funciona. E é isso que importa. Tudo alinhado, tudo previsível. O lado bom é que, depois que você pega o fluxo, até fica automático.

E essa é a real resposta pra pergunta do título: A gente ainda usa <table> em 2025 porque o e-mail não evoluiu. Não dá pra confiar em CSS moderno, então a gente volta pro básico. <table> é o mal necessário do e-mail em HTML.