3

¿Se puede poner un <br> adentro de una <table> entre 2 <tr>?

Tengo una tabla y tengo los <tr> muy pegados y quisiera ponerles un salto de linea pero cuando uso el <br> no se aplica el salto de linea. Hay alguna otra forma?

<table>
          <tr>
            <th colspan="6" scope="col">EQUIPOS</th>
          </tr>
          <tr>
            <th scope="row2">Marca</th>
            <th scope="row2">Num. Serie</th>
            <th scope="row2">Modelo</th>
            <th scope="row2">Procesador</th>
            <th scope="row2">RAM</th>
            <th scope="row2">Cant. RAM</th>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <!--salto aqui-->
          <tr>
            <th scope="row2">Almacenamiento</th>
            <th scope="row2">Pulgadas</th>
            <th scope="row2">Sistema operativo</th>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </table>
2
  • Y un padding no te sirve?? Pon todo el código para ver el ejemplo completo.
    – OCHOA
    Commented el 2 ene. 2023 a las 17:18
  • 1
    con un padding o margin te serviría, si usas el br se hace el salto de línea encima de toda la tabla... Commented el 2 ene. 2023 a las 17:19

1 respuesta 1

2

Al hacer el salto de línea con <br> entre las columnas de tu tabla, el salto de línea ocurrirá encima de tu tabla:

<span>Mi tabla:</span>

<table>
  <tr>
    <th scope="row2">Columna 1</th>
    <th scope="row2">Columna 2</th>
    <th scope="row2">Columna 3</th>
    <th scope="row2">Columna 4</th>
    <th scope="row2">Columna 5</th>
  </tr>
  <!--Salto de linea aqui-->
  <br><br><br><br>
  <tr>
    <td>fila 1</td>
    <td>fila 1</td>
    <td>fila 1</td>
    <td>fila 1</td>
    <td>fila 1</td>
  </tr>
  <tr>
    <td>fila 2</td>
    <td>fila 2</td>
    <td>fila 2</td>
    <td>fila 2</td>
    <td>fila 2</td>
  </tr>
</table>

Lo que podrías hacer agregarle una columna vacía que ocupe todo el ancho de la tabla y darle una altura:

<span>Mi tabla:</span>

<table>
  <tr>
    <th scope="row2">Columna 1</th>
    <th scope="row2">Columna 2</th>
    <th scope="row2">Columna 3</th>
    <th scope="row2">Columna 4</th>
    <th scope="row2">Columna 5</th>
  </tr>
  <!--Salto de linea aqui-->
  <tr>
    <td style="height: 10px" colspan="16"></td>
  </tr>
  <tr>
    <td>fila 1</td>
    <td>fila 1</td>
    <td>fila 1</td>
    <td>fila 1</td>
    <td>fila 1</td>
  </tr>
  <tr>
    <td>fila 2</td>
    <td>fila 2</td>
    <td>fila 2</td>
    <td>fila 2</td>
    <td>fila 2</td>
  </tr>
</table>

O si gustas darle un padding a la primera columna (o cabecera):

<span>Mi tabla:</span>

<table>
  <tr>
    <th style="padding-bottom: 10px" scope="row2">Columna 1</th>
    <th style="padding-bottom: 10px" scope="row2">Columna 2</th>
    <th style="padding-bottom: 10px" scope="row2">Columna 3</th>
    <th style="padding-bottom: 10px" scope="row2">Columna 4</th>
    <th style="padding-bottom: 10px" scope="row2">Columna 5</th>
  </tr>
  <tr>
    <td>fila 1</td>
    <td>fila 1</td>
    <td>fila 1</td>
    <td>fila 1</td>
    <td>fila 1</td>
  </tr>
  <tr>
    <td>fila 2</td>
    <td>fila 2</td>
    <td>fila 2</td>
    <td>fila 2</td>
    <td>fila 2</td>
  </tr>
</table>

3
  • 1
    ¿Serviría añadir un padding a la fila "de abajo" para que quede más separada de la que está encima?
    – Alfabravo
    Commented el 2 ene. 2023 a las 17:31
  • 1
    @Alfabravo justo edité mi respuesta haciendo eso jeje Commented el 2 ene. 2023 a las 17:32
  • Me gusta más, es menos "hechizo" :)
    – Alfabravo
    Commented el 2 ene. 2023 a las 17:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.