====== 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 a la de su código.
* Ahora añadimos la cabecera y el cuerpo de la tabla.
* contiene los encabezados y 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 y . * Agreguemos la fila de encabezado con cinco celdas de encabezado.
Nombre Apellido Nacionalidad Años Posición
* significa la fila de la tabla. * 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. * Puede ver que la fila de datos sigue la misma estructura que la fila del encabezado, pero las celdas están etiquetadas
Nombre Apellido Nacionalidad Años Posición
David Ospina Ramírez Colombia 33 Portero
(datos de la tabla) en lugar de (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 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 y 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]]