diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
| commit | a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 (patch) | |
| tree | 5032e6779a402a863654c9d65965073f09ea4182 /files/es/learn/html/tables | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.gz translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.bz2 translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.zip | |
unslug es: move
Diffstat (limited to 'files/es/learn/html/tables')
| -rw-r--r-- | files/es/learn/html/tables/advanced/index.html | 471 | ||||
| -rw-r--r-- | files/es/learn/html/tables/basics/index.html | 563 | ||||
| -rw-r--r-- | files/es/learn/html/tables/index.html | 34 | ||||
| -rw-r--r-- | files/es/learn/html/tables/structuring_planet_data/index.html | 72 |
4 files changed, 1140 insertions, 0 deletions
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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conceptos básicos de HTML (ver <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender las características más avanzadas de las tablas HTML y la accesibilidad de las tablas.</td> + </tr> + </tbody> +</table> + +<h2 id="Añadir_un_subtítulo_a_tu_tabla_con_<caption>">Añadir un subtítulo a tu tabla con <caption></h2> + +<p>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 <code><table></code>.</p> + +<pre class="brush: html notranslate"><table> + <caption>Dinosaurios en el período Jurásico</caption> + + ... +</table></pre> + +<p>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.</p> + +<p>Los subtítulos se colocan directamente debajo de la etiqueta <code><table></code>.</p> + +<div class="note"> +<p><strong>Nota</strong>: El atributo {{htmlattrxref("summary","table")}} también se puede usar en el elemento <code>table</code> para proporcionar una descripción; los lectores de pantalla también lo leen. Sin embargo, recomendamos usar el elemento <code>caption</code>, 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).</p> +</div> + +<h3 id="Aprendizaje_activo_Añadir_un_subtítulo">Aprendizaje activo: Añadir un subtítulo</h3> + +<p>Vamos a probarlo con un ejemplo del artículo anterior.</p> + +<ol> + <li>Abre el ejemplo del horario de clases de la profesora de idiomas del final de <a href="/es/docs/Learn/HTML/Tablas/Conceptos_b%C3%A1sicos_de_las_tablas_HTML#Aprendizaje_activo_colgroup_y_col"> conocimientos básicos de las tablas HTML</a>, o haz una copia local de nuestro archivo <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a>.</li> + <li>Añade un título adecuado a la tabla.</li> + <li>Guarda tu código, ábrelo en un navegador y observa qué aspecto presenta.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Puedes encontrar nuestra versión en GitHub: consulta <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">mirar en vivo</a>).</p> +</div> + +<h2 id="Añadir_estructura_con_<thead>_<tfoot>_y_<tbody>">Añadir estructura con <thead>, <tfoot> y <tbody></h2> + +<p>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.</p> + +<p>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.</p> + +<p>Para utilizarlos:</p> + +<ul> + <li>El elemento <code><thead></code> debe delimitar el encabezado de la tabla; esta suele ser la primera fila, que contiene los encabezados de las columnas, pero no siempre es así. Si utilizas los elementos {{htmlelement ("col")}}/{{htmlelement ("colgroup")}}, el encabezado de la tabla debe estar justo debajo.</li> + <li>El elemento <code><tfoot></code> delimita la parte de la tabla correspondiente al pie de página; esta podría ser una fila final con elementos en las filas anteriores. Puedes incluir el pie de página de la tabla justo en la parte inferior de la tabla, donde esperarías que esté, o justo debajo del encabezado (y el navegador lo mostrará aun así en la parte inferior de la tabla).</li> + <li>El elemento <code><tbody></code> delimita las otras partes del contenido de la tabla que no están en el encabezado o en el pie de página de la tabla. Aparecerá debajo del encabezado de la tabla o, a veces, en el pie de página, según cómo hayas decidido estructurarlo.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: <code><tbody></code> 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 <code><tbody></code> y mira el código HTML en las <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">herramientas de desarrollo de tu navegador</a>; 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.</p> +</div> + +<h3 id="Aprendizaje_activo_Añadir_estructura_a_la_tabla">Aprendizaje activo: Añadir estructura a la tabla</h3> + +<p>Pongamos en acción estos elementos nuevos.</p> + +<ol> + <li>En primer lugar, haz una copia local de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> en una carpeta nueva de tu ordenador.</li> + <li>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.</li> + <li>Coloca la fila de encabezados dentro de un elemento <code><thead></code>, la fila «SUM» dentro de un elemento <code><tfoot></code>, y el resto del contenido dentro de un elemento <code><tbody></code>.</li> + <li>Guarda y actualiza, y observa que añadir el elemento <code><tfoot></code> ha provocado que la fila «SUM» pase al final de la tabla.</li> + <li>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».</li> + <li>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: + <pre class="brush: css notranslate">tbody { + font-size: 95%; + font-style: italic; +} + +tfoot { + font-weight: bold; +} +</pre> + </li> + <li>Guarda, actualiza, y échale un vistazo al resultado. Si los elementos <code><tbody></code> y <code><tfoot></code> no estuvieran en su lugar, tendrías que escribir selectores/reglas mucho más complicados para obtener la misma aplicación de estilo.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: No esperamos que comprendas completamente el CSS en este momento. Aprenderás más sobre el tema cuando llegues a nuestros módulos CSS (<a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a> es un buen lugar para comenzar; también tenemos un artículo específico sobre <a href="/es/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a>).</p> +</div> + +<p>Tu tabla final debería tener un aspecto similar al siguiente:</p> + +<div class="hidden"> +<h6 id="Hidden_example">Hidden example</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title> Mi historial de gastos </title> + <style> + + html { + font-family: sans-serif; + } + + table { + border-collapse: collapse; + border: 4px solid rgb(200,200,200); + letter-spacing: 1px; + font-size: 0.8rem; + } + + td, th { + border: 2px solid rgb(190,190,190); + padding: 10px 20px; + } + + th { + background-color: rgb(235,235,235); + } + + td { + text-align: center; + } + + tr:nth-child(even) td { + background-color: rgb(250,250,250); + } + + tr:nth-child(odd) td { + background-color: rgb(245,245,245); + } + + caption { + padding: 10px; + } + + tbody { + font-size: 90%; + font-style: italic; + } + + tfoot { + font-weight: bold; + } + </style> + </head> + <body> + <table> + +<caption> Cómo elegí gastar mi dinero </caption> + <thead> + <tr> + <th> Compra </th> + +<th> Ubicación </th> + <th> Fecha </th> + <th> Revisión </th> + +<th> Coste (€) </th> + </tr> + </thead> + <tfoot> + <tr> + <td colspan="4">SUM</td> + <td>118</td> + </tr> + </tfoot> + <tbody> + <tr> + <td> Corte de pelo </td> + +<td> Peluquería </td> + <td>12/09</td> + +<td> Gran idea </td> + <td>30</td> + </tr> + <tr> + +<td> Lasaña </td> + +<td> Restaurante </td> + <td>12/09</td> + <td> Arrepentimiento </td> + <td>18</td> + </tr> + <tr> + +<td> Zapatos </td> + <td> Zapatería </td> + <td>13/09</td> + +<td> Mucho arrepentimiento </td> + <td>65</td> + </tr> + <tr> + <td> Pasta de dientes </td> + <td> Supermercado </td> + <td>13/09</td> + +<td> Bien </td> + <td>5</td> + </tr> + </tbody> + </table> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Nota</strong>: También puedes encontrarlo en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> (o consultarlo también <a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">en vivo</a>).</p> +</div> + +<h2 id="Anidar_tablas">Anidar tablas</h2> + +<p>Es posible anidar una tabla dentro de otra, siempre que incluyas la estructura completa, incluido el elemento <code><table></code>. 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.</p> + +<p>El marcado siguiente muestra una tabla anidada simple:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>La salida se verá así:</p> + +<table id="table1"> + <tbody> + <tr> + <th>título1</th> + <th>título2</th> + <th>título3</th> + </tr> + <tr> + <td id="nested"> + <table id="table2"> + <tbody> + <tr> + <td>celda1</td> + <td>celda2</td> + <td>celda3</td> + </tr> + </tbody> + </table> + </td> + <td>celda2</td> + <td>celda3</td> + </tr> + <tr> + <td>celda4</td> + <td>celda5</td> + <td>celda6</td> + </tr> + </tbody> +</table> + +<h2 id="Tablas_para_usuarios_con_discapacidad_visual">Tablas para usuarios con discapacidad visual</h2> + +<p>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.</p> + +<table> + <caption>Artículos vendidos en agosto de 2016</caption> + <tbody> + <tr> + <td></td> + <td></td> + <th colspan="3" scope="colgroup">Ropa</th> + <th colspan="2" scope="colgroup">Accesorios</th> + </tr> + <tr> + <td></td> + <td></td> + <th scope="col">Pantalones</th> + <th scope="col">Faldas</th> + <th scope="col">Vestidos</th> + <th scope="col">Pulseras</th> + <th scope="col">Anillos</th> + </tr> + <tr> + <th rowspan="3" scope="rowgroup">Bélgica</th> + <th scope="row">Amberes</th> + <td>56</td> + <td>22</td> + <td>43</td> + <td>72</td> + <td>23</td> + </tr> + <tr> + <th scope="row">Gante</th> + <td>46</td> + <td>18</td> + <td>50</td> + <td>61</td> + <td>15</td> + </tr> + <tr> + <th scope="row">Bruselas</th> + <td>51</td> + <td>27</td> + <td>38</td> + <td>69</td> + <td>28</td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">Los países bajos</th> + <th scope="row">Ámsterdam</th> + <td>89</td> + <td>34</td> + <td>69</td> + <td>85</td> + <td>38</td> + </tr> + <tr> + <th scope="row">Utrecht</th> + <td>80</td> + <td>12</td> + <td>43</td> + <td>36</td> + <td>19</td> + </tr> + </tbody> +</table> + +<p>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.</p> + +<div class="note"> +<p><strong>Nota</strong>: Hay en torno a 253 millones de personas con discapacidad visual según los<a href="https://www.who.int/es/news-room/fact-sheets/detail/blindness-and-visual-impairment" title="datos de la OMS sobre la discapacidad visual"> datos de la OMS de 2017</a>.</p> +</div> + +<p>Esta sección del artículo proporciona técnicas adicionales para conferir a las tablas la mayor accesibilidad posible.</p> + +<h3 class="attTitle" id="Usar_encabezados_de_columna_y_fila">Usar encabezados de columna y fila</h3> + +<p>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.</p> + +<p>Ya expusimos los encabezados en nuestro artículo anterior; consulta <a href="/es/docs/Learn/HTML/Tablas/Conceptos_b%C3%A1sicos_de_las_tablas_HTML#A%C3%B1adir_encabezados_con_elementos_%3Cth%3E">Añadir encabezados con elementos <th></a>.</p> + +<h3 class="attTitle" id="El_atributo_scope">El atributo scope</h3> + +<p>Un nuevo tema para este artículo es el atributo {{htmlattrxref ("scope", "th")}}, que se puede añadir al elemento <code><th></code> 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:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>Y también cada fila podría tener un encabezado definido de esta manera (si añadimos encabezados de fila y encabezados de columna):</p> + +<pre class="brush: html notranslate"><tr> + <th scope="row">Corte de pelo</th> + +<td>Peluquería</td> + <td>12/09</td> + +<td>Gran idea</td> + <td>30</td> +</tr></pre> + +<p>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.</p> + +<p>El atributo <code>scope</code> tiene dos valores posibles más: <code>colgroup</code> y <code>rowgroup</code>. 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 (<code><th></code>), pero «Ropa» es un encabezado que está por encima y define los otros tres subencabezados. Por lo tanto, «Ropa» debería incluir un atributo <code>scope="colgroup"</code>, mientras que los demás tendrían un atributo <code>scope="col"</code>.</p> + +<h3 class="attTitle" id="Los_atributos_de_id_y_encabezados">Los atributos de id y encabezados</h3> + +<p>Una alternativa al uso del atributo <code>scope</code> 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:</p> + +<ol> + <li>Añades un <code>id</code> único a cada elemento <code><th></code>.</li> + <li>Añades un atributo <code>headers</code> a cada elemento <code><td></code>. Cada atributo <code>headers</code> debe contener una lista de los <code>id</code> de todos los elementos <code><th></code> que actúan como encabezado de esa celda, separados por espacios.</li> +</ol> + +<p>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.</p> + +<p>Volviendo a nuestro ejemplo de gastos, los dos fragmentos anteriores podrían reescribirse así:</p> + +<pre class="brush: html notranslate"><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></pre> + +<div class="note"> +<p><strong>Nota</strong>: Este método crea asociaciones muy precisas entre los encabezados y las celdas de datos, pero utiliza <strong>un montón</strong> más de código de marcado y no permite errores. El enfoque <code>scope</code> suele bastar para la mayoría de las tablas.</p> +</div> + +<h3 id="Aprendizaje_activo_jugar_con_scope_y_headers">Aprendizaje activo: jugar con scope y headers</h3> + +<ol> + <li>Para este ejercicio final, te proponemos que primero hagas copias locales de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html">items-sold.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> en un directorio nuevo.</li> + <li>Ahora intenta añadir los atributos <code>scope</code> adecuados para hacer que esta tabla sea más accesible.</li> + <li>Por último, haz otra copia de los archivos originales, y esta vez añade accesibilidad a la tabla utilizando los atributos <code>id</code> y <code>headers</code>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Puedes verificar tu trabajo con nuestros ejemplos terminados: consulta <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">consúltalo en vivo</a>) y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html">items-sold-headers.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html">consúltalo en vivo</a>).</p> +</div> + +<h2 id="Resumen">Resumen</h2> + +<p>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 <a href="/es/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a>.</p> + +<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> + +<div> +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Tables/Basics">Conceptos básicos de las tablas en HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Funciones avanzadas de las tablas HTML y accesibilidad</a></li> + <li><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Estructuración de datos planetarios </a></li> +</ul> +</div> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conceptos básicos de HTML (ver <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Adquirir conocimientos básicos de las tablas HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="¿Qué_es_una_tabla">¿Qué es una tabla?</h2> + +<p>Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas (<strong>datos tabulados</strong>). 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.</p> + +<p><img alt="Una tabla de datos de ejemplo que muestra los nombres y las edades de algunas personas: Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p> + +<p><img alt="Una tabla de datos que muestra unos horarios de clases natación" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p> + +<p>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:</p> + +<p><img alt="Un pergamino muy antiguo; cuesta un poco leer los datos, pero muestra con claridad que las tablas de datos ya se utilizaban en 1800." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p> + +<p>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.</p> + +<h3 id="¿Cómo_funciona_una_tabla">¿Cómo funciona una tabla?</h3> + +<p>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.</p> + +<table> + <caption>Datos sobre los planetas de nuestro sistema solar (datos planetarios tomados de la hoja técnica sobre datos planetarios de la NASA (<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>).</caption> + <thead> + <tr> + <td colspan="2"></td> + <th scope="col">Nombre</th> + <th scope="col">Masa (10<sup>24</sup> kg)</th> + <th scope="col">Diámetro (km)</th> + <th scope="col">Densidad (kg/m<sup>3</sup>)</th> + <th scope="col">Gravedad (m/s<sup>2</sup>)</th> + <th scope="col">Duración del día (horas)</th> + <th scope="col">Distancia del Sol (10<sup>6</sup>km)</th> + <th scope="col">Temperatura media (°C)</th> + <th scope="col">Número de lunas</th> + <th scope="col">Observaciones</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="2" rowspan="4" scope="rowgroup">Planetas terrestres</th> + <th scope="row">Mercurio</th> + <td>0,330</td> + <td>4.879</td> + <td>5.427</td> + <td>3,7</td> + <td>4.222,6</td> + <td>57,9</td> + <td>167</td> + <td>0</td> + <td>El más cercano al Sol</td> + </tr> + <tr> + <th scope="row">Venus</th> + <td>4,87</td> + <td>12.104</td> + <td>5.243</td> + <td>8,9</td> + <td>2.802,0</td> + <td>108,2</td> + <td>464</td> + <td>0</td> + <td></td> + </tr> + <tr> + <th scope="row">La Tierra</th> + <td>5,97</td> + <td>12.756</td> + <td>5.514</td> + <td>9,8</td> + <td>24,0</td> + <td>149,6</td> + <td>15</td> + <td>1</td> + <td>Nuestro planeta</td> + </tr> + <tr> + <th scope="row">Marte</th> + <td>0,642</td> + <td>6.792</td> + <td>3.933</td> + <td>3,7</td> + <td>24,7</td> + <td>227,9</td> + <td>-65</td> + <td>2</td> + <td>El planeta rojo</td> + </tr> + <tr> + <th rowspan="4" scope="rowgroup">Planetas jovianos</th> + <th rowspan="2" scope="rowgroup">Los gigantes de gas</th> + <th scope="row">Júpiter</th> + <td>1.898</td> + <td>142.984</td> + <td>1.326</td> + <td>23,1</td> + <td>9,9</td> + <td>778,6</td> + <td>-110</td> + <td>67</td> + <td>El planeta más grande</td> + </tr> + <tr> + <th scope="row">Saturno</th> + <td>568</td> + <td>120.536</td> + <td>687</td> + <td>9,0</td> + <td>10,7</td> + <td>1.433,5</td> + <td>-140</td> + <td>62</td> + <td></td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">Los gigantes de hielo</th> + <th scope="row">Urano</th> + <td>86,8</td> + <td>51.118</td> + <td>1.271</td> + <td>8,7</td> + <td>17,2</td> + <td>2.872,5</td> + <td>-195</td> + <td>27</td> + <td></td> + </tr> + <tr> + <th scope="row">Neptuno</th> + <td>102</td> + <td>49.528</td> + <td>1.638</td> + <td>11,0</td> + <td>16,1</td> + <td>4.495,1</td> + <td>-200</td> + <td>14</td> + <td></td> + </tr> + <tr> + <th colspan="2" scope="rowgroup">Planetas enanos</th> + <th scope="row">Plutón</th> + <td>0,0146</td> + <td>2.370</td> + <td>2.095</td> + <td>0,7</td> + <td>153,3</td> + <td>5.906,4</td> + <td>-225</td> + <td>5</td> + <td>Desclasificado como planeta en 2006, pero aún es una <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">cuestión polémica</a>.</td> + </tr> + </tbody> +</table> + +<p>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.</p> + +<h3 id="Dar_estilo_a_las_tablas">Dar estilo a las tablas</h3> + +<p>También puedes <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">echar un vistazo al ejemplo vivo</a> 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.</p> + +<p>No te hagas ilusiones; para que las tablas sean efectivas en la web, debes proporcionar cierta información de estilo con <a href="/es/docs/Learn/CSS">CSS</a>, 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 <a href="/es/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a>.</p> + +<p>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 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">aquí</a>, así como también una <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">plantilla HTML</a> para aplicar la hoja de estilo (te darán un buen punto de partida para experimentar con las tablas HTML).</p> + +<h3 id="¿Cuándo_no_debes_usar_tablas_HTML">¿Cuándo no debes usar tablas HTML?</h3> + +<p>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 <a href="/es/docs/Learn/Accessibility/HTML#Page_layouts">Diseños de página</a> en nuestro <a href="/es/docs/Learn/Accessibility">Módulo de aprendizaje de accesibilidad</a>. 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.</p> + +<p>En resumen, es una mala idea usar tablas para el diseño en lugar de las <a href="/es/docs/Learn/CSS/CSS_layout">técnicas de diseño CSS</a>. Las razones principales son las siguientes:</p> + +<ol> + <li><strong>Las tablas de diseño reducen la accesibilidad para los usuarios con discapacidad visual</strong>: Los <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">lectores de pantalla</a> 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.</li> + <li><strong>Las tablas generan estructuras incorrectas</strong>: 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.</li> + <li><strong>Las tablas no tienen respuesta adaptativa automática</strong>: 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.</li> +</ol> + +<h2 id="Aprendizaje_activo_Crea_tu_primera_tabla">Aprendizaje activo: Crea tu primera tabla</h2> + +<p>Ya hemos hablado bastante sobre la teoría de las tablas, así que veamos un ejemplo práctico y construyamos una tabla simple.</p> + +<ol> + <li>En primer lugar, haz una copia local de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> en un directorio nuevo de tu ordenador.</li> + <li>El contenido de cada tabla está delimitado entre estas dos etiquetas: <strong><code><a href="/en-US/docs/Web/HTML/Element/table"><table></table></a></code></strong>. Añádelas al cuerpo de tu código HTML.</li> + <li>El contenedor más pequeño dentro de una tabla es una celda, que se crea con un elemento <strong><code><a href="/en-US/docs/Web/HTML/Element/td"><td></a></code></strong> ('td' significa 'table data', <em>datos de tabla</em>). Añade lo siguiente dentro de tus etiquetas de tabla: + <pre class="brush: html notranslate"><td>Hola, soy tu primera celda.</td></pre> + </li> + <li>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í: + <pre class="brush: html notranslate"><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></pre> + </li> +</ol> + +<p>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.</p> + +<p>Para detener el crecimiento de esta fila y comenzar a colocar las celdas posteriores en una segunda fila, necesitamos usar el elemento <strong><code><a href="/en-US/docs/Web/HTML/Element/tr"><tr></a></code></strong> ('tr' significa 'table raw', <em>fila de tabla</em>). Vamos a verlo en detalle.</p> + +<ol> + <li>Coloca las cuatro celdas que has creado dentro de las etiquetas <code><tr></code>, de esta forma: + + <pre class="brush: html notranslate"><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></pre> + </li> + <li>Ahora que has hecho una fila, intenta hacer una o dos más: cada fila debe estar delimitada por un elemento <code><tr></code> adicional, con cada celda contenida en un <code><td></code>.</li> +</ol> + +<p>Esto debería dar como resultado una tabla similar a la siguiente:</p> + +<table> + <tbody> + <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> + <tr> + <td>Segunda fila, primera celda.</td> + <td>Celda 2.</td> + <td>Celda 3.</td> + <td>Celda 4.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: También puedes encontrar esto en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (consúltalo <a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">en vivo</a>).</p> +</div> + +<h2 id="Añadir_encabezados_con_elementos_<th>">Añadir encabezados con elementos <th></h2> + +<p>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:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>Ahora observa la tabla representada:</p> + +<table> + <tbody> + <tr> + <td></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> + </tbody> +</table> + +<p>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.</p> + +<h3 id="Aprendizaje_activo_encabezados_de_tabla">Aprendizaje activo: encabezados de tabla</h3> + +<p>Intentemos mejorar esta tabla.</p> + +<ol> + <li>Primero, haz una copia local de nuestros archivos <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> en un directorio nuevo de tu ordenador. El HTML contiene el mismo ejemplo sobre perros que viste arriba.</li> + <li>Para reconocer los encabezados de la tabla como encabezados, tanto visual como semánticamente, puedes usar el elemento <strong><code><a href="/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> ('th' significa 'table header', <em>encabezado de tabla</em>). Funciona exactamente igual que un <code><td></code>, excepto que denota un encabezado, no una celda normal. Entra en el código HTML, y cambiar todos los elementos <code><td></code> que delimitan los encabezados de tabla por elementos <code><th></code>.</li> + <li>Guarda tu HTML y cárgalo en un navegador. Los encabezados deberían verse como tal.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Puedes encontrar nuestro ejemplo terminado en <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> en GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">o consultarlo en vivo</a>).</p> +</div> + +<h3 id="¿Por_qué_son_útiles_los_encabezados">¿Por qué son útiles los encabezados?</h3> + +<p>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.</p> + +<div class="note"> +<p><strong>Nota</strong>: 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.</p> +</div> + +<p>Los encabezados de tabla también presentan otra ventaja: junto con el atributo de <code>scope</code> (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.</p> + +<h2 id="Celdas_que_abarcan_varias_filas_y_columnas">Celdas que abarcan varias filas y columnas</h2> + +<p>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.</p> + +<p>El marcado inicial se ve así:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>Pero la salida no nos da exactamente lo que queremos:</p> + +<table> + <tbody> + <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> + </tbody> +</table> + +<p>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 <code>colspan</code> y <code>rowspan</code>, 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, <code>colspan="2"</code> extiende una celda dos columnas más allá.</p> + +<p>Usemos <code>colspan</code> y <code>rowspan</code> para mejorar esta tabla.</p> + +<ol> + <li>Primero, haz una copia local de nuestros archivos <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> en un directorio nuevo de tu ordenador. El HTML contiene el mismo ejemplo sobre perros que viste arriba.</li> + <li>Luego, usa <code>colspan</code> para extender las celdas «Animales», «Hipopótamo» y «Cocodrilo» dos columnas más allá.</li> + <li>Por último, usa <code>rowspan</code> para extender las celdas de «Caballo» y «Pollo» dos filas más abajo.</li> + <li>Guarda tu código y ábrelo en un navegador para ver la mejora.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Puedes encontrar nuestro ejemplo terminado en <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> en GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">o consultarlo en vivo</a>).</p> +</div> + +<table id="tabular" style="background-color: white;"> +</table> + +<h2 id="Proporcionar_un_estilo_común_a_las_columnas.">Proporcionar un estilo común a las columnas.</h2> + +<p>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 <strong><code><a href="/es/docs/Web/HTML/Elemento/col"><col></a></code></strong> y <strong><code><a href="/es/docs/Web/HTML/Elemento/colgroup"><colgroup></a></code></strong>. 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 <em>cada</em> <code><td></code> o <code><th></code> de la columna, o utilizar un selector complejo como {{cssxref(":nth-child()")}}.</p> + +<p>Tomemos el ejemplo sencillo siguiente:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>Esto nos da el resultado siguiente:</p> + +<table> + <tbody> + <tr> + <th>Dato 1</th> + <th style="background-color: yellow;">Dato 2</th> + </tr> + <tr> + <td>Calcuta</td> + <td style="background-color: yellow;">Naranja</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow;">Jazz</td> + </tr> + </tbody> +</table> + +<p>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 <code>class</code> 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 <code><col></code>. Los elementos <code><col></code> se especifican dentro de un contenedor <code><colgroup></code> justo debajo de la etiqueta de apertura <code><table></code>. Podríamos crear el mismo efecto que vemos arriba especificando nuestra tabla de la manera siguiente:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>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 <code><col></code> en blanco; de lo contrario, el estilo también se aplicaría a la primera columna.</p> + +<p>Si quisiéramos aplicar la información de estilo a ambas columnas, podríamos incluir un elemento <code><col></code> con un atributo <code>span</code>, como este:</p> + +<pre class="brush: html notranslate"><colgroup> + <col style="background-color: yellow" span="2"> +</colgroup></pre> + +<p>Al igual que <code>colspan</code> y <code>rowspan</code>, <code>span</code> toma un valor numérico sin unidades que especifica el número de columnas a las que se desea aplicar el estilo.</p> + +<h3 id="Aprendizaje_activo_colgroup_y_col">Aprendizaje activo: colgroup y col</h3> + +<p>Ahora es el momento de intentarlo tú mismo.</p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p> + +<p>Recrea la tabla a partir de los pasos siguientes.</p> + +<ol> + <li>Primero, haz una copia local de nuestro archivo <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> 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.</li> + <li>Añade un elemento <code><colgroup></code> en la parte superior de la tabla, justo debajo de la etiqueta <code><table></code>, en la que puedes añadir tus elementos <code><col></code> (consulta los pasos restantes a continuación).</li> + <li>Las dos primeras columnas deben dejarse sin estilo.</li> + <li>Añade un color de fondo a la tercera columna. El valor para tu atributo de <code>style</code> es <code>background-color:#97DB9A;</code></li> + <li>Establece un ancho distinto para la cuarta columna. El valor de tu atributo de <code>style</code> es <code>width: 42px;</code></li> + <li>Añade un color de fondo a la quinta columna. El valor para tu atributo de <code>style</code> es <code>background-color:#97DB9A;</code></li> + <li>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 <code>style</code> son <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li> + <li>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 <code>style</code> es <code>width: 42px;</code></li> +</ol> + +<p>Mira cómo sigue en el ejemplo. Si te encallas o quieres verificar tu trabajo, puedes encontrar nuestra versión en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (o también puedes consultarlo <a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">en vivo</a>).</p> + +<h2 id="Resumen">Resumen</h2> + +<p>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.</p> + +<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<div> +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Tables/Basics">Conceptos básicos de las tablas en HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Funciones avanzadas de las tablas HTML y accesibilidad</a></li> + <li><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Estructuración de datos planetarios</a></li> +</ul> +</div> 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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">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.</p> + +<h2 id="Requisitos_previos">Requisitos previos</h2> + +<p>Antes de comenzar este módulo, deberías de saber las cosas básicas de HTML — ver <a href="https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: 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 <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guías">Guías</h2> + +<p>Este módulo contiene los siguientes artículos:</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">Comenzando con tablas HTML</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Características avanzadas y accesibilidad en tablas HTML</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Evaluación">Evaluación</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Estructurar datos planetarios</a></dt> + <dd>En nuestra evaluación, te proporcionamos datos sobre los planetas de nuestro sistemas solar y tu los estructurarás en una tabla HTML.</dd> +</dl> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<p class="summary">En nuestra evaluación te proporcionamos datos sobre los planetas de nuestro sistema solar y tu los estructurarás en una tabla HTML.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisitos previos:</th> + <td>Antes de comenzar esta evaluación deberías de haber leído los artículos de este módulo.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Comprobar si has comprendido las tablas HTML y las características asociadas.</td> + </tr> + </tbody> +</table> + +<h2 id="Punto_de_incio">Punto de incio</h2> + +<p>Para comenzar esta evaluación, crea una copia local de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a>, y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt">planets-data.txt</a> en una nueva carpeta de tu ordenador.</p> + +<div class="note"> +<p><strong>Nota</strong>: Como alternativa, puedes usar una web como <a class="external external-icon" href="https://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> 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 <code><script></code>/<code><style></code>.</p> +</div> + +<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2> + +<p>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.</p> + +<p>La tabla finalizada debería de verse así:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p> + +<p>También puedes ver el ejemplo <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">aquí</a> (no mires el código fuente — ¡no hagas trampas!)</p> + +<ul> +</ul> + +<h2 id="Pasos_para_completarlo">Pasos para completarlo</h2> + +<p>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 <code>planets-data.txt</code>.<font face="consolas, Liberation Mono, courier, monospace"> </font>Si tienes problemas para visualizar los datos, mira el ejemplo de arriba o intentalo dibujando un diagrama.</p> + +<ol> + <li>Abre tu copia de <code>blank-template.html</code>, y comienza la tabla dándole un contenedor exterior, una cabecera y un cuerpo. No necesitas un pie de tabla en este ejemplo.</li> + <li>Añade el subtítulo proporcionado a tu tabla.</li> + <li>Añade una línea a la cabecera que contenga todos los encabezados de columna.</li> + <li>Crea todas las líneas con su contenido, asegurandote marcar como cabecera aquellas celdas que lo sean.</li> + <li>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.</li> + <li>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.</li> + <li>Añade un borde negro alrededor de la columna que contiene los nombres de los planetas y sus encabezados.</li> +</ol> + +<h2 id="Pistas_y_consejos">Pistas y consejos</h2> + +<ul> + <li>La primera celda de la línea de enbezado tiene que estar en blanco y unir dos columnas.</li> + <li>Los encabezados de la filas agrupadas (p. ej. <em>Jovian planets</em>) que están a la izquierda de los encabezados de nombres de planetas (p. ej. <em>Saturn</em>) son algo complicados de resolver — asegurate de que cada uno agrupa el número correcto de líneas y columnas</li> + <li>Una manera de asociar encabezados con sus líneas/columnas es mucha más fácil que la otra.</li> +</ul> + +<h2 id="Evaluación">Evaluación</h2> + +<p>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 <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a> o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenta hacer el ejercicio primero — ¡haciendo trampas no aprenderás nada!</p> + +<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p> |