From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- files/es/learn/html/tables/advanced/index.html | 471 +++++++++++++++++ files/es/learn/html/tables/basics/index.html | 563 +++++++++++++++++++++ files/es/learn/html/tables/index.html | 34 ++ .../html/tables/structuring_planet_data/index.html | 72 +++ 4 files changed, 1140 insertions(+) create mode 100644 files/es/learn/html/tables/advanced/index.html create mode 100644 files/es/learn/html/tables/basics/index.html create mode 100644 files/es/learn/html/tables/index.html create mode 100644 files/es/learn/html/tables/structuring_planet_data/index.html (limited to 'files/es/learn/html/tables') diff --git a/files/es/learn/html/tables/advanced/index.html b/files/es/learn/html/tables/advanced/index.html new file mode 100644 index 0000000000..a74817c5d4 --- /dev/null +++ b/files/es/learn/html/tables/advanced/index.html @@ -0,0 +1,471 @@ +--- +title: Funciones avanzadas de las tablas HTML y accesibilidad +slug: Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad +translation_of: Learn/HTML/Tables/Advanced +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +

En el segundo artículo de este módulo, analizamos algunas características más avanzadas de las tablas HTML, como los subtítulos/resúmenes, la agrupación de filas en las secciones del encabezado, el cuerpo y el pie de página; y también analizamos la accesibilidad de las tablas para usuarios con discapacidad visual.

+ + + + + + + + + + + + +
Prerrequisitos:Conceptos básicos de HTML (ver Introducción al HTML).
Objetivo:Aprender las características más avanzadas de las tablas HTML y la accesibilidad de las tablas.
+ +

Añadir un subtítulo a tu tabla con <caption>

+ +

Puedes dar un título a tu tabla colocándolo dentro de un elemento {{htmlelement ("caption")}} y anidándolo dentro del elemento {{htmlelement ("table")}}. Debes ponerlo justo debajo de la etiqueta de apertura <table>.

+ +
<table>
+  <caption>Dinosaurios en el período Jurásico</caption>
+
+  ...
+</table>
+ +

Como puedes deducir a partir del breve ejemplo anterior, el título debe contener una descripción del contenido de la tabla. Esto es útil para todos los lectores que deseen descubrir de un vistazo si la tabla les resulta útil mientras ojean la página, pero es útil especialmente para usuarios ciegos. En lugar de que un lector de pantalla lea el contenido de muchas celdas solo para averiguar de qué trata la tabla, el lector puede contar con el título para luego decidir si leer la tabla con mayor detalle.

+ +

Los subtítulos se colocan directamente debajo de la etiqueta <table>.

+ +
+

Nota: El atributo {{htmlattrxref("summary","table")}} también se puede usar en el elemento table para proporcionar una descripción; los lectores de pantalla también lo leen. Sin embargo, recomendamos usar el elemento caption, porque {{htmlattrxref("summary","table")}} está {{glossary("obsoleto")}} conforme a la especificación HTML5 y porque los usuarios sin discapacidad visual no pueden leerlo (no aparece en la página).

+
+ +

Aprendizaje activo: Añadir un subtítulo

+ +

Vamos a probarlo con un ejemplo del artículo anterior.

+ +
    +
  1. Abre el ejemplo del horario de clases de la profesora de idiomas del final de conocimientos básicos de las tablas HTML, o haz una copia local de nuestro archivo timetable-fixed.html.
    2. +
  2. Añade un título adecuado a la tabla.
    3. +
  3. Guarda tu código, ábrelo en un navegador y observa qué aspecto presenta.
    4. +
+ +
+

Nota: Puedes encontrar nuestra versión en GitHub: consulta timetable-caption.html (mirar en vivo).

+
+ +

Añadir estructura con <thead>, <tfoot> y <tbody>

+ +

A medida que la estructura de las tablas se vuelve más compleja, es útil darles una estructura más definida. Una forma clara de hacerlo es con {{htmlelement ("thead")}}, {{htmlelement ("tfoot")}} y {{htmlelement ("tbody")}}, que te permiten marcar un encabezado, un pie de página y una sección del cuerpo de la tabla.

+ +

Estos elementos no mejoran las características de accesibilidad de la tabla para los usuarios de lectores de pantalla ni su aspecto visual en sí. Sin embargo, son muy útiles para la aplicación de estilo y la compaginación, porque actúan como soportes útiles para añadir CSS a tu tabla. Como ejemplos interesantes, en el caso de una tabla extensa, puedes hacer que el encabezado y el pie de página se repitan en cada página impresa, y también que el cuerpo de la tabla se muestre en una sola página y desplazarte por los contenidos arriba y abajo con la barra de desplazamiento.

+ +

Para utilizarlos:

+ + + +
+

Nota: <tbody> se incluye siempre en todas las tablas de forma implícita si no lo especificas en tu código. Para comprobarlo, abre uno de tus ejemplos anteriores que no incluya <tbody> y mira el código HTML en las herramientas de desarrollo de tu navegador; verás que el navegador ha añadido esta etiqueta. Quizás te preguntes por qué deberías molestarte en incluirlo. Debes hacerlo para tener más control sobre la estructura y el estilo de la tabla.

+
+ +

Aprendizaje activo: Añadir estructura a la tabla

+ +

Pongamos en acción estos elementos nuevos.

+ +
    +
  1. En primer lugar, haz una copia local de spending-record.html y minimal-table.css en una carpeta nueva de tu ordenador.
    2. +
  2. Intenta abrirlo en un navegador: observarás que se ve bien, pero podría mejorarse. La fila «SUM», que contiene una suma de las cantidades gastadas, parece estar en el lugar equivocado, y faltan algunos detalles del código.
    3. +
  3. Coloca la fila de encabezados dentro de un elemento <thead>, la fila «SUM» dentro de un elemento <tfoot>, y el resto del contenido dentro de un elemento <tbody>.
    4. +
  4. Guarda y actualiza, y observa que añadir el elemento <tfoot> ha provocado que la fila «SUM» pase al final de la tabla.
    5. +
  5. Luego, añade un atributo {{htmlattrxref ("colspan", "td")}} para que la celda «SUM» abarque las primeras cuatro columnas, de modo que el número aparezca en la parte inferior de la columna «Costes».
    6. +
  6. Vamos a añadir un estilo adicional sencillo a la tabla para que veas cuán útiles son estos elementos para aplicar CSS. Dentro del encabezado del documento HTML hay un elemento {{htmlelement ("style")}} vacío. Añade a este elemento las líneas de código CSS siguientes: + 
    tbody {
+  font-size: 95%;
+  font-style: italic;
+}
+
+tfoot {
+  font-weight: bold;
+}
+
    +
    7. +
  7. Guarda, actualiza, y échale un vistazo al resultado. Si los elementos <tbody> y <tfoot> no estuvieran en su lugar, tendrías que escribir selectores/reglas mucho más complicados para obtener la misma aplicación de estilo.
    8. +
+ +
+

Nota: No esperamos que comprendas completamente el CSS en este momento. Aprenderás más sobre el tema cuando llegues a nuestros módulos CSS (Introducción al CSS es un buen lugar para comenzar; también tenemos un artículo específico sobre Aplicar estilo a las tablas).

+
+ +

Tu tabla final debería tener un aspecto similar al siguiente:

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Nota: También puedes encontrarlo en GitHub como spending-record-finished.html (o consultarlo también en vivo).

+
+ +

Anidar tablas

+ +

Es posible anidar una tabla dentro de otra, siempre que incluyas la estructura completa, incluido el elemento <table>. Por lo general, esto no se recomienda, porque se obtiene un marcado más confuso y menos accesible para los usuarios que usan lectores de pantalla, y además, en muchos casos sería posible sencillamente insertar celdas/filas/columnas adicionales en la tabla. Sin embargo, a veces es necesario, por ejemplo, si deseas importar contenido de forma sencilla desde otras fuentes.

+ +

El marcado siguiente muestra una tabla anidada simple:

+ +
<table id="tabla1">
+  <tr>
+    <th>título1</th>
+    <th>título2</th>
+    <th>título3</th>
+  </tr>
+  <tr>
+    <td id="nested">
+      <table id="tabla2">
+        <tr>
+          <td>celda1</td>
+          <td>celda2</td>
+          <td>celda3</td>
+        </tr>
+      </table>
+    </td>
+    <td>celda2</td>
+    <td>celda3</td>
+  </tr>
+  <tr>
+    <td>celda4</td>
+    <td>celda5</td>
+    <td>celda6</td>
+  </tr>
+</table>
+ +

La salida se verá así:

+ + + + + + + + + + + + + + + + + + + +
título1título2título3
+ + + + + + + + +
celda1celda2celda3
+ 		celda2celda3
celda4celda5celda6
+ +

Tablas para usuarios con discapacidad visual

+ +

Repasemos brevemente cómo usamos las tablas de datos. Una tabla puede ser una herramienta útil porque nos proporciona un acceso rápido a unos datos y nos permite buscar entre valores diferentes. Por ejemplo, echa un vistazo a la tabla siguiente para saber cuántos anillos se vendieron en Gante en agosto pasado. Para comprender la información que contiene la tabla, establecemos asociaciones visuales entre los datos de la tabla y sus encabezados de columna y/o fila.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Artículos vendidos en agosto de 2016
RopaAccesorios
PantalonesFaldasVestidosPulserasAnillos
BélgicaAmberes5622437223
Gante4618506115
Bruselas5127386928
Los países bajosÁmsterdam8934698538
Utrecht8012433619
+ +

Pero, ¿y si no puedes hacer esas asociaciones visuales? ¿Cómo podrías leer una tabla como la anterior? Las personas con discapacidad visual a menudo usan un lector de pantalla que les lee la información de las páginas web. Esto no resulta un problema cuando lees un texto sin formato, pero interpretar una tabla puede ser un gran desafío para una persona ciega. Sin embargo, con el marcado adecuado podemos reemplazar las asociaciones visuales por otras asociaciones de tipo programático.

+ +
+

Nota: Hay en torno a 253 millones de personas con discapacidad visual según los datos de la OMS de 2017.

+
+ +

Esta sección del artículo proporciona técnicas adicionales para conferir a las tablas la mayor accesibilidad posible.

+ +

Usar encabezados de columna y fila

+ +

Los lectores de pantalla identificarán todos los encabezados y los usarán para hacer asociaciones programáticas entre esos encabezados y las celdas con las que se relacionan. La combinación de encabezados por columna y fila identificará e interpretará los datos de cada celda para que los usuarios que usan lectores de pantalla puedan interpretar la tabla de manera similar a como lo hace un usuario sin discapacidad visual.

+ +

Ya expusimos los encabezados en nuestro artículo anterior; consulta Añadir encabezados con elementos <th>.

+ +

El atributo scope

+ +

Un nuevo tema para este artículo es el atributo {{htmlattrxref ("scope", "th")}}, que se puede añadir al elemento <th> para indicar a los lectores de pantalla exactamente para qué celdas es el encabezado. Volviendo a nuestro ejemplo anterior de registro de gastos, podrías definir los encabezados de columna inequívocamente como encabezados de columna de este modo:

+ +
<thead>
+  <tr>
+    <th scope="col">Compra</th>
+    <th scope="col">Ubicación</th>
+    <th scope="col">Fecha</th>
+    <th scope="col">Revisión</th>
+    <th scope="col">Coste (€)</th>
+  </tr>
+</thead>
+ +

Y también cada fila podría tener un encabezado definido de esta manera (si añadimos encabezados de fila y encabezados de columna):

+ +
<tr>
+  <th scope="row">Corte de pelo</th>
+
+<td>Peluquería</td>
+  <td>12/09</td>
+
+<td>Gran idea</td>
+  <td>30</td>
+</tr>
+ +

Los lectores de pantalla reconocerán el marcado estructurado de esta manera y permitirán a tus usuarios, por ejemplo, leer toda la columna o fila a la vez.

+ +

El atributo scope tiene dos valores posibles más: colgroup y rowgroup. Se utilizan para encabezados que se encuentran sobre la parte superior de varias columnas o filas. Si vuelves a echar un vistazo a la tabla «Artículos vendidos en agosto de 2016» al comienzo de esta sección, verás que la celda «Ropa» se encuentra encima de las celdas «Pantalones», «Faldas» y «Vestidos» Todas estas celdas deben estar marcadas como encabezados (<th>), pero «Ropa» es un encabezado que está por encima y define los otros tres subencabezados. Por lo tanto, «Ropa» debería incluir un atributo scope="colgroup", mientras que los demás tendrían un atributo scope="col".

+ +

Los atributos de id y encabezados

+ +

Una alternativa al uso del atributo scope es usar los atributos {{htmlattrxref ("id")}} y {{htmlattrxref ("headers", "td")}} para crear asociaciones entre encabezados y celdas. La forma en que se usan es la siguiente:

+ +
    +
  1. Añades un id único a cada elemento <th>.
    2. +
  2. Añades un atributo headers a cada elemento <td>. Cada atributo headers debe contener una lista de los id de todos los elementos <th> que actúan como encabezado de esa celda, separados por espacios.
    3. +
+ +

Esto le da a tu tabla HTML una definición explícita de la posición de cada celda en la tabla definida por los encabezados de cada columna y fila de la que forma parte, como en una hoja de cálculo. Para que funcione bien, la tabla necesita tanto encabezados de columna como encabezados de fila.

+ +

Volviendo a nuestro ejemplo de gastos, los dos fragmentos anteriores podrían reescribirse así:

+ +
<thead>
+  <tr>
+    <th id="purchase">Compra</th>
+    <th id="location">Ubicación</th>
+    <th id="date">Fecha</th>
+    <th id="evaluation">Revisión</th>
+    <th id="cost">Coste (€)</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <th id="haircut">Corte de pelo</th>
+  <td headers="location haircut">Peluquería</td>
+  <td headers="date haircut">12/09</td>
+  <td headers="evaluation haircut">Gran idea</td>
+  <td headers="cost haircut">30</td>
+</tr>
+
+  ...
+
+</tbody>
+ +
+

Nota: Este método crea asociaciones muy precisas entre los encabezados y las celdas de datos, pero utiliza un montón más de código de marcado y no permite errores. El enfoque scope suele bastar para la mayoría de las tablas.

+
+ +

Aprendizaje activo: jugar con scope y headers

+ +
    +
  1. Para este ejercicio final, te proponemos que primero hagas copias locales de items-sold.html y minimal-table.css en un directorio nuevo.
    2. +
  2. Ahora intenta añadir los atributos scope adecuados para hacer que esta tabla sea más accesible.
    3. +
  3. Por último, haz otra copia de los archivos originales, y esta vez añade accesibilidad a la tabla utilizando los atributos id y headers.
    4. +
+ +
+

Nota: Puedes verificar tu trabajo con nuestros ejemplos terminados: consulta items-sold-scope.html (consúltalo en vivo) y items-sold-headers.html (consúltalo en vivo).

+
+ +

Resumen

+ +

Podrías aprender algo más sobre las tablas en HTML, pero en realidad te hemos proporcionado toda la información que necesitas saber en este momento. En este punto, es posible que desees ir y aprender sobre la aplicación de estilo a tablas HTML: consulta Aplicar estilo a las tablas.

+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +
+

En este módulo

+ + +
diff --git a/files/es/learn/html/tables/basics/index.html b/files/es/learn/html/tables/basics/index.html new file mode 100644 index 0000000000..7259adf427 --- /dev/null +++ b/files/es/learn/html/tables/basics/index.html @@ -0,0 +1,563 @@ +--- +title: Conceptos básicos de las tablas HTML +slug: Learn/HTML/Tablas/Conceptos_básicos_de_las_tablas_HTML +translation_of: Learn/HTML/Tables/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

Este artículo te ayudará a comenzar con las tablas HTML. Vamos a exponer conceptos básicos como filas y celdas, encabezados, celdas que abarcan múltiples columnas y filas, y la forma de agrupar todas las celdas de una columna para aplicarles estilo.

+ + + + + + + + + + + + +
Prerrequisitos:Conceptos básicos de HTML (ver Introducción al HTML).
Objetivo:Adquirir conocimientos básicos de las tablas HTML.
+ +

¿Qué es una tabla?

+ +

Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas (datos tabulados). Una tabla permite buscar con rapidez y facilidad valores entre diferentes tipos de datos que indiquen algún tipo de conexión. Por ejemplo, una persona y su edad, o un día de la semana o el horario de una piscina municipal.

+ +

Una tabla de datos de ejemplo que muestra los nombres y las edades de algunas personas: Chris 38, Dennis 45, Sarah 29, Karen 47.

+ +

Una tabla de datos que muestra unos horarios de clases natación

+ +

Las tablas se utilizan con mucha frecuencia en la sociedad desde hace años, como lo demuestra este documento censal de los EUA de 1800:

+ +

Un pergamino muy antiguo; cuesta un poco leer los datos, pero muestra con claridad que las tablas de datos ya se utilizaban en 1800.

+ +

Por lo tanto, no es de extrañar que los creadores de HTML proporcionen un medio con el que estructurar y presentar datos en tablas en la web.

+ +

¿Cómo funciona una tabla?

+ +

El aspecto básico de una tabla es que es un elemento rígido. Es fácil interpretar la información haciendo asociaciones visuales entre los encabezados de las filas y las columnas. Por ejemplo, observa la tabla siguiente y busca un gigante de gas joviano con 62 lunas. Puedes encontrar la respuesta asociando los encabezados de la fila y la columna correspondientes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Datos sobre los planetas de nuestro sistema solar (datos planetarios tomados de la hoja técnica sobre datos planetarios de la NASA (Nasa's Planetary Fact Sheet - Metric).
NombreMasa (1024 kg)Diámetro (km)Densidad (kg/m3)Gravedad (m/s2)Duración del día (horas)Distancia del Sol (106km)Temperatura media (°C)Número de lunasObservaciones
Planetas terrestresMercurio0,3304.8795.4273,74.222,657,91670El más cercano al Sol
Venus4,8712.1045.2438,92.802,0108,24640
La Tierra5,9712.7565.5149,824,0149,6151Nuestro planeta
Marte0,6426.7923.9333,724,7227,9-652El planeta rojo
Planetas jovianosLos gigantes de gasJúpiter1.898142.9841.32623,19,9778,6-11067El planeta más grande
Saturno568120.5366879,010,71.433,5-14062
Los gigantes de hieloUrano86,851.1181.2718,717,22.872,5-19527
Neptuno10249.5281.63811,016,14.495,1-20014
Planetas enanosPlutón0,01462.3702.0950,7153,35.906,4-2255Desclasificado como planeta en 2006, pero aún es una cuestión polémica.
+ +

Cuando se hace correctamente, incluso las personas ciegas pueden interpretar los datos de una tabla HTML. Una tabla HTML bien hecha debe mejorar la experiencia de los usuarios videntes e invidentes por igual.

+ +

Dar estilo a las tablas

+ +

También puedes echar un vistazo al ejemplo vivo en GitHub. Observarás que la tabla que encontrarás allí tiene un aspecto más legible; esto se debe a que la tabla que ves en esta página tiene un estilo mínimo, mientras que en la de la versión de GitHub se ha aplicado un CSS más significativo.

+ +

No te hagas ilusiones; para que las tablas sean efectivas en la web, debes proporcionar cierta información de estilo con CSS, así como una buena estructura sólida con HTML. En este módulo nos centramos en la parte HTML; para averiguar sobre la parte del CSS debes visitar nuestro artículo Aplicar estilo a las tablas.

+ +

En este módulo no nos vamos a centrar en el CSS, sino que te vamos a proporcionar una hoja de estilo de CSS que dará a tus tablas algo más de legibilidad de la que se obtiene por defecto si no se proporciona ningún estilo. Puedes encontrar la hoja de estilo aquí, así como también una plantilla HTML para aplicar la hoja de estilo (te darán un buen punto de partida para experimentar con las tablas HTML).

+ +

¿Cuándo no debes usar tablas HTML?

+ +

Las tablas HTML están pensadas para utilizarse con datos tabulados. Por desgracia, mucha gente utiliza las tablas HTML para hacer compaginaciones de páginas web. Por ejemplo, una fila para contener la cabecera, una fila para contener las columnas de contenido, una fila para contener el pie de página, etc. Puede encontrar más detalles y un ejemplo en Diseños de página en nuestro Módulo de aprendizaje de accesibilidad. Se solía hacer este uso de las tablas porque la compatibilidad CSS entre navegadores solía ser terrible. Los diseños de tablas son mucho menos comunes hoy en día, pero aún se pueden ver en algunos rincones de la web.

+ +

En resumen, es una mala idea usar tablas para el diseño en lugar de las técnicas de diseño CSS. Las razones principales son las siguientes:

+ +
    +
  1. Las tablas de diseño reducen la accesibilidad para los usuarios con discapacidad visual: Los lectores de pantalla que utilizan las personas con visibilidad reducida interpretan las etiquetas de una página HTML y leen su contenido para el usuario. Puesto que las tablas no son la herramienta adecuada para el diseño y el marcado es más complejo que con las técnicas de diseño CSS, la salida de los lectores de pantalla será confusa para estos usuarios.
    2. +
  2. Las tablas generan estructuras incorrectas: Como ya se mencionó, los diseños de tabla suelen involucrar estructuras de marcado más complejas que las técnicas de diseño. Esto puede dificultar la escritura, el mantenimiento y la depuración del código.
    3. +
  3. Las tablas no tienen respuesta adaptativa automática: Cuando usas contenedores de diseño adecuados (tales como {{HTMLElement ("header")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}} o {{HTMLElement ("div")}}), su ancho predeterminado es el 100% de su elemento padre. En cambio, las tablas se dimensionan de forma predeterminada según su contenido, por lo que se necesitan medidas adicionales para que el diseño de la tabla funcione de manera efectiva en todos los dispositivos.
    4. +
+ +

Aprendizaje activo: Crea tu primera tabla

+ +

Ya hemos hablado bastante sobre la teoría de las tablas, así que veamos un ejemplo práctico y construyamos una tabla simple.

+ +
    +
  1. En primer lugar, haz una copia local de blank-template.html y minimal-table.css en un directorio nuevo de tu ordenador.
    2. +
  2. El contenido de cada tabla está delimitado entre estas dos etiquetas: <table></table>. Añádelas al cuerpo de tu código HTML.
    3. +
  3. El contenedor más pequeño dentro de una tabla es una celda, que se crea con un elemento <td> ('td' significa 'table data', datos de tabla). Añade lo siguiente dentro de tus etiquetas de tabla: + 
    <td>Hola, soy tu primera celda.</td>
    +
    4. +
  4. Si quieres una fila de cuatro celdas, tienes que copiar estas etiquetas tres veces. Actualiza el contenido de la tabla para que se vea así: + 
    <td>Hola, soy tu primera celda.</td>
+<td>Soy tu segunda celda.</td>
+<td>Soy tu tercera celda.</td>
+<td>Soy tu cuarta celda.</td>
    +
    5. +
+ +

Como verás, las celdas no se colocan una debajo de la otra, sino que se alinean automáticamente entre sí en la misma fila. Cada elemento <td> crea una sola celda, y juntas forman la primera fila. Cada celda que agregamos hace crecer la fila.

+ +

Para detener el crecimiento de esta fila y comenzar a colocar las celdas posteriores en una segunda fila, necesitamos usar el elemento <tr> ('tr' significa 'table raw', fila de tabla). Vamos a verlo en detalle.

+ +
    +
  1. Coloca las cuatro celdas que has creado dentro de las etiquetas <tr>, de esta forma: + + 
    <tr>
+  <td>Hola, soy tu primera celda.</td>
+  <td>Soy tu segunda celda.</td>
+  <td>Soy tu tercera celda.</td>
+  <td>Soy tu cuarta celda.</td>
+</tr>
    +
    2. +
  2. Ahora que has hecho una fila, intenta hacer una o dos más: cada fila debe estar delimitada por un elemento <tr> adicional, con cada celda contenida en un <td>.
    3. +
+ +

Esto debería dar como resultado una tabla similar a la siguiente:

+ + + + + + + + + + + + + + + + +
Hola, soy tu primera celda.Soy tu segunda celda.Soy tu tercera celda.Soy tu cuarta celda.
Segunda fila, primera celda.Celda 2.Celda 3.Celda 4.
+ +
+

Nota: También puedes encontrar esto en GitHub como simple-table.html (consúltalo en vivo).

+
+ +

Añadir encabezados con elementos <th>

+ +

Ahora nos vamos a centrar en los encabezados de tabla: celdas especiales que van al comienzo de una fila o columna y definen el tipo de datos que contiene esa fila o columna (por ejemplo, observa las celdas «Propietario» y «Edad» en el primer ejemplo que se muestra en este artículo). Para ilustrar por qué son útiles, echa un vistazo al ejemplo de tabla siguiente. En primer lugar, el código fuente:

+ +
<table>
+  <tr>
+    <td>&nbsp;</td>
+    <td>Knocky</td>
+    <td>Flor</td>
+    <td>Ella</td>
+    <td>Juan</td>
+  </tr>
+  <tr>
+    <td>Raza</td>
+    <td>Jack Russell</td>
+    <td>Caniche</td>
+    <td>Perro callejero</td>
+    <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+    <td>Edad</td>
+    <td>16</td>
+    <td>9</td>
+    <td>10</td>
+    <td>5</td>
+  </tr>
+  <tr>
+    <td>Propietario</td>
+    <td>Suegra</td>
+    <td>Yo</td>
+    <td>Yo</td>
+    <td>Cuñada</td>
+  </tr>
+  <tr>
+    <td>Hábitos alimentarios</td>
+    <td>Come las sobras de todos</td>
+
+<td>Mordisquea la comida</td>
+    <td>Come en abundancia</td>
+
+<td>Come hasta que revienta</td>
+  </tr>
+</table>
+ +

Ahora observa la tabla representada:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KnockyFlorEllaJuan
RazaJack RussellCanichePerro callejeroCocker Spaniel
Edad169105
PropietarioSuegraYoYoCuñada
Hábitos alimentariosCome las sobras de todosMordisquea la comidaCome en abundanciaCome hasta que revienta
+ +

El problema aquí es que, si bien puedes distinguir lo que sucede, no es tan fácil cruzar datos de referencia. Sería mucho mejor si los encabezados de las columnas y las filas se destacasen de alguna manera.

+ +

Aprendizaje activo: encabezados de tabla

+ +

Intentemos mejorar esta tabla.

+ +
    +
  1. Primero, haz una copia local de nuestros archivos dogs-table.html y minimal-table.css en un directorio nuevo de tu ordenador. El HTML contiene el mismo ejemplo sobre perros que viste arriba.
    2. +
  2. Para reconocer los encabezados de la tabla como encabezados, tanto visual como semánticamente, puedes usar el elemento <th> ('th' significa 'table header', encabezado de tabla). Funciona exactamente igual que un <td>, excepto que denota un encabezado, no una celda normal. Entra en el código HTML, y cambiar todos los elementos <td> que delimitan los encabezados de tabla por elementos <th>.
    3. +
  3. Guarda tu HTML y cárgalo en un navegador. Los encabezados deberían verse como tal.
    4. +
+ +
+

Nota: Puedes encontrar nuestro ejemplo terminado en dogs-table-fixed.html en GitHub (o consultarlo en vivo).

+
+ +

¿Por qué son útiles los encabezados?

+ +

Ya hemos respondido parcialmente a esta pregunta: es más fácil encontrar los datos que buscas cuando los encabezados se destacan con claridad, y el diseño suele presentar un aspecto mejor.

+ +
+

Nota: Los encabezados de las tablas vienen con un estilo predeterminado: están en negrita y centrados (incluso si no añades tu estilo propio a la tabla) para que destaquen.

+
+ +

Los encabezados de tabla también presentan otra ventaja: junto con el atributo de scope (que veremos en el próximo artículo), mejoran la accesibilidad de las tablas porque asocian cada encabezado con todos los datos de la misma fila o columna. Así que los lectores de pantalla pueden leer una fila o columna de datos a la vez, lo cual es bastante útil.

+ +

Celdas que abarcan varias filas y columnas

+ +

A veces queremos que las celdas abarquen varias filas o columnas. Toma el ejemplo siguiente, que muestra los nombres de algunos animales comunes. En algunos casos, queremos mostrar los nombres de los machos y las hembras junto al nombre del animal. A veces no lo queremos, y en tales casos queremos que el nombre del animal abarque toda la tabla.

+ +

El marcado inicial se ve así:

+ +
<table>
+  <tr>
+    <th>Animales</th>
+  </tr>
+  <tr>
+    <th>Hipopótamo</th>
+  </tr>
+  <tr>
+    <th>Caballo</th>
+    <td>Yegua</td>
+  </tr>
+  <tr>
+    <td>Semental</td>
+  </tr>
+  <tr>
+
+<th>Cocodrilo</th>
+  </tr>
+  <tr>
+
+<th>Pollo</th>
+
+<td>Gallina</td>
+  </tr>
+  <tr>
+    <td>Gallo</td>
+  </tr>
+</table>
+ +

Pero la salida no nos da exactamente lo que queremos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Animales
Hipopótamo
CaballoYegua
Semental
Cocodrilo
PolloGallina
Gallo
+ +

Necesitamos una forma de hacer que «Animales», «Hipopótamo» y «Cocodrilo» se extiendan dos columnas más allá, y «Caballo» y «Pollo» se extiendan dos filas más abajo. Por fortuna, los encabezados de tabla y las celdas tienen los atributos colspan y rowspan, que nos permiten hacer exactamente esas cosas. Ambos aceptan un valor numérico sin unidades, que es igual al número de filas o columnas que desea abarcar. Por ejemplo, colspan="2" extiende una celda dos columnas más allá.

+ +

Usemos colspan y rowspan para mejorar esta tabla.

+ +
    +
  1. Primero, haz una copia local de nuestros archivos animals-table.html y minimal-table.css en un directorio nuevo de tu ordenador. El HTML contiene el mismo ejemplo sobre perros que viste arriba.
    2. +
  2. Luego, usa colspan para extender las celdas «Animales», «Hipopótamo» y «Cocodrilo» dos columnas más allá.
    3. +
  3. Por último, usa rowspan para extender las celdas de «Caballo» y «Pollo» dos filas más abajo.
    4. +
  4. Guarda tu código y ábrelo en un navegador para ver la mejora.
    5. +
+ +
+

Nota: Puedes encontrar nuestro ejemplo terminado en animals-table-fixed.html en GitHub (o consultarlo en vivo).

+
+ + +
+ +

Proporcionar un estilo común a las columnas.

+ +

Hay una última característica de la que queremos hablar en este artículo antes de continuar. El HTML tiene un método para definir información de estilo para una columna completa de datos en un solo lugar: los elementos <col> y <colgroup>. Estos atributos existen porque especificar el estilo de las columnas puede resultar enojoso e ineficiente; en general hay que especificar la información de estilo en cada <td> o <th> de la columna, o utilizar un selector complejo como {{cssxref(":nth-child()")}}.

+ +

Tomemos el ejemplo sencillo siguiente:

+ +
<table>
+  <tr>
+
+<th>Dato 1</th>
+    <th style="background-color: yellow">Dato 2</th>
+  </tr>
+  <tr>
+    <td>Calcuta</td>
+    <td style="background-color: yellow">Pizza</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td style="background-color: yellow">Jazz</td>
+  </tr>
+</table>
+ +

Esto nos da el resultado siguiente:

+ + + + + + + + + + + + + + + + +
Dato 1Dato 2
CalcutaNaranja
RobotsJazz
+ +

Esto no es ideal, porque hay que repetir la información de estilo en las tres celdas de la columna (en un proyecto real probablemente habría definida una clase class en las tres celdas y el estilo se especificaría en una hoja de estilo por separado). En vez de hacer esto, podemos especificar la información una sola vez, con un elemento <col>. Los elementos <col> se especifican dentro de un contenedor <colgroup> justo debajo de la etiqueta de apertura <table>. Podríamos crear el mismo efecto que vemos arriba especificando nuestra tabla de la manera siguiente:

+ +
<table>
+  <colgroup>
+    <col>
+    <col style="background-color: yellow">
+  </colgroup>
+  <tr>
+
+<th>Dato 1</th>
+
+<th>Dato 2</th>
+  </tr>
+  <tr>
+    <td>Calcuta</td>
+    <td>Pizza</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td>Jazz</td>
+  </tr>
+</table>
+ +

En efecto, definimos dos tipos de «columnas de estilo», una que especifica la información para la aplicación de estilo en cada columna. No aplicamos estilo a la primera columna, sino que aún tenemos que incluir un elemento <col> en blanco; de lo contrario, el estilo también se aplicaría a la primera columna.

+ +

Si quisiéramos aplicar la información de estilo a ambas columnas, podríamos incluir un elemento <col> con un atributo span, como este:

+ +
<colgroup>
+  <col style="background-color: yellow" span="2">
+</colgroup>
+ +

Al igual que colspan y rowspan, span toma un valor numérico sin unidades que especifica el número de columnas a las que se desea aplicar el estilo.

+ +

Aprendizaje activo: colgroup y col

+ +

Ahora es el momento de intentarlo tú mismo.

+ +

A continuación puedes ver el horario de una profesora de idiomas. El viernes tiene que enseñar holandés todo el día, pero también enseña alemán durante unas horas los martes y los jueves, y quiere resaltar las columnas que contienen los días que da clase.

+ +

{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}

+ +

Recrea la tabla a partir de los pasos siguientes.

+ +
    +
  1. Primero, haz una copia local de nuestro archivo timetable.html en un directorio nuevo de tu ordenador. El HTML contiene la misma tabla que viste arriba, menos la información de estilo de las columnas.
    2. +
  2. Añade un elemento <colgroup> en la parte superior de la tabla, justo debajo de la etiqueta <table>, en la que puedes añadir tus elementos <col> (consulta los pasos restantes a continuación).
    3. +
  3. Las dos primeras columnas deben dejarse sin estilo.
    4. +
  4. Añade un color de fondo a la tercera columna. El valor para tu atributo de style es background-color:#97DB9A;
    5. +
  5. Establece un ancho distinto para la cuarta columna. El valor de tu atributo de style es width: 42px;
    6. +
  6. Añade un color de fondo a la quinta columna. El valor para tu atributo de style es background-color:#97DB9A;
    7. +
  7. Añade un color de fondo diferente más un borde a la sexta columna, para indicar que este es un día especial porque da clases de un idioma diferente. Los valores para tu atributo de style son background-color:#DCC48E; border:4px solid #C1437A;
    8. +
  8. Los últimos dos días los tiene libres, así que no establezcas ningún color de fondo, pero sí un valor para el ancho; el valor para el atributo de style es width: 42px;
    9. +
+ +

Mira cómo sigue en el ejemplo. Si te encallas o quieres verificar tu trabajo, puedes encontrar nuestra versión en GitHub como timetable-fixed.html (o también puedes consultarlo en vivo).

+ +

Resumen

+ +

Con esto casi hemos abarcado todos los conceptos básicos de las tablas HTML. En el próximo artículo, veremos algunas características un poco más avanzadas de las tablas y comenzaremos a pensar acerca de su accesibilidad para las personas con discapacidad visual.

+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +
+

En este módulo

+ + +
diff --git a/files/es/learn/html/tables/index.html b/files/es/learn/html/tables/index.html new file mode 100644 index 0000000000..7d04eb0cbf --- /dev/null +++ b/files/es/learn/html/tables/index.html @@ -0,0 +1,34 @@ +--- +title: Tablas HTML +slug: Learn/HTML/Tablas +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

Una tarea muy común en HTML es la estructuración de datos, y para esto hay múltiples elementos y atributos. Esto unido a un poco de CSS, hace que en HTML sea sencillo mostrar tablas con información sobre tu horario escolar, los horarios de una piscina local o las estadisticas de tu equipo de dinosaurios o fútbol preferido. Este módulo te guiará en todo lo que necesitas saber sobre la estructuración tabular de datos en HTML.

+ +

Requisitos previos

+ +

Antes de comenzar este módulo, deberías de saber las cosas básicas de HTML — ver Introducción a HTML.

+ +
+

Nota: Si estas trabjando en un ordenador/tableta/otro dispositivo en el que no puedes crear tus propios archivos, puedes probar la mayoría de ejemplos online en webs como JSBin o Thimble.

+
+ +

Guías

+ +

Este módulo contiene los siguientes artículos:

+ +
+
Comenzando con tablas HTML
+
Este artículo te introduce en las tablas HTML , cubriendo las cosas más basicas como las líneas y las celdas, encabezados, crear celdas de multiples líneas y columnas, y como agrupar todas las celdas en una columna con fines estilisticos.
+
Características avanzadas y accesibilidad en tablas HTML
+
En el segundo artículo de este módulo, veremos algunas características avanzadas de las tablas HTML — como subtítulos/resumenes y agrupar líneas en la cabeza, cuerpo y pie de la tabla — además de realizar tablas accesibles para aquellos usuarios con problemas de visión.
+
+ +

Evaluación

+ +
+
Estructurar datos planetarios
+
En nuestra evaluación, te proporcionamos datos sobre los planetas de nuestro sistemas solar y tu los estructurarás en una tabla HTML.
+
diff --git a/files/es/learn/html/tables/structuring_planet_data/index.html b/files/es/learn/html/tables/structuring_planet_data/index.html new file mode 100644 index 0000000000..e9868bb95a --- /dev/null +++ b/files/es/learn/html/tables/structuring_planet_data/index.html @@ -0,0 +1,72 @@ +--- +title: 'Evaluación: Estructurando datos planetarios' +slug: Learn/HTML/Tablas/Structuring_planet_data +translation_of: Learn/HTML/Tables/Structuring_planet_data +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

En nuestra evaluación te proporcionamos datos sobre los planetas de nuestro sistema solar y tu los estructurarás en una tabla HTML.

+ + + + + + + + + + + + +
Requisitos previos:Antes de comenzar esta evaluación deberías de haber leído los artículos de este módulo.
Objetivo:Comprobar si has comprendido las tablas HTML y las características asociadas.
+ +

Punto de incio

+ +

Para comenzar esta evaluación, crea una copia local de blank-template.html, minimal-table.css, y planets-data.txt en una nueva carpeta de tu ordenador.

+ +
+

Nota: Como alternativa, puedes usar una web como JSBin o Thimble para realizar tu evaluación. Puedes pegar el HTML, CSS y JavaScript en uno de estos editores online. Si el editor online que estas usando no tiene paneles separados para JavaScript/CSS, sientete libre de ponerlos en línea dentro del mismo HTML mediante el uso de <script>/<style>.

+
+ +

Resumen del proyecto

+ +

Estás trabajando en la escuela; tus estudiantes están estudiando los planetas de nuestro sistema solar y quieres proporcionarles una forma sencilla de seguir los datos para buscar hechos sobre los planetas. Una tabla HTML sería ideal — tienes que coger los datos que tienes disponibles y convertirlos en una tabla siguiendo los pasos de abajo.

+ +

La tabla finalizada debería de verse así:

+ +

+ +

También puedes ver el ejemplo aquí (no mires el código fuente — ¡no hagas trampas!)

+ + + +

Pasos para completarlo

+ +

Los siguientes pasos describen lo que necesitas para completar el ejemplo de la tabla. Todos los datos que necesitarás están en el archivo planets-data.txt. Si tienes problemas para visualizar los datos, mira el ejemplo de arriba o intentalo dibujando un diagrama.

+ +
    +
  1. Abre tu copia de blank-template.html, y comienza la tabla dándole un contenedor exterior, una cabecera y un cuerpo. No necesitas un pie de tabla en este ejemplo.
    2. +
  2. Añade el subtítulo proporcionado a tu tabla.
    3. +
  3. Añade una línea a la cabecera que contenga todos los encabezados de columna.
    4. +
  4. Crea todas las líneas con su contenido, asegurandote marcar como cabecera aquellas celdas que lo sean.
    5. +
  5. Asegurate de que el contenido esta insertado en las celdas correctas — en los datos del .txt, cada línea del planeta esta al lado de su planeta asociado.
    6. +
  6. Añade atributos para que las líneas y columnas del encabezado no se puedan confundir con las líneas, columnas o grupos de líneas a las que encabezan.
    7. +
  7. Añade un borde negro alrededor de la columna que contiene los nombres de los planetas y sus encabezados.
    8. +
+ +

Pistas y consejos

+ + + +

Evaluación

+ +

Si estas siguiendo esta evaluación como parte de un curso organizado, deberías de ser capaz de entregar tu trabajo a tu profesor(a)/mentor para ver la puntuación. Si estas aprendiendo por tu cuenta, puedes obtener la guía de puntuación preguntando en Learning Area Discourse thread o en el canal IRC #mdn en Mozilla IRC. Intenta hacer el ejercicio primero  — ¡haciendo trampas no aprenderás nada!

+ +

{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

-- cgit v1.2.3-54-g00ecf