path: root/files/es/learn/html/tables/advanced/index.html

---
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_&lt;caption>">Añadir un subtítulo a tu tabla con &lt;caption&gt;</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>&lt;table&gt;</code>.</p>

<pre class="brush: html notranslate">&lt;table&gt;
  &lt;caption&gt;Dinosaurios en el período Jurásico&lt;/caption&gt;

  ...
&lt;/table&gt;</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>&lt;table&gt;</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_&lt;thead>_&lt;tfoot>_y_&lt;tbody>">Añadir estructura con &lt;thead&gt;, &lt;tfoot&gt; y &lt;tbody&gt;</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>&lt;thead&gt;</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>&lt;tfoot&gt;</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>&lt;tbody&gt;</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>&lt;tbody&gt;</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>&lt;tbody&gt;</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>&lt;thead&gt;</code>, la fila «SUM» dentro de un elemento <code>&lt;tfoot&gt;</code>, y el resto del contenido dentro de un elemento <code>&lt;tbody&gt;</code>.</li>
 <li>Guarda y actualiza, y observa que añadir el elemento <code>&lt;tfoot&gt;</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>&lt;tbody&gt;</code> y <code>&lt;tfoot&gt;</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">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt; Mi historial de gastos &lt;/title&gt;
    &lt;style&gt;

        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;
        }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table&gt;

&lt;caption&gt; Cómo elegí gastar mi dinero &lt;/caption&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt; Compra &lt;/th&gt;

&lt;th&gt; Ubicación &lt;/th&gt;
            &lt;th&gt; Fecha &lt;/th&gt;
            &lt;th&gt; Revisión &lt;/th&gt;

&lt;th&gt; Coste (€) &lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tfoot&gt;
          &lt;tr&gt;
            &lt;td colspan="4"&gt;SUM&lt;/td&gt;
            &lt;td&gt;118&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tfoot&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt; Corte de pelo &lt;/td&gt;

&lt;td&gt; Peluquería &lt;/td&gt;
            &lt;td&gt;12/09&lt;/td&gt;

&lt;td&gt; Gran idea &lt;/td&gt;
            &lt;td&gt;30&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;

&lt;td&gt; Lasaña &lt;/td&gt;

&lt;td&gt; Restaurante &lt;/td&gt;
            &lt;td&gt;12/09&lt;/td&gt;
            &lt;td&gt; Arrepentimiento &lt;/td&gt;
            &lt;td&gt;18&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;

&lt;td&gt; Zapatos &lt;/td&gt;
            &lt;td&gt; Zapatería &lt;/td&gt;
            &lt;td&gt;13/09&lt;/td&gt;

&lt;td&gt; Mucho arrepentimiento &lt;/td&gt;
            &lt;td&gt;65&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt; Pasta de dientes &lt;/td&gt;
            &lt;td&gt; Supermercado &lt;/td&gt;
            &lt;td&gt;13/09&lt;/td&gt;

&lt;td&gt; Bien &lt;/td&gt;
            &lt;td&gt;5&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;

  &lt;/body&gt;
&lt;/html&gt;</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>&lt;table&gt;</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">&lt;table id="tabla1"&gt;
  &lt;tr&gt;
    &lt;th&gt;título1&lt;/th&gt;
    &lt;th&gt;título2&lt;/th&gt;
    &lt;th&gt;título3&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td id="nested"&gt;
      &lt;table id="tabla2"&gt;
        &lt;tr&gt;
          &lt;td&gt;celda1&lt;/td&gt;
          &lt;td&gt;celda2&lt;/td&gt;
          &lt;td&gt;celda3&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/td&gt;
    &lt;td&gt;celda2&lt;/td&gt;
    &lt;td&gt;celda3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;celda4&lt;/td&gt;
    &lt;td&gt;celda5&lt;/td&gt;
    &lt;td&gt;celda6&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</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 &lt;th&gt;</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>&lt;th&gt;</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">&lt;thead&gt;
  &lt;tr&gt;
    &lt;th scope="col"&gt;Compra&lt;/th&gt;
    &lt;th scope="col"&gt;Ubicación&lt;/th&gt;
    &lt;th scope="col"&gt;Fecha&lt;/th&gt;
    &lt;th scope="col"&gt;Revisión&lt;/th&gt;
    &lt;th scope="col"&gt;Coste (€)&lt;/th&gt;
  &lt;/tr&gt;
&lt;/thead&gt;</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">&lt;tr&gt;
  &lt;th scope="row"&gt;Corte de pelo&lt;/th&gt;

&lt;td&gt;Peluquería&lt;/td&gt;
  &lt;td&gt;12/09&lt;/td&gt;

&lt;td&gt;Gran idea&lt;/td&gt;
  &lt;td&gt;30&lt;/td&gt;
&lt;/tr&gt;</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>&lt;th&gt;</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>&lt;th&gt;</code>.</li>
 <li>Añades un atributo <code>headers</code> a cada elemento <code>&lt;td&gt;</code>. Cada atributo <code>headers</code> debe contener una lista de los <code>id</code> de todos los elementos <code>&lt;th&gt;</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">&lt;thead&gt;
  &lt;tr&gt;
    &lt;th id="purchase"&gt;Compra&lt;/th&gt;
    &lt;th id="location"&gt;Ubicación&lt;/th&gt;
    &lt;th id="date"&gt;Fecha&lt;/th&gt;
    &lt;th id="evaluation"&gt;Revisión&lt;/th&gt;
    &lt;th id="cost"&gt;Coste (€)&lt;/th&gt;
  &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
  &lt;th id="haircut"&gt;Corte de pelo&lt;/th&gt;
  &lt;td headers="location haircut"&gt;Peluquería&lt;/td&gt;
  &lt;td headers="date haircut"&gt;12/09&lt;/td&gt;
  &lt;td headers="evaluation haircut"&gt;Gran idea&lt;/td&gt;
  &lt;td headers="cost haircut"&gt;30&lt;/td&gt;
&lt;/tr&gt;

  ...

&lt;/tbody&gt;</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>