Establecer relleno de celdas y espaciado de celdas en CSS

Relleno celular

El relleno de celdas se utiliza para definir los espacios entre las celdas y su borde. Si la propiedad de relleno de celda no se aplica, se establecerá como valor predeterminado.

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>cell padding</title>
        <style>
            table, th, td {
                border: 2px solid green;
                text-align:center;
            }
            th, td {
                padding: 20px;
                background-color:none;
            }
              
            h1 {
            color:green;
            }
        </style>
    </head>
    <body>
        <center>
        <h1>GeeksforGeeks</h1>
        <h2>Cell Padding property</h2>
        <h3>padding: 20px;</h3>
        <table style="width:70%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th> 
            <th>Age</th>
        </tr>
        <tr>
            <td>Harsh</td>
            <td>Agarwal</td>
            <td>15</td>
        </tr>
        <tr>
            <td>Manas</td>
            <td>Chhabra</td>
            <td>27</td>
        </tr>
        <tr>
            <td>Ramesh</td>
            <td>Chandra</td>
            <td>28</td>
        </tr>
        </table>
        </center>
    </body>
</html>                    

Producción:

Espaciado de celdas

El espacio entre celdas se utiliza para definir el espacio entre las celdas.

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>cell spacing property</title>
        <style>
            table, th, td {
                border: 2px solid green;
                text-align:center;
              
            }
            h1 {
            color:green;
            }
        </style>
    </head>
    <body>
        <center>
        <h1>GeeksforGeeks</h1>
        <h2>Cell Spacing property</h2>
        <h3>cellspacing = "30px"</h3>
        <table style="width:70%;"cellspacing="30px">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th> 
            <th>Age</th>
        </tr>
        <tr>
            <td>Harsh</td>
            <td>Agarwal</td>
            <td>15</td>
        </tr>
        <tr>
            <td>Manas</td>
            <td>Chhabra</td>
            <td>27</td>
        </tr>
        <tr>
            <td>Manas</td>
            <td>Chhabra</td>
            <td>27</td>
        </tr>
        <tr>
            <td>Ramesh</td>
            <td>Chandra</td>
            <td>28</td>
        </tr>
        </table>
        </center>
    </body>
</html>                    

Producción:

Navegadores compatibles: los navegadores compatibles con el relleno de celdas y el espacio entre celdas se enumeran a continuación:

  • safari de manzana
  • Google Chrome
  • Firefox
  • Ópera
  • explorador de Internet

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *