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

8 comentarios:

  1. gracias. muy buena explicación :)

    ResponderEliminar
  2. Excelente aporte, me sirvió. Muchas gracias!

    ResponderEliminar
  3. excelente estuvo demasiado bien saludos....

    ResponderEliminar
  4. Nada más que en mi tarea me pide escribir que valores puede tener:(

    ResponderEliminar
  5. Hola, supongo que los valores van de 1 a 100%. Por otro lado esta caracteristica es obsoleta y posiblmente sea eliminada pronto, aunque en algunos navegadores aun funcione. Se recomienda intentar utilizar "border-spacing" que es una propiedad de CSS.
    Si te interesa la informatica tenemos un nuevo blog especializado donde vamos actualizando la informacion, te invito a visitarlo https://respiraweb.blogspot.com
    saludos y suerte con tu tarea :)

    ResponderEliminar

Gracias por tu comentario, en un maximo de 48 horas sera publicado.