Differences

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

--- web_design:horario:margins_padding [2021/10/11 09:03]
mag created
+++ web_design:horario:margins_padding [2023/08/16 09:33] (current)
@@ Line 1: / Line 1: @@
 ====== Web Development Lesson 3 - Tablas ======
-===== Margins and Padding =====
+===== 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**
+<code><table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Surname</th>
+      <th>Nationality</th>
+      <th>Age</th>
+      <th>Position</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>David</td>
+      <td>Ospina Ramírez</td>
+      <td>Colombia</td>
+      <td>33</td>
+      <td>Portero</td>
+    </tr>
+    <tr>
+      <td>Carlos</td>
+      <td>Eccehomo Cuesta Figueroa</td>
+      <td>Colombia</td>
+      <td>22</td>
+      <td>Defensa</td>
+    </tr>
+    <tr>
+      <td>Juan Guillermo</td>
+      <td>Cuadrado Bello</td>
+      <td>Colombia</td>
+      <td>33</td>
+      <td>Centrocampista</td>
+    </tr>
+    <tr>
+      <td>Radamel Falcao</td>
+      <td>García Zárate</td>
+      <td>Colombia</td>
+      <td>35</td>
+      <td>Delantero</td>
+    </tr>
+  </tbody>
+</table></code>
+**CSS**
+<code>td, th {
+  border-width: 1px;
+  border-style: solid;
+}</code>
+==== 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.
+<code>td {
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}</code>
+==== Collapsing Borders ====
+  * Personally, I don't like the space between the table cells, so I like to remove it.
+  * Apply the <html>border-collapse</html> property to the <html><table></html> element.
+<code>table {
+  border-collapse: collapse;
+}</code>
+==== 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.
+  * <html>block</html> elements stack on top of each other. Paragraphs and headings are block elements.
+  * <html>inline</html> elements line up side to side in a single row. Text elements like <html><span></html>, <html><strong></html> and <html><em></html> 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.
+<code>display: block;</code>
+  * 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 <html>block</html> to <html>none</html>.
+<code>display: none;</code>
+  * 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 <html>display: none;</html>
+[[web_design:horario:selectors|Next: Selectors]]

Tech School

User Tools

Site Tools

Differences

Page Tools