cellpadding set y espaciado de celda en CSS

CSS | cellpadding y cellspacing : Aquí, vamos a aprender cómo conjunto cellpadding y espaciado de celda en CSS?

Introducción:

No es desconocido ya que de vez en cuando hacemos uso de tablas en nuestra página web o página web, por lo tanto, todos estamos familiarizados con cómo crear tablas o rejillas en nuestra página web o en la web página, pero hay momentos en que queremos ajustar el espacio entre las células de las tablas o rejillas y class que esto suceda hay algunas propiedades que deben ser tomados en consideración. Existen principalmente dos propiedades que nos ayudan a lograr esta tarea y esas propiedades son cellpadding y cellspacing .

Anécdota:

Antes de que más movimiento con las propiedades, vamos a entender ¿por qué queremos un poco de espacio y relleno entre las celdas de tablas o rejillas. A menudo tienden a una gran cantidad de datos acumulan en nuestras mesas o rejillas y mientras lo hace, a veces las tablas o las redes se vuelven demasiado torpe que a su vez ayuda a los usuarios for incomprensibles. Por lo tanto, una cierta cantidad de relleno y el espaciamiento es de suma importancia para segregar los datos y al hacerlo, las tablas o rejillas también parece ser mucho más limpia y completa. Es una buena práctica para añadir un poco de espacio o de relleno cada vez que se trata de una gran cantidad de datos. Ahora veamos las propiedades de uno a uno con la ayuda de ejemplos.

Cellpadding

El propiedad cellpadding en CSS se utiliza para definir el espacio entre las celdas de la tabla y su frontera. Se necesita solamente un valor que es la longitud del acolchado a ser aplicado en píxeles. Sonidos bastante fácil ¿verdad? Todo lo que tienes que hacer es configurar el valor de longitud y se puede agregar fácilmente relleno entre las celdas de las tablas o rejillas.

Sintaxis:

    <table cellpadding = "length">

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 2px solid #f40;
}
</style>
</head>
<body>
<p>Table with cellpadding</p>
<table cellpadding="10">
<tr>
<th>Name</th>
<th>Course</th>
<th>Credits</th>
</tr>
<tr>
<td>Anjali</td>
<td>DBMS</td>
<td>3</td>
</tr>
<tr>
<td>Nidhi</td>
<td>Software Eng.</td>
<td>2</td>
</tr>
</table>
</body>
</html>

salida

Set cellpadding and cellspacing in CSS - 4

En el ejemplo anterior, se ve muy claramente que cellpadding propiedad se utiliza para añadir relleno de 10px se aplica a las celdas de la tabla.

Cellspacing

El propiedad cellspacing en CSS se utiliza para definir el espacio entre las celdas de la tabla. Se tarda sólo un valor que es la longitud del relleno para ser aplicado en píxeles. Al igual que la propiedad cellpadding Cellspacing es un gran problema cuando se trata de implicación, similar a Cellpadding que también ocupa valor de la longitud de añadir el espacio a tus células en las rejillas o tablas.

Sintaxis:

    <table cellspacing = "length">

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 2px solid #f40;
}
</style>
</head>
<body>
<p>Table with cellspacing</p>
<table cellspacing="20">
<tr>
<th>Name</th>
<th>Course</th>
<th>Credits</th>
</tr>
<tr>
<td>Anjali</td>
<td>DBMS</td>
<td>3</td>
</tr>
<tr>
<td>Nidhi</td>
<td>Software Eng.</td>
<td>2</td>
</tr>
</table>
</body>
</html>

salida

Set cellpadding and cellspacing in CSS - 5

En el ejemplo anterior, la cellspacing de 20 píxeles se aplica a las células de la mesa y también se puede observar cómo las células están espaciados uniformemente a lo largo de la mesa.


Deja un comentario

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