Differences

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

--- en:web_development:tables:content [2021/12/07 09:01]
mag created
+++ en:web_development:tables:content [2023/08/16 09:33] (current)
@@ Line 1: / Line 1: @@
-====== Web Development Lesson 3 - Tables ======
+====== Web Development Lesson 4 - Tables ======
 ===== Table Content and Structure =====
 ==== Objective ====
@@ Line 5: / Line 5: @@
 ==== Setup ====
-  * We'll start from scratch for this lesson.
+  * Create a file in Visual Studio Code in your folder (not under 'project') and name it ‘tables.html’.
-  * Delete everything from the HTML, Javascript and CSS panels in [[https://jsfiddle.net/|jsfiddle]].
+  * Type ‘html’ and select ‘html:5’ to add standard HTML code.
 ==== Structure ====
@@ Line 14: / Line 14: @@
 | David | Ospina Ramírez | Colombia | 33 | Portero |
-  * To start, add a <html><table></html> tag to the HTML section of your jsfiddle.
+  * To start, add a <html><table></html> tag to the <html><body></html> of your code.
 <code><table>
@@ Line 83: / Line 83: @@
 ==== Borders ====
-  * Add the following CSS code to display the border.
+  * To see the structure of the table directly, we need to add borders using CSS.
+  * Link 'style.css' in the <html><head></html> by typing 'link' on a new line and selecting 'link:css'.
+  * Create 'style.css' and add the following CSS code to display the border.
 <code>td, th {
   border-width: 1px;
@@ Line 93: / Line 95: @@
   * You will also notice that the left-aligned text is right on the edge of the cell, which is is harder to read. We'll fix this in the next section.
-[[en:web_development:tables:margins_padding|Next: Margins and Padding]]
+==== Final Code ====
+  * [[https://techschool.murraygunn.id.au/webdev/classes/tables/1/en.php|tables.html]]
+  * [[https://techschool.murraygunn.id.au/webdev/classes/tables/1/style.php|style.css]]
+  * [[https://techschool.murraygunn.id.au/webdev/classes/tables/1/tables.html|result]]
+[[en:web_development:tables:padding|Next: Padding]]

Tech School

User Tools

Site Tools

Differences

Page Tools