lunes, 5 de diciembre de 2016

83 - HTML - Tablas - Atributos “cellspacing” y “cellpadding”

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.
image
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.
image
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.
image