====== Web Development Lesson 4 - Tables ====== ===== Table Content and Structure ===== ==== Objective ==== In this section, we'll create a table to present the statistics for the Colombian Football team. You will learn how to structure a table in rows and columns and to assign cells as headings. ==== Setup ==== * Create a file in Visual Studio Code in your folder (not under 'project') and name it ‘tables.html’. * Type ‘html’ and select ‘html:5’ to add standard HTML code. ==== Structure ==== * A table has columns and rows. We'll create a table with the following structure ^ Name ^ Surname ^ Nationality ^ Age ^ Position ^ | David | Ospina Ramírez | Colombia | 33 | Portero | * To start, add a tag to the of your code.

* Now we add the table head and body.

* As you might expect, contains the headings and contains the data. * You don't need to use these in every table, but they are useful if you want to change the data dynamically using javascript so it's good to get used to using them. * This assumes you want your headings along the top, but if you choose to put your headings in the first column, that's a good time to not use and . * Let's add the heading row with five heading cells.


  
    
      Name
      Surname
      Nationality
      Age
      Position

* signifies the table row. * signifies a table heading cell. * Run the code to see the results. Right now, there is no border, but the headings are automatically bold. * Let's add a line of data.


  
    
      Name
      Surname
      Nationality
      Age
      Position
    
  
  
    
      David
      Ospina Ramírez
      Colombia
      33
      Portero

Name	Surname	Nationality	Age	Position
David	Ospina Ramírez	Colombia	33	Portero

* You can see that the data row follows the same structure as the header row, but the cells are labelled (table data) instead of (table header). * Complete 3 more lines yourself using the following data. ^ 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 | * How did you go? Does the table look right? * Notice that the width of each column changed to fit the width of the largest cell (longest text). Tables are clever like that. * This will be more obvious when we show the borders. ==== Borders ==== * To see the structure of the table directly, we need to add borders using CSS. * Link 'style.css' in the by typing 'link' on a new line and selecting 'link:css'. * Create 'style.css' and add the following CSS code to display the border.

td, th {
  border-width: 1px;
  border-style: solid;
}

* Notice that we have applied the style rules to both and by separating them with a comma. * Now you can clearly see the structure of the table. * 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. ==== 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]]