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.

• Agreguemos una fila de datos.

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

• Puede ver que la fila de datos sigue la misma estructura que la fila del encabezado, pero las celdas están etiquetadas <td> (datos de la tabla) en lugar de <th> (encabezado de la tabla).
• Complete 3 líneas más utilizando los siguientes datos.

• ¿Como fuiste? ¿La tabla se ve bien?
• Observe que el ancho de cada columna cambió para ajustarse al ancho de la celda más grande (texto más largo). Las tablas son así de ingeniosas.
• Esto será más obvio cuando mostremos las fronteras.

• 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