Differences

This shows you the differences between two versions of the page.

--- en:web_development:tables:padding [2021/12/07 13:59]
mag created
+++ en:web_development:tables:padding [2023/08/16 09:33] (current)
@@ Line 1: / Line 1: @@
-====== Web Development Lesson 3 - Tablas ======
+====== Web Development Lesson 4 - Tables ======
-===== Padding and Display =====
+===== Padding =====
 ==== Objective ====
 In this activity we'll adjust the spacing between cells and within cells to make it more readable.
 ==== Setup ====
-  * Continue using your [[https://jsfiddle.net|jsfiddle]] with your code from the previous activity. It should look like this.
+  * Continue using 'tables.html' and 'style.css' with your code from the previous activity. It should look like this.
 **HTML**
 <code><table>
@@ Line 54: / Line 54: @@
 ==== Padding ====
-  * Padding is the space between the element (in this case the text) and the border.
+  * 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.
@@ Line 63: / Line 63: @@
   padding-bottom: 10px;
 }</code>
+  * This should be a lot more readable.
 ==== Collapsing Borders ====
@@ Line 71: / Line 72: @@
 }</code>
   * 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 <html><td></html> in your 'Inspector' pane to view those styles.
+  * Now click in the 'td' element of the second pane to add a new rule.
+  * Type <html>color: green;</html> 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 <html>margin: 10px;</html> 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 <html>margin</html> is not a valid property for table cells.
+  * Try removing the 'n' from <html>color: green;</html> 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]]

Tech School

User Tools

Site Tools

Differences

Page Tools