Desarrollo Web Lección 4 - Tablas

Contenido y Estructura de la Tabla

Objetivo

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 ya asignar celdas como encabezados.

Configuración

Cree un archivo en Visual Studio Code en su carpeta (no en 'proyecto') y asígnele el nombre 'tables.html'.
Escriba 'html' y seleccione 'html:5' para agregar código HTML estándar .

Estructura

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

Nombre	Apellido	Nacionalidad	Años	Posición
David	Ospina Ramírez	Colombia	33	Portero

Para comenzar, agregue una etiqueta <table> a la <body> de su código.

<table>

</table>

Ahora añadimos la cabecera y el cuerpo de la tabla.

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

<thead> contiene los encabezados y <tbody> contiene los datos.
No necesita usarlos 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 desea colocar los encabezados en la parte superior, pero si elige colocar los encabezados en la primera columna, es un buen momento para no usar <thead> y <tbody>.
Agreguemos la fila de encabezado con cinco celdas de encabezado.

<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
      <th>Nacionalidad</th>
      <th>Años</th>
      <th>Posición</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 encabezados están automáticamente en negrita.
Agreguemos una línea de datos.

<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
      <th>Nacionalidad</th>
      <th>Años</th>
      <th>Posición</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>David</td>
      <td>Ospina Ramírez</td>
      <td>Colombia</td>
      <td>33</td>
      <td>Portero</td>
    </tr>
  </tbody>
</tabla>

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 usted mismo 3 líneas más usando los siguientes datos.

Nombre	Apellido	Nacionalidad	Años	Posición
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

¿Como fuiste? ¿Se ve bien la mesa?
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 inteligentes.
Esto será más obvio cuando mostremos los bordes.

Fronteras

Para ver la estructura de la tabla directamente, necesitamos agregar bordes usando CSS .
Enlaza 'style.css' en el <head> escribiendo 'enlace' en una nueva línea y seleccionando 'enlace:css'.
Cree 'style.css' y agregue el siguiente código CSS para mostrar el borde.

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

Tenga en cuenta que hemos aplicado las reglas de estilo a ambos <th> y <td> separándolos con una coma.
Ahora puedes ver claramente la estructura de la tabla.
Por ejemplo, puede ver que en las celdas de datos, el texto se alinea a la izquierda de manera predeterminada, mientras que en las celdas de encabezado, el texto se alinea 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.

Codigo Final

Siguiente: Acolchado