Differences

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

--- web_design:tablas:tables [2021/10/14 15:18]
mag in Spanish
+++ web_design:tablas:tables [2023/08/16 09:33] (current)
@@ Line 34: / Line 34: @@
 ==== Celdas con Titulos ====
-  * Let's add the heading row with five heading cells.
+  * Agreguemos una fila con cinco celdas y cada una con un titulo.
 <code><table>
   <thead>
@@ Line 49: / 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.
 ==== Celdas con Datos ====
-  * Let's add a line of data.
+  * Agreguemos una fila de datos.
 <code><table>
   <thead>
@@ Line 76: / 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 85: / 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.
 ==== Bordes ====
-  * Add the following CSS code to display the border.
+  * 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