Validación HTML: Etiqueta de apertura "br" vista en "table".

Acerca de este problema HTML

El elemento <table> en HTML tiene un modelo de contenido rígido. Directamente dentro de <table>, solo se permiten elementos específicos: <caption>, <colgroup>, <thead>, <tbody>, <tfoot>, <tr>, y elementos que soportan <script>. De manera similar, los elementos <tr> solo pueden contener elementos <td> y <th>. Una etiqueta <br> colocada entre filas de tabla, o directamente dentro de un <tbody> o <tr> pero fuera de una celda, viola este modelo de contenido.

Este error ocurre típicamente cuando los desarrolladores intentan añadir espacio vertical entre filas de tabla usando etiquetas <br>. Los navegadores manejan este marcado inválido de manera inconsistente — algunos empujarán el <br> completamente fuera de la tabla, mientras que otros pueden ignorarlo silenciosamente. Esto lleva a un comportamiento de layout impredecible entre navegadores y puede confundir a las tecnologías asistivas que dependen de la estructura de tabla adecuada para transmitir relaciones de datos a los usuarios.

El elemento <br> solo es válido dentro de contextos de contenido de fraseo, como dentro de un <td>, <th>, <p>, <span>, o elementos similares. Si necesitas añadir espacio entre filas, usa CSS (margin, padding, o border-spacing) en lugar de insertar etiquetas <br> en la estructura de la tabla.

Cómo solucionarlo

Elimina el <br> si fue añadido accidentalmente o como un intento de formato entre filas.
Mueve el <br> dentro de un <td> o <th> si tenías la intención de crear un salto de línea dentro del contenido de una celda.
Usa CSS para el espaciado si necesitas separación visual entre filas. Aplica padding a las celdas o usa la propiedad border-spacing en la tabla.

Ejemplos

❌ Inválido: `<br>` entre filas de tabla

<table>
  <tr>
    <th>Item</th>
    <th>Description</th>
  </tr>
  <br>
  <tr>
    <td>Book</td>
    <td>A guide to HTML</td>
  </tr>
</table>

❌ Inválido: `<br>` directamente dentro de un `<tr>`

<table>
  <tr>
    <br>
    <td>Book</td>
    <td>A guide to HTML</td>
  </tr>
</table>

✅ Solucionado: `<br>` eliminado, CSS usado para el espaciado

<table style="border-spacing: 0 1em;">
  <tr>
    <th>Item</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Book</td>
    <td>A guide to HTML</td>
  </tr>
</table>

✅ Válido: `<br>` usado dentro de una celda de tabla

Un elemento <br> es perfectamente válido dentro de un <td> o <th>, donde funciona como un salto de línea dentro del contenido de la celda.

<table>
  <tr>
    <th>Item</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Book</td>
    <td>
      Title: HTML &amp; CSS<br>
      Author: Jon Duckett
    </td>
  </tr>
</table>

✅ Solucionado: usar padding para el espaciado de filas

Si tu objetivo es crear separación visual entre filas, el padding CSS en las celdas es el enfoque más limpio:

<style>
  .spaced-table td,
  .spaced-table th {
    padding: 1em 0.5em;
  }
</style>

<table class="spaced-table">
  <tr>
    <th>Item</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Book</td>
    <td>A guide to HTML</td>
  </tr>
</table>