Lección 3 de Desarrollo Web - Tablas

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.

• Agregue el siguiente código CSS para mostrar el borde.

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

• Observe que hemos aplicado las reglas de estilo a ambos <th> y <td> separándolos con una coma.
• Ahora puede ver claramente la estructura de la tabla.
• Por ejemplo, puede ver que en las celdas de datos, el texto está alineado a la izquierda de forma predeterminada, mientras que en las celdas de encabezado, el texto está alineado al centro.
• También notará que el texto alineado a la izquierda está justo en el borde de la celda, que es más difícil de leer. Arreglaremos esto en la siguiente sección.

Siguiente: Relleno y Visualización