Tech School

User Tools

Site Tools

Trace:
en:web_development:tables:content

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
en:web_development:tables:content [2021/12/07 13:55]
mag [Borders] 		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 ===== ===== Table Content and Structure =====
 ==== Objective ==== ==== Objective ====
Line 5: Line 5:
  
 ==== Setup ==== ==== 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 ==== ==== Structure ====
Line 14: Line 14:
 | David | Ospina Ramírez | Colombia | 33 | Portero | | 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> <code><table>
  
Line 83: Line 83:
  
 ==== Borders ==== ==== 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 { <code>td, th {
   border-width: 1px;   border-width: 1px;
Line 92: Line 94:
   * For instance, you can see that in data cells, text is aligned to the left by default, while in header cells, text is center aligned.   * For instance, you can see that in data cells, text is aligned to the left by default, while in header cells, text is center aligned.
   * 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.   * 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.
 +
 +==== 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]] [[en:web_development:tables:padding|Next: Padding]]
en/web_development/tables/content.1638914107.txt.gz · Last modified: 2023/08/16 09:33 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki