====== Lección 3 de Desarrollo Web - Tablas ====== ===== Tablas ===== ==== 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 y a asignar celdas como encabezados/titulos. ==== Preparacion ==== * Empezaremos desde cero para esta lección. * Elimine todo de los paneles HTML , Javascript y CSS en [[https://jsfiddle.net/|jsfiddle]]. ==== Structure ==== * Una tabla tiene columnas y filas. Crearemos una tabla con la siguiente estructura. ^ Nombre ^ Apellido ^ Nationalidad ^ Edad ^ Posición ^ | David | Ospina Ramírez | Colombia | 33 | Portero | * Para comenzar, agregue una etiqueta a la sección HTML de su jsfiddle.
* Ahora agregamos el encabezado y el cuerpo de la tabla.
* contiene los encabezados y 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 y . ==== Celdas con Titulos ==== * Agreguemos una fila con cinco celdas y cada una con un titulo.
Name Surname Nationality Age Position
* 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 títulos se muestran automáticamente en negrita. ==== Celdas con Datos ==== * Agreguemos una fila de datos.
Name Surname Nationality Age Position
David Ospina Ramírez Colombia 33 Portero
* Puede ver que la fila de datos sigue la misma estructura que la fila del encabezado, pero las celdas están etiquetadas (datos de la tabla) en lugar de (encabezado de la tabla). * Complete 3 líneas más utilizando los siguientes datos. ^ Nombre ^ Apellido ^ Nacionalidad ^ La Edad ^ 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? ¿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. ==== Bordes ==== * 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 y 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. [[web_design:tablas:relleno|Siguiente: Relleno y Visualización]]