24A-Relleno y Espaciado de Tablas en HTML

---

Las tablas HTML pueden ajustar el acolchado dentro de las celdas, y también el espacio entre las células.

• Acolchado (padding): espacio dentro de las celdas.
• Espaciado (spacing): espacio entre las celdas.

---

Temas tratados en esta entrada

• Tabla HTML - Padding de celdas
• HTML Table - Espaciado celular

---

Padding de celdas en tablas HTML

El padding en las celdas de una tabla HTML es el espacio entre el contenido de una celda y los bordes de esa celda. Esto se utiliza para hacer que el contenido dentro de las celdas no esté pegado al borde, lo que mejora la legibilidad y la presentación visual de los datos en la tabla.

Para agregar padding a las celdas, se puede usar la propiedad CSS padding dentro de un estilo en línea o una hoja de estilo externa. La propiedad padding permite especificar los valores de espacio para todos los lados de la celda (superior, derecho, inferior e izquierdo) o individualmente utilizando padding-top, padding-right, padding-bottom y padding-left.

Por defecto, el acolchado se establece en 0. Para añadir acolchado en las celdas de la tabla, utilice la propiedad CSS padding de la siguiente manera:

Ejemplo

Encabezado 1	Encabezado 2
Contenido 1	Contenido 2
Contenido 3	Contenido 4

Código del ejemplo

          <table border='1' style='border-collapse: collapse; width: 100%;'>
            <tr>
              <th style='padding: 15px; border: 1px solid black;'>Encabezado 1</th>
              <th style='padding: 15px; border: 1px solid black;'>Encabezado 2</th>
            </tr>
            <tr>
              <td style='padding: 15px; border: 1px solid black;'>Contenido 1</td>
              <td style='padding: 15px; border: 1px solid black;'>Contenido 2</td>
            </tr>
            <tr>
              <td style='padding: 15px; border: 1px solid black;'>Contenido 3</td>
              <td style='padding: 15px; border: 1px solid black;'>Contenido 4</td>
            </tr>
          </table>
                

---

...

Espaciado (spacing): espacio entre las celdas

El espaciado celular es el espacio entre cada celda de una tabla HTML. Este espaciado ayuda a mejorar la claridad y legibilidad de los datos, evitando que las celdas se vean amontonadas.

De forma predeterminada, el espacio se establece en 2 píxeles. Para cambiar el espaciado entre las celdas de la tabla, se utiliza la propiedad CSS border-spacing en el elemento table. Esta propiedad permite especificar la distancia entre las celdas, proporcionando un mayor control sobre el diseño de la tabla.

Por ejemplo, si se establece border-spacing: 10px;, habrá un espacio de 10 píxeles entre todas las celdas de la tabla. Esto puede ser especialmente útil cuando se quiere dar un aspecto más limpio y ordenado a los datos presentados en la tabla.

Ejemplo

Tabla con Espaciado de 10px

Celda 1	Celda 2
Celda 3	Celda 4

Tabla con Espaciado de 20px

Celda 1	Celda 2
Celda 3	Celda 4

Tabla con Espaciado de 30px

Celda 1	Celda 2
Celda 3	Celda 4

---

Código del ejemplo

  <div class="bg-white p-3">
    <div style="display: flex; justify-content: space-between; overflow: auto;">
      
      <table style="border-collapse: separate; border-spacing: 10px; border: 1px solid #ccc; margin-right: 10px;">
        <caption>Tabla con Espaciado de 10px</caption>
        <tbody>
          <tr>
            <td style="border: 1px solid #007bff; padding: 10px;">Celda 1</td>
            <td style="border: 1px solid #007bff; padding: 10px;">Celda 2</td>
          </tr>
          <tr>
            <td style="border: 1px solid #007bff; padding: 10px;">Celda 3</td>
            <td style="border: 1px solid #007bff; padding: 10px;">Celda 4</td>
          </tr>
        </tbody>
      </table>
  
      <table style="border-collapse: separate; border-spacing: 20px; border: 1px solid #ccc; margin-right: 10px;">
        <caption>Tabla con Espaciado de 20px</caption>
        <tbody>
          <tr>
            <td style="border: 1px solid #007bff; padding: 10px;">Celda 1</td>
            <td style="border: 1px solid #007bff; padding: 10px;">Celda 2</td>
          </tr>
          <tr>
            <td style="border: 1px solid #007bff; padding: 10px;">Celda 3</td>
            <td style="border: 1px solid #007bff; padding: 10px;">Celda 4</td>
          </tr>
        </tbody>
      </table>
  
      <table style="border-collapse: separate; border-spacing: 30px; border: 1px solid #ccc;">
        <caption>Tabla con Espaciado de 30px</caption>
        <tbody>
          <tr>
            <td style="border: 1px solid #007bff; padding: 10px;">Celda 1</td>
            <td style="border: 1px solid #007bff; padding: 10px;">Celda 2</td>
          </tr>
          <tr>
            <td style="border: 1px solid #007bff; padding: 10px;">Celda 3</td>
            <td style="border: 1px solid #007bff; padding: 10px;">Celda 4</td>
          </tr>
        </tbody>
      </table>
  
    </div>
  </div>
        

---

Ir al índice