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

---
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">&lt;table&gt;&lt;/table&gt;</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">&lt;td&gt;</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">&lt;td&gt;Hola, soy tu primera celda.&lt;/td&gt;</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">&lt;td&gt;Hola, soy tu primera celda.&lt;/td&gt;
&lt;td&gt;Soy tu segunda celda.&lt;/td&gt;
&lt;td&gt;Soy tu tercera celda.&lt;/td&gt;
&lt;td&gt;Soy tu cuarta celda.&lt;/td&gt;</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 &lt;td&gt; 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">&lt;tr&gt;</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>&lt;tr&gt;</code>, de esta forma:

  <pre class="brush: html notranslate">&lt;tr&gt;
  &lt;td&gt;Hola, soy tu primera celda.&lt;/td&gt;
  &lt;td&gt;Soy tu segunda celda.&lt;/td&gt;
  &lt;td&gt;Soy tu tercera celda.&lt;/td&gt;
  &lt;td&gt;Soy tu cuarta celda.&lt;/td&gt;
&lt;/tr&gt;</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>&lt;tr&gt;</code> adicional, con cada celda contenida en un <code>&lt;td&gt;</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_&lt;th>">Añadir encabezados con elementos &lt;th&gt;</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">&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td&gt;Knocky&lt;/td&gt;
    &lt;td&gt;Flor&lt;/td&gt;
    &lt;td&gt;Ella&lt;/td&gt;
    &lt;td&gt;Juan&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Raza&lt;/td&gt;
    &lt;td&gt;Jack Russell&lt;/td&gt;
    &lt;td&gt;Caniche&lt;/td&gt;
    &lt;td&gt;Perro callejero&lt;/td&gt;
    &lt;td&gt;Cocker Spaniel&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Edad&lt;/td&gt;
    &lt;td&gt;16&lt;/td&gt;
    &lt;td&gt;9&lt;/td&gt;
    &lt;td&gt;10&lt;/td&gt;
    &lt;td&gt;5&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Propietario&lt;/td&gt;
    &lt;td&gt;Suegra&lt;/td&gt;
    &lt;td&gt;Yo&lt;/td&gt;
    &lt;td&gt;Yo&lt;/td&gt;
    &lt;td&gt;Cuñada&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Hábitos alimentarios&lt;/td&gt;
    &lt;td&gt;Come las sobras de todos&lt;/td&gt;

&lt;td&gt;Mordisquea la comida&lt;/td&gt;
    &lt;td&gt;Come en abundancia&lt;/td&gt;

&lt;td&gt;Come hasta que revienta&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</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">&lt;th&gt;</a></code></strong> ('th' significa 'table header', <em>encabezado de tabla</em>). Funciona exactamente igual que un <code>&lt;td&gt;</code>, excepto que denota un encabezado, no una celda normal. Entra en el código HTML, y cambiar todos los elementos <code>&lt;td&gt;</code> que delimitan los encabezados de tabla por elementos <code>&lt;th&gt;</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">&lt;table&gt;
  &lt;tr&gt;
    &lt;th&gt;Animales&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;Hipopótamo&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;Caballo&lt;/th&gt;
    &lt;td&gt;Yegua&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Semental&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;

&lt;th&gt;Cocodrilo&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;

&lt;th&gt;Pollo&lt;/th&gt;

&lt;td&gt;Gallina&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Gallo&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</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">&lt;col&gt;</a></code></strong> y <strong><code><a href="/es/docs/Web/HTML/Elemento/colgroup">&lt;colgroup&gt;</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>&lt;td&gt;</code> o <code>&lt;th&gt;</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">&lt;table&gt;
  &lt;tr&gt;

&lt;th&gt;Dato 1&lt;/th&gt;
    &lt;th style="background-color: yellow"&gt;Dato 2&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Calcuta&lt;/td&gt;
    &lt;td style="background-color: yellow"&gt;Pizza&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Robots&lt;/td&gt;
    &lt;td style="background-color: yellow"&gt;Jazz&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</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>&lt;col&gt;</code>. Los elementos <code>&lt;col&gt;</code> se especifican dentro de un contenedor <code>&lt;colgroup&gt;</code> justo debajo de la etiqueta de apertura <code>&lt;table&gt;</code>. Podríamos crear el mismo efecto que vemos arriba especificando nuestra tabla de la manera siguiente:</p>

<pre class="brush: html notranslate">&lt;table&gt;
  &lt;colgroup&gt;
    &lt;col&gt;
    &lt;col style="background-color: yellow"&gt;
  &lt;/colgroup&gt;
  &lt;tr&gt;

&lt;th&gt;Dato 1&lt;/th&gt;

&lt;th&gt;Dato 2&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Calcuta&lt;/td&gt;
    &lt;td&gt;Pizza&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Robots&lt;/td&gt;
    &lt;td&gt;Jazz&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</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>&lt;col&gt;</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>&lt;col&gt;</code> con un atributo <code>span</code>, como este:</p>

<pre class="brush: html notranslate">&lt;colgroup&gt;
  &lt;col style="background-color: yellow" span="2"&gt;
&lt;/colgroup&gt;</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>&lt;colgroup&gt;</code> en la parte superior de la tabla, justo debajo de la etiqueta <code>&lt;table&gt;</code>, en la que puedes añadir tus elementos <code>&lt;col&gt;</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>