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.

• Una tabla tiene columnas y filas. Crearemos una tabla con la siguiente estructura.

• Para comenzar, agregue una etiqueta <table> a la sección HTML de su jsfiddle.

<table>

</table>

• Ahora agregamos el encabezado y el cuerpo de la tabla.

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

• <thead> contiene los encabezados y <tbody> contiene los datos.
• No es necesario utilizarlos en todas las tablas, pero son útiles si desea cambiar los datos dinámicamente usando javascript, por lo que es bueno acostumbrarse a usarlos.
• Esto supone que quiere sus títulos en la parte superior, pero si elige poner sus títulos en la primera columna, es un buen momento para no usar <thead> y <tbody>.

• Agreguemos una fila con cinco celdas y cada una con un titulo.

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

• <tr> significa la fila de la tabla.
• <th> significa una celda de encabezado de tabla.
• Ejecute el código para ver los resultados. En este momento, no hay borde, pero los títulos se muestran automáticamente en negrita.

• 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