Differences

This shows you the differences between two versions of the page.

--- web_design:tablas:tables [2021/10/14 14:44]
mag created
+++ web_design:tablas:tables [2023/08/16 09:33] (current)
@@ Line 1: / Line 1: @@
-====== Web Development Lesson 3 - Tablas ======
+====== Lección 3 de Desarrollo Web - Tablas ======
 ===== Tablas =====
-==== Objective ====
+==== Objetivo ====
-In this section, we'll create a table to present the statistics for the Colombian Football team. You will learn how to structure a table in rows and columns and to assign cells as headings.
+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.
-==== Setup ====
-  * We'll start from scratch for this lesson.
+==== Preparacion ====
-  * Delete everything from the HTML, Javascript and CSS panels in [[https://jsfiddle.net/|jsfiddle]].
+  * Empezaremos desde cero para esta lección.
+  * Elimine todo de los paneles HTML , Javascript y CSS en [[https://jsfiddle.net/|jsfiddle]].
 ==== Structure ====
-  * A table has columns and rows. We'll create a table with the following structure
+  * Una tabla tiene columnas y filas. Crearemos una tabla con la siguiente estructura.
-^ Name ^ Surname ^ Nationality ^ Age ^ Position ^
+^ Nombre ^ Apellido ^ Nationalidad ^ Edad ^ Posición ^
 | David | Ospina Ramírez | Colombia | 33 | Portero |
-  * To start, add a <html><table></html> tag to the HTML section of your jsfiddle.
+  * Para comenzar, agregue una etiqueta <html><table></html> a la sección HTML de su jsfiddle.
 <code><table>
 </table></code>
-  * Now we add the table head and body.
+  * Ahora agregamos el encabezado y el cuerpo de la tabla.
 <code><table>
   <thead>
@@ Line 27: / Line 28: @@
   </tbody>
 </table></code>
-  * As you might expect, <html><thead></html> contains the headings and <html><tbody></html> contains the data.
+  * <html><thead></html> contiene los encabezados y <html><tbody></html> contiene los datos.
-  * You don't need to use these in every table, but they are useful if you want to change the data dynamically using javascript so it's good to get used to using them.
+  * 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.
-  * This assumes you want your headings along the top, but if you choose to put your headings in the first column, that's a good time to not use <html><thead></html> and <html><tbody></html>.
+  * 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 <html><thead></html> y <html><tbody></html>.
-  * Let's add the heading row with five heading cells.
+==== Celdas con Titulos ====
+  * Agreguemos una fila con cinco celdas y cada una con un titulo.
 <code><table>
   <thead>
@@ Line 45: / Line 49: @@
   </tbody>
 </table></code>
-  * <html><tr></html> signifies the table row.
+  * <html><tr></html> significa la fila de la tabla.
-  * <html><th></html> signifies a table heading cell.
+  * <html><th></html> significa una celda de encabezado de tabla.
-  * Run the code to see the results. Right now, there is no border, but the headings are automatically bold.
+  * Ejecute el código para ver los resultados. En este momento, no hay borde, pero los títulos se muestran automáticamente en negrita.
-  * Let's add a line of data.
+==== Celdas con Datos ====
+  * Agreguemos una fila de datos.
 <code><table>
   <thead>
@@ Line 69: / Line 76: @@
   </tbody>
 </table></code>
-  * You can see that the data row follows the same structure as the header row, but the cells are labelled <html><td></html> (table data) instead of <html><th></html> (table header).
+  * 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 3 more lines yourself using the following data.
+  * Complete 3 líneas más utilizando los siguientes datos.
-^ Name ^ Surname ^ Nationality ^ Age ^ Position ^
+^ Nombre ^ Apellido ^ Nacionalidad ^ La Edad ^ Posición ^
 | David | Ospina Ramírez | Colombia | 33 | Portero |
 | Carlos | Eccehomo Cuesta Figueroa | Colombia | 22 | Defensa |
@@ Line 78: / Line 85: @@
 | Radamel Falcao | García Zárate | Colombia | 35 | Delantero |
-  * How did you go? Does the table look right?
+  * ¿Como fuiste? ¿La tabla se ve bien?
-  * Notice that the width of each column changed to fit the width of the largest cell (longest text). Tables are clever like that.
+  * 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.
-  * This will be more obvious when we show the borders.
+  * Esto será más obvio cuando mostremos las fronteras.
-  * Add the following CSS code to display the border.
+==== Bordes ====
+  * Agregue el siguiente código CSS para mostrar el borde.
 <code>td, th {
   border-width: 1px;
   border-style: solid;
 }</code>
-  * Notice that we have applied the style rules to both <html><th></html> and <html><td></html> by separating them with a comma.
+  * Observe que hemos aplicado las reglas de estilo a ambos <html><th></html> y <html><td></html> separándolos con una coma.
-  * Now you can clearly see the structure of the table.
+  * Ahora puede ver claramente la estructura de la tabla.
-  * For instance, you can see that in data cells, text is aligned to the left by default, while in header cells, text is center aligned.
+  * 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.
-  * You will also notice that the left-aligned text is right on the edge of the cell, which is is harder to read. We'll fix this in the next section.
+  * 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:horario:margins_padding|Next: Margins and Padding]]
+[[web_design:tablas:relleno|Siguiente: Relleno y Visualización]]

Tech School

User Tools

Site Tools

Differences

Page Tools