En las tablas podemos controlar la distancia entra las celdas, y entre el borde de la celda y su contenido. Estos valores los podemos definir con “cellspacing” y “cellpadding” respectivamente.
cellspacing: Este atributo permite determinar o especificar la distancia entre las celdas y entre las celdas y el margen exterior de la tabla. El valor de este atributo se mide en pixeles y es válido para todas las celdas.
cellpadding: Este atributo nos permite especificar la distancia entre el margen interior de la celda y su contenido. En el caso de este atributo, si su valor es en pixeles los cuatro bordes de la celda deberían estar a la distancia indicada del contenido. En cambio si el valor es un porcentaje, los bordes superior e inferior estarán separados a una distancia porcentual del valor disponible verticalmente y lo mismo para los bordes derecho e izquierdo que estarán separados al porcentaje indicado del espacio disponible horizontalmente.
Código de Ejemplo aplicando las características vistas anteriormente: Se ha aplicado una distancia de 50 pixeles de separación entre celdas (cellspacing), y de 50% en la separación del contenido y los bordes (cellpadding).
<html>
<head>
<title>Tabla - Alineación vertical de celdas</title>
</head>
<body>
<table border="1" bordercolorlight="red" bordercolordark="maroon" cellspacing="50" cellpadding="50%">
<tr>
<th width="20%" >Nombre</th>
<th width="20%" >Telefono</th>
<th width="20%" >Otros</th>
<th width="20%">Comentarios</th>
</tr>
<tr>
<td width="20%" align="left">Izquierda</td>
<td width="20%" align="right">derecha</td>
<td width="20%" align="center">centro</td>
<td width="20%" align="justify">texto justificado izq. y derecha</td>
</tr>
<tr>
<td width="20%" align="left">Izquierda</td>
<td width="20%" align="right">derecha</td>
<td width="10%" align="center">centro</td>
<td width="20%" align="justify">texto justificado izq. y derecha</td>
</tr>
<tr>
<td width="20%" align="left">Izquierda</td>
<td width="20%" align="right">derecha</td>
<td width="20%" align="center">centro</td>
<td width="20%" align="justify">texto justificado izq. y derecha</td>
</tr>
</table>
</body>
</html>
Programa 65
Puedes probar el código haciendo copiar y pegar.
Representación del código en el explorador.
No hay comentarios:
Publicar un comentario