====== Web Development Lesson 4 - Tables ====== ===== Padding ===== ==== Objective ==== In this activity we'll adjust the spacing between cells and within cells to make it more readable. ==== Setup ==== * Continue using 'tables.html' and 'style.css' 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 boundary of an element (in this case the table cell) and its content. * 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;
}

* This should be a lot more readable. ==== Collapsing Borders ==== * Personally, I don't like the space between the table cells, so I always remove it. * Apply the border-collapse property to the element.

table {
  border-collapse: collapse;
}

* Does that look better? ==== Tools: Developer Tools ==== * Let's take a look at another tool that will help you as a developer. * Open the menu of your browser. It's usually in the top right, but ask for help if you can't find it. * Select 'More Tools' then 'Developer Tools'. * This will open a panel on the bottom of your screen (Firefox) or the right of your screen (Chrome) with lots of tools that will help you understand what's going on in your page. Your browser size will be adjusted to cover the remaining area. * If your Developer Tools hasn't opened in the 'Inspector' tab, navigate to it now. * You'll see the entire structure of your HTML code in a collapsible format in this tab. * If you click on any of the tags you will see details of all the applied styles in the second pane, including any errors. * In the last pane, you'll see a box model of the element including the padding. We'll look at this in more detail in the next lesson, but for now, notice that the padding is inside the border and something called a margin is outside the border. * Click on any

in your 'Inspector' pane to view those styles. * Now click in the 'td' element of the second pane to add a new rule. * Type color: green; and see that all the data cells of your table become green, as do some of the borders. * This tool will allow you to view and edit your CSS rules without changing your files. It's a great place to test out the changes you want to make. * Now try adding margin: 10px; to your 'td' element style. * You'll see an 'i' in a circle next to the rule, telling you there's a problem. If you hover over it you'll see a message telling you that margin is not a valid property for table cells. * Try removing the 'n' from color: green; and you'll see the rule is struck out and has a warning sign next to it. You will quickly find any typing errors if you scan your CSS rules here and changes you make here won't change your original code. ==== Final Code ==== * [[https://techschool.murraygunn.id.au/webdev/classes/tables/2/style.php|style.css]] * [[https://techschool.murraygunn.id.au/webdev/classes/tables/2/tables.html|result]] [[en:web_development:tables:selectors|Next: Selectors]]