====== Web Development Lesson 3 - Tablas ====== ===== Padding and Display ===== ==== Objective ==== In this activity we'll adjust the spacing between cells and within cells to make it more readable. We'll also look at various display options used to position elements in relation to each other. ==== Setup ==== * Continue using your [[https://jsfiddle.net|jsfiddle]] with your code from the previous activity. It should look like this. **HTML**


  
    
      Name
      Surname
      Nationality
      Age
      Position
    
  
  
    
      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

Name	Surname	Nationality	Age	Position
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;
}

==== Padding ==== * Padding is the space between the element (in this case the text) and the border. * Let's add 10 pixels around each side of the text in data cells. * Because we only want to apply the padding to the data cells and not the header cells, we have to create a new target in the CSS code.

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

==== Collapsing Borders ==== * Personally, I don't like the space between the table cells, so I like to remove it. * Apply the border-collapse property to the element.

table {
  border-collapse: collapse;
}

==== Block vs Inline ==== * Every element in HTML is either block or inline, which affects how it and the elements around it appear on the page. * block elements stack on top of each other. Paragraphs and headings are block elements. * inline elements line up side to side in a single row. Text elements like , and are inline elements. * Let's look at the difference. By default, table cells are inline elements (they are arranged side by side), but we can force them to be block elements using the following code in the td target. display: block; * What happens when you run the code? Do all the table cells stack on top of each other? * There is another option you can use. Try changing block to none. display: none; * What happened? The data cells should disappear. * This option isn't much use on its own as noone would ever see the content. It's only useful when using Javascript to change an element's visibility based on content or user action. * To restore the table, remove the code display: none; [[web_design:horario:selectors|Next: Selectors]]