En esta sección, crearemos una tabla para presentar las estadísticas de la selección colombiana de fútbol. Aprenderá a estructurar una tabla en filas y columnas y a asignar celdas como encabezados/titulos.

• Empezaremos desde cero para esta lección.
• Elimine todo de los paneles HTML , Javascript y CSS en jsfiddle.

• A table has columns and rows. We'll create a table with the following structure

• To start, add a <table> tag to the HTML section of your jsfiddle.

<table>

</table>

• Now we add the table head and body.

<table>
  <thead>
    
  </thead>
  <tbody>
    
  </tbody>
</table>

• As you might expect, <thead> contains the headings and <tbody> 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 <thead> and <tbody>.
• Let's add the heading row with five heading cells.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Nationality</th>
      <th>Age</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>

• <tr> signifies the table row.
• <th> 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.

<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>

• You can see that the data row follows the same structure as the header row, but the cells are labelled <td> (table data) instead of <th> (table header).
• Complete 3 more lines yourself using the following data.

• 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.

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

• Notice that we have applied the style rules to both <th> and <td> 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.

Next: Margins and Padding