====== Lección 3 de desarrollo web - Tablas ====== ===== Relleno y Visualización ===== ==== Objetivo ==== En esta actividad, ajustaremos el espacio entre celdas y dentro de las celdas para que sea más legible. También veremos varias opciones de visualización que se utilizan para colocar elementos entre sí. ==== Preparacion ==== Continúe usando su [[https://jsfiddle.net|jsfiddle]] con su código de la actividad anterior. Debe parecer como este. **HTML**


  
    
       Nombre 
       Apellido 
       Nacionalidad 
       Edad 
       Posición 
    
  
  
    
       David 
       Ospina Ramírez 
       Colombia 
       33 
       Portero 
    
    
       Carlos 
       Eccehomo Cuesta Figueroa 
       Colombia 
       22 
       Defensa 
    
    
       Juan Guillermo 
       Cuadrado Bello 
       Colombia 
       33 
       Centrocampista 
    
    
       Radamel Falcao 
       García Zárate 
       Colombia 
       35 
       Delantero

**CSS**

td, th {
  border-width: 1px;
  border-style: solid;
}

==== Relleno ==== * El relleno es el espacio entre el elemento (en este caso el texto) y el borde. * Agreguemos 10 píxeles a cada lado del texto en las celdas de datos. * Debido a que solo queremos aplicar el relleno a las celdas de datos y no a las celdas de encabezado, tenemos que crear un nuevo objetivo en el código CSS.

td {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  fondo acolchado: 10px;
}

==== Contraer Bordes ==== * Personalmente, no me gusta el espacio entre las celdas de la tabla, así que me gusta eliminarlo. * Aplicar la border-collapse propiedad al elemento .

table {
  border-collapse: collapse;
}

==== Bloque vs en línea ==== * Cada elemento en HTML es en bloque o en línea, lo que afecta la forma en que aparece en la página y los elementos que lo rodean. * Los elementos block se apilan uno encima del otro. Los párrafos y encabezados son elementos de bloque. * los elementos in-line se alinean de lado a lado en una sola fila. Los elementos de texto como , y son elementos en línea. * Veamos la diferencia. De forma predeterminada, las celdas de la tabla son elementos en línea (están organizados uno al lado del otro), pero podemos forzarlos a que sean elementos de bloque usando el siguiente código en el destino td. display: block; * ¿Qué sucede cuando ejecuta el código? ¿Se apilan todas las celdas de la tabla una encima de la otra? * Hay otra opción que puede utilizar. Intente cambiar block a none. display: none; * ¿Qué sucedió? Las celdas de datos deberían desaparecer. * Esta opción no es de mucha utilidad por sí sola, ya que nadie vería el contenido. Solo es útil cuando se usa Javascript para cambiar la visibilidad de un elemento según el contenido o la acción del usuario. * Para restaurar la tabla, elimine el código display: none; [[web_design:tablas:selectores|Siguiente: Selectores]]