En este artículo, sabremos cómo agregar espacio entre elementos en la tabla HTML, además de comprender su implementación a través de los ejemplos. Podemos usar CSS normal para hacer cambios en la tabla, donde usaremos la propiedad de borde para dar espacio entre diferentes elementos del cuerpo .
No se requieren conocimientos previos y profundos, solo son trucos básicos de CSS y HTML.
Nota: Lo único que se debe tener en cuenta es que debe haber una etiqueta «tr» dentro de la etiqueta tbody.
Ejemplo 1: el código que usa la propiedad border-top para proporcionar el espacio entre los elementos se muestra a continuación.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<style>
body {
color: #fff;
font-size: 12px;
}
table {
border-collapse: collapse;
}
table td {
padding: 5px;
background-color: #093d24;
}
.tbody {
border-top: 25px solid #0f9d58;
}
</style>
</head>
<body>
<table>
<tbody class="tbody">
<tr>
<td>GeeksforGeeks</td>
<td>GeeksforGeeks</td>
</tr>
<tr>
<td>GeeksforGeeks</td>
<td>GeeksforGeeks</td>
</tr>
</tbody>
<tbody class="tbody">
<tr>
<td>GeeksforGeeks</td>
<td>GeeksforGeeks</td>
</tr>
<tr>
<td>GeeksforGeeks</td>
<td>GeeksforGeeks</td>
</tr>
</tbody>
<tbody class="tbody">
<tr>
<td>GeeksforGeeks</td>
<td>GeeksforGeeks</td>
</tr>
<tr>
<td>GeeksforGeeks</td>
<td>GeeksforGeeks</td>
</tr>
</tbody>
</table>
</body>
</html>
Producción:
Adición del espacio entre los elementos de la tabla
Ejemplo 2: en el siguiente ejemplo, hemos utilizado la propiedad ::before selector , que ayudará a dar un margen entre los elementos tbody, por lo que el código para esto se proporciona a continuación. Además, hemos utilizado overflow: propiedad oculta en la tabla para evitar el desbordamiento del elemento anterior.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
color: #fff;
font-size: 12px;
background-color: #f2f2f2;
}
table {
overflow: hidden;
border-collapse: collapse;
position: relative;
}
table td {
padding: 5px;
border: 1px solid #000;
background-color: #093d24;
}
.tbody::before {
content: "";
margin: 10px;
}
</style>
<title>Document</title>
</head>
<body>
<table>
<tbody class="tbody">
<tr>
<td>GeeksforGeeks</td>
<td>GeeksforGeeks</td>
</tr>
<tr>
<td>GeeksforGeeks</td>
<td>GeeksforGeeks</td>
</tr>
</tbody>
<tbody class="tbody">
<tr>
<td>GeeksforGeeks</td>
<td>GeeksforGeeks</td>
</tr>
<tr>
<td>GeeksforGeeks</td>
<td>GeeksforGeeks</td>
</tr>
</tbody>
<tbody class="tbody">
<tr>
<td>GeeksforGeeks</td>
<td>GeeksforGeeks</td>
</tr>
<tr>
<td>GeeksforGeeks</td>
<td>GeeksforGeeks</td>
</tr>
</tbody>
</table>
</body>
</html>
Producción:
Evitar el desbordamiento del elemento anterior usando la propiedad de desbordamiento