Tech School

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Web Development Lesson 3 - Tablas ======
===== Tablas =====
==== 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 ====
  * We'll start from scratch for this lesson.
  * Delete everything from the HTML, Javascript and CSS panels in [[https://jsfiddle.net/|jsfiddle]].

==== 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 <html><table></html> tag to the HTML section of your jsfiddle.
<code><table>

</table></code>
  * Now we add the table head and body.
<code><table>
  <thead>
    
  </thead>
  <tbody>
    
  </tbody>
</table></code>
  * As you might expect, <html><thead></html> contains the headings and <html><tbody></html> 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 <html><thead></html> and <html><tbody></html>. 
  * Let's add the heading row with five heading cells.
<code><table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Nationality</th>
      <th>Age</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    
  </tbody>
</table></code>
  * <html><tr></html> signifies the table row.
  * <html><th></html> 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.
<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>
  </tbody>
</table></code>
  * You can see that the data row follows the same structure as the header row, but the cells are labelled <html><td></html> (table data) instead of <html><th></html> (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.
  * Add the following CSS code to display the border.
<code>td, th {
  border-width: 1px;
  border-style: solid;
}</code>
  * Notice that we have applied the style rules to both <html><th></html> and <html><td></html> 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.

[[web_design:horario:margins_padding|Next: Margins and Padding]]
Tech School

User Tools

Site Tools

Page Tools
