En este artículo, veremos cómo especificar el ancho que debe aparecer entre las celdas de la tabla. CSS proporciona la propiedad border-spacing que se puede usar para establecer la distancia entre los bordes de las celdas vecinas en la tabla. Esta propiedad solo funciona cuando la propiedad border-collapse se establece en no-collapse por separado.
Sintaxis:
border-spacing: length|initial|inherit;
Valores de propiedad:
- longitud-longitud: este valor se utiliza para establecer la distancia entre los bordes de las celdas adyacentes. No permite valores negativos.
- initial: este valor se utiliza para establecer la propiedad en su valor predeterminado.
Ejemplo: este ejemplo describe la propiedad de espacio entre bordes especificando el ancho que aparece entre las celdas de la tabla.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GeekforGeeks</title>
<style>
table,
th,
td {
border: 1px solid green;
text-align: center;
}
.geeks {
border-collapse: separate;
background-color: none;
border-spacing: 30px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2> The border-spacing Property</h2>
<table style="width:70%" class="geeks">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Anil</td>
<td>Kumar</td>
</tr>
<tr>
<td>Vikas</td>
<td>Kumar</td>
</tr>
<tr>
<td>Vishal</td>
<td>Yadav</td>
</tr>
</table>
</center>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo describe la propiedad border-spacing.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GeekforGeeks</title>
<style>
table {
border-spacing: 10px;
border: 1px solid green;
}
td {
width: 22px;
height: 25px;
background: #1d9138;
color: white;
text-align: center;
font-family:sans-serif;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>Border-spacing Property</h2>
<table>
<tr>
<td>Geeks</td>
<td>for</td>
<td>Geeks</td>
</tr>
<tr>
<td>Geeks</td>
<td>for</td>
<td>Geeks</td>
</tr>
<tr>
<td>Geeks</td>
<td>for</td>
<td>Geeks</td>
</tr>
</table>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por abhishekpal97854368 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA