Tech School

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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 <html><table></html> a la <html><body></html> de su código.
<code><table>

</table></code>
  * Ahora añadimos la cabecera y el cuerpo de la tabla.
<code><table>
  <thead>
    
  </thead>
  <tbody>
    
  </tbody>
</table></code>
  * <html><thead></html> contiene los encabezados y <html><tbody></html> 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 <html><thead></html> y <html><tbody></html>.
  * Agreguemos la fila de encabezado con cinco celdas de encabezado.
<code><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></code>
  * <html><tr></html> significa la fila de la tabla.
  * <html><th></html> 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.
<code><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></code>
  * Puede ver que la fila de datos sigue la misma estructura que la fila del encabezado, pero las celdas están etiquetadas <html><td></html> (datos de la tabla) en lugar de <html><th></html> (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 <html><head></html> 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.
<code>td, th {
  border-width: 1px;
  border-style: solid;
}</code>
  * Tenga en cuenta que hemos aplicado las reglas de estilo a ambos <html><th></html> y <html><td></html> 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 ====
  * [[https://techschool.murraygunn.id.au/webdev/classes/tables/1/es.php|tables.html]]
  * [[https://techschool.murraygunn.id.au/webdev/classes/tables/1/style.php|style.css]]
  * [[https://techschool.murraygunn.id.au/webdev/classes/tables/1/tables.html|result]]

[[es:web_development:tables:padding|Siguiente: Acolchado]]
Tech School

User Tools

Site Tools

Page Tools
