Conceptos básicos de las tablas HTML

¿Qué es una tabla?

Una tabla es un conjunto estructurado de datos compuesto por filas y columnas (datos tabulares). Una tabla te permite consultar de forma rápida y sencilla valores que indican una conexión entre distintos tipos de datos; por ejemplo, una persona y su edad, un día de la semana o el horario de una piscina municipal.

Las tablas se usan mucho en la sociedad humana y desde hace mucho tiempo, como demuestra este documento del censo de los Estados Unidos de 1800:

No es de extrañar, por tanto, que quienes crearon HTML proporcionaran una forma de estructurar y presentar datos tabulares en la web.

¿Cómo funciona una tabla?

Las tablas son rígidas. La información se interpreta haciendo asociaciones visuales entre los encabezados de las filas y las columnas. Por ejemplo, observa la tabla de abajo y busca un gigante gaseoso joviano con 62 lunas. Puedes encontrar la respuesta asociando los encabezados de fila y de columna correspondientes.

<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://gfffh04a31439368842edsfqxc9nbv5fkw6b56.ffgi.yc2.bjmu.edu.cn/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://gfffhb08367ee1ae84d05sfqxc9nbv5fkw6b56.ffgi.yc2.bjmu.edu.cn/story/tech/2014/10/02/pluto-planet-solar-system/16578959/"
          >cuestión polémica</a
        >.
      </td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}

Cuando se implementan correctamente, las herramientas de accesibilidad como los lectores de pantalla manejan bien las tablas, así que una tabla HTML bien hecha debe mejorar la experiencia de las personas videntes y de las personas con discapacidad visual por igual.

Dar estilo a las tablas

También puedes echar un vistazo al ejemplo en vivo de los datos de los planetas en GitHub. Una cosa que notarás es que allí la tabla se lee mejor: la tabla que aparece antes en esta página tiene un estilo mínimo, mientras que la versión de GitHub tiene aplicado un CSS más completo.

No te hagas ilusiones: para que las tablas sean eficaces en la web, necesitas aportar cierta información de estilo con CSS, además de una estructura buena y sólida con HTML. En esta lección nos centramos en la parte de HTML; aprenderás a dar estilo a las tablas más adelante, en nuestra lección Dar estilo a tablas.

En este módulo no nos centraremos en CSS, pero te proporcionamos una hoja de estilos CSS mínima que hará que tus tablas se lean mejor que con el estilo predeterminado que se obtiene sin dar ningún estilo. Puedes encontrar la hoja de estilos aquí, y también una plantilla HTML que aplica la hoja de estilos: juntas te darán un buen punto de partida para experimentar con las tablas HTML.

¿Cuándo no debes usar tablas HTML?

Las tablas HTML son solo para datos tabulares (información que resulta fácil de manejar en filas y columnas): para eso están diseñadas. Por desgracia, la gente solía usar tablas HTML para maquetar páginas web; por ejemplo, una fila para la cabecera de la página, otra fila para cada columna de contenido, una fila para el pie, etc. Esta técnica se usaba en el pasado porque la compatibilidad con CSS en los navegadores era mucho más limitada. Los navegadores modernos tienen una compatibilidad sólida con CSS, así que las maquetaciones basadas en tablas ya no son necesarias. Hoy son extremadamente raras, pero todavía puedes verlas en algunos rincones de la web.

En resumen, usar tablas para maquetar en vez de técnicas de maquetación con CSS es mala idea. Los motivos principales son estos:

1. Las tablas de maquetación reducen la accesibilidad para las personas con discapacidad visual: los lectores de pantalla, que usan las personas ciegas, interpretan las etiquetas que hay en una página HTML y leen su contenido en voz alta. Como las tablas no están pensadas para maquetar y dan lugar a un marcado más complejo, la salida resultante del lector de pantalla será confusa.
2. Las tablas producen sopa de etiquetas: como se ha mencionado, las maquetaciones con tablas suelen implicar estructuras de marcado más complejas que las técnicas de maquetación adecuadas, lo que hace que el código sea más difícil de escribir, mantener y depurar.
3. Las tablas no son adaptables automáticamente: cuando usas contenedores de maquetación adecuados (como <header>, <section>, <article> o <div>), su ancho es de forma predeterminada el 100 % del elemento padre. Las tablas se dimensionan de forma predeterminada según su contenido, así que requieren trabajo adicional para mostrarse bien en una variedad de dispositivos.

Crea tu primera tabla

Ya hemos hablado bastante de teoría, así que vamos a meternos en un ejemplo práctico. Aquí construirás una tabla sencilla.

1. Antes que nada, haz una copia de blank-template.html y minimal-table.css en un directorio nuevo de tu equipo local. La plantilla HTML ya contiene un elemento <link> para aplicar el CSS, así que no tienes que preocuparte por eso.

2. Toda tabla va encerrada entre las etiquetas <table></table>. Agrégalas dentro del body de tu HTML.

3. El contenedor más pequeño dentro de una tabla es una celda, que se crea con un elemento <td> («td» viene de table data, datos de tabla). Agrega lo siguiente dentro de las etiquetas de tu tabla:

   html

   <td>Hola, soy tu primera celda.</td>
   

4. Si queremos una fila de cuatro celdas, tenemos que copiar estas etiquetas tres veces. Actualiza el contenido de tu tabla para que quede así:

   html

   <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>
   

Las celdas no se colocan una debajo de otra, sino que se alinean automáticamente en la misma fila. Cada elemento <td> crea una sola celda, y juntas forman la primera fila. Cada celda que agregamos hace que la fila se alargue.

Para que las celdas siguientes empiecen a colocarse en una segunda fila, tenemos que usar el elemento <tr> («tr» viene de table row, fila de tabla). Veamos esto ahora.

1. Coloca las cuatro celdas que ya has creado dentro de etiquetas <tr>, así:

   html

   <tr>
     <td>Hola, soy tu primera celda.</td>
     <td>Soy tu segunda celda.</td>
     <td>Soy tu tercera celda.</td>
     <td>Soy tu cuarta celda.</td>
   </tr>
   

2. Ahora que has hecho una fila, prueba a hacer una o dos más: cada fila hay que envolverla en un elemento <tr> adicional, con cada celda contenida en un <td>.

<table>
  <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>
</table>

Añadir encabezados con elementos <th>

Ahora vamos a centrarnos 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 «Persona» y «Edad» del primer ejemplo de este artículo). Para ver por qué son útiles, echa un vistazo al siguiente ejemplo de tabla. Primero, el código fuente:

<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Raza</td>
    <td>Jack Russell</td>
    <td>Caniche</td>
    <td>Perro callejero</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Edad</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Propietario</td>
    <td>Suegra</td>
    <td>Yo</td>
    <td>Yo</td>
    <td>Cuñada</td>
  </tr>
  <tr>
    <td>Hábitos alimenticios</td>
    <td>Se come las sobras de todos</td>
    <td>Picotea la comida</td>
    <td>Buena comedora</td>
    <td>Come hasta reventar</td>
  </tr>
</table>

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}

Y ahora la tabla ya renderizada:

El problema aquí es que, aunque se entiende lo que pasa, no resulta tan fácil relacionar los datos entre sí como podría serlo. Si los encabezados de fila y de columna destacaran, sería más fácil.

Añadir encabezados a la tabla de perros

Vamos a mejorar el ejemplo de la tabla de perros añadiendo algunos encabezados.

1. Primero, haz otra copia de nuestros archivos blank-template.html y minimal-table.css en un directorio nuevo de tu equipo.

2. Añade el código siguiente dentro del <body> de tu HTML:

   html

   <h1>Tabla de perros</h1>
   <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 alimenticios</td>
       <td>Se come las sobras de todos</td>
       <td>Picotea la comida</td>
       <td>Buena comedora</td>
       <td>Come hasta reventar</td>
     </tr>
   </table>
   

3. Para que los encabezados de la tabla se reconozcan como encabezados, tanto visual como semánticamente, puedes usar el elemento <th> («th» viene de table header, encabezado de tabla). Funciona igual que un <td>, salvo que indica un encabezado y no una celda normal. Ve a tu HTML y cambia todos los elementos <td> que rodean los encabezados de la tabla por elementos <th>.

4. Guarda tu HTML y cárgalo en un navegador: deberías ver que ahora los encabezados se ven como encabezados.

<table>
  <tr>
    <td>&nbsp;</td>
    <th>Knocky</th>
    <th>Flor</th>
    <th>Ella</th>
    <th>Juan</th>
  </tr>
  <tr>
    <th>Raza</th>
    <td>Jack Russell</td>
    <td>Caniche</td>
    <td>Perro callejero</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <th>Edad</th>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <th>Propietario</th>
    <td>Suegra</td>
    <td>Yo</td>
    <td>Yo</td>
    <td>Cuñada</td>
  </tr>
  <tr>
    <th>Hábitos alimenticios</th>
    <td>Se come las sobras de todos</td>
    <td>Picotea la comida</td>
    <td>Buena comedora</td>
    <td>Come hasta reventar</td>
  </tr>
</table>

¿Por qué son útiles los encabezados?

Ya hemos respondido en parte a esta pregunta: es más fácil encontrar los datos que buscas cuando los encabezados destacan claramente, y en general el diseño se ve mejor.

Los encabezados de tabla tienen otra ventaja: junto con el atributo scope (que veremos en el próximo artículo), hacen que las tablas sean más accesibles al asociar cada encabezado con todos los datos de la misma fila o columna. Así, los lectores de pantalla pueden leer en voz alta una fila o columna entera de datos de una vez, lo que resulta muy útil.

Permitir que las celdas abarquen varias filas y columnas

A veces queremos que las celdas abarquen varias filas o columnas. Toma el ejemplo sencillo 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, y en esos casos queremos que el nombre del animal abarque toda la tabla.

El marcado inicial se ve así:

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

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}

Pero el resultado no es exactamente lo que queremos:

Arreglar la disposición con rowspan y colspan

Necesitamos una forma de que «Animales», «Hipopótamo» y «Cocodrilo» abarquen dos columnas, y que «Caballo» y «Pollo» abarquen dos filas. Por suerte, las tablas HTML ofrecen los atributos colspan y rowspan para conseguirlo. Ambos aceptan un valor numérico sin unidades igual al número de filas o columnas que se quieren abarcar. Por ejemplo, colspan="2" hace que una celda abarque dos columnas.

Vamos a usar colspan y rowspan para mejorar esta tabla.

1. Haz otra copia local de nuestros archivos blank-template.html y minimal-table.css en un directorio nuevo de tu equipo.

2. Añade lo siguiente dentro del <body> de tu HTML:

   html

   <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>
   

3. A continuación, usa colspan para que «Animales», «Hipopótamo» y «Cocodrilo» abarquen dos columnas.

4. Por último, usa rowspan para que «Caballo» y «Pollo» abarquen dos filas.

5. Guarda y abre tu código en un navegador para ver la mejora.

<table>
  <tr>
    <th colspan="2">Animales</th>
  </tr>
  <tr>
    <th colspan="2">Hipopótamo</th>
  </tr>
  <tr>
    <th rowspan="2">Caballo</th>
    <td>Yegua</td>
  </tr>
  <tr>
    <td>Semental</td>
  </tr>
  <tr>
    <th colspan="2">Cocodrilo</th>
  </tr>
  <tr>
    <th rowspan="2">Pollo</th>
    <td>Gallina</td>
  </tr>
  <tr>
    <td>Gallo</td>
  </tr>
</table>

Agrupar columnas con <colgroup> y <col>

Hay una forma de apuntar a columnas enteras de una tabla como una sola entidad; por ejemplo, al aplicar estilos a una tabla (algo que aprenderás más adelante en Dar estilo a tablas). A medida que ganes experiencia creando tablas HTML, descubrirás que aplicar un color de fondo, por ejemplo, a todas las celdas de una sola columna es más difícil de lo que parece. Los elementos <colgroup> y <col> ofrecen una solución a este problema.

El elemento <colgroup> se incluye como hijo de la tabla, justo después de la etiqueta de apertura <table>. Dentro del elemento <colgroup> puedes incluir uno o más elementos <col>, que representan grupos de columnas. El elemento <col> puede incluir un atributo span que indica el número de columnas de ese grupo. También puede incluir atributos globales como style (para apuntar al grupo con estilos en línea) o class (para apuntar al grupo con CSS o JavaScript mediante un nombre de clase). Los elementos <col> representan las columnas de la tabla desde el principio, por ejemplo desde el lado izquierdo en una tabla escrita en un idioma que se lee de izquierda a derecha, como el español.

Veamos un ejemplo para entenderlo. La tabla siguiente muestra un horario escolar:

<h1>Horario escolar de idiomas</h1>

<table>
  <colgroup>
    <col span="2" />
    <col class="column-background" />
    <col class="column-fixed-width" />
    <col class="column-background" />
    <col class="column-background-border" />
    <col span="2" class="column-fixed-width" />
  </colgroup>
  <tr>
    <td>&nbsp;</td>
    <th>Lun</th>
    <th>Mar</th>
    <th>Mié</th>
    <th>Jue</th>
    <th>Vie</th>
    <th>Sáb</th>
    <th>Dom</th>
  </tr>
  <tr>
    <th>1.ª hora</th>
    <td>Inglés</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>Alemán</td>
    <td>Neerlandés</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>2.ª hora</th>
    <td>Inglés</td>
    <td>Inglés</td>
    <td>&nbsp;</td>
    <td>Alemán</td>
    <td>Neerlandés</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>3.ª hora</th>
    <td>&nbsp;</td>
    <td>Alemán</td>
    <td>&nbsp;</td>
    <td>Alemán</td>
    <td>Neerlandés</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>4.ª hora</th>
    <td>&nbsp;</td>
    <td>Inglés</td>
    <td>&nbsp;</td>
    <td>Inglés</td>
    <td>Neerlandés</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Esta tabla tiene ocho columnas. Veamos más de cerca la estructura de <colgroup> y <col> para mostrar cómo les afecta:

<colgroup>
  <col span="2" />
  <col class="column-background" />
  <col class="column-fixed-width" />
  <col class="column-background" />
  <col class="column-background-border" />
  <col span="2" class="column-fixed-width" />
</colgroup>

Si observamos los elementos <col>:

• El primero tiene span="2", así que representa la primera y la segunda columna desde la izquierda de la tabla. No apuntamos a estas columnas con ningún estilo; nos permite apuntar a las columnas siguientes.
• El segundo y el cuarto no tienen el atributo span, así que representan una sola columna: la tercera y la quinta, respectivamente. Tienen aplicada la clase column-background.
• El tercero no tiene el atributo span y tiene aplicada la clase column-fixed-width. Representa la cuarta columna.
• El quinto no tiene el atributo span y tiene aplicada la clase column-background-border. Representa la sexta columna.
• El sexto tiene span="2" y la clase column-fixed-width. Representa la séptima y la octava columna.

Hemos ocultado la mayor parte del CSS de este ejemplo, pero te mostramos las reglas que aplican estilos a los elementos <col> que tienen las clases column-background, column-fixed-width y column-background-border:

html {
  font-family: sans-serif;
}

body {
  margin: 0 20px;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(200 200 200);
  letter-spacing: 1px;
  font-size: 0.8rem;
}

td,
th {
  border: 1px solid rgb(190 190 190);
  padding: 10px 20px;
}

td {
  text-align: center;
}

.column-background {
  background-color: #97db9a;
}

.column-fixed-width {
  width: 40px;
}

.column-background-border {
  background-color: #dcc48e;
  border: 4px solid #c1437a;
}

• Los elementos <col> con la clase column-background tienen un color de fondo sólido.
• Los elementos <col> con la clase column-fixed-width tienen un ancho fijo estrecho.
• El elemento <col> con la clase column-background-border tiene un color de fondo sólido y un borde grueso.

No hace falta que te preocupes ahora por cómo funciona el CSS; lo aprenderás en detalle más adelante, en nuestro módulo Fundamentos de estilo con CSS.

Veamos cómo se renderiza el código anterior:

Fíjate en cómo las distintas columnas reciben los estilos especificados en las clases.

¿Los estilos de <col> chocan con otros estilos de la tabla?

La respuesta es «sí». Los estilos de las tablas se pintan en este orden: los establecidos en <table>, después en <col>, después en <tr> y después en <th> y <td>. Esto significa que los estilos establecidos en las filas, los encabezados y las celdas de la tabla sobrescriben los estilos de las columnas.

Pruébalo añadiendo estilos de columna al ejemplo de la plantilla con el que trabajaste antes en el artículo. Si añades lo siguiente al HTML, encima de la primera etiqueta <tr>:

<colgroup>
  <col span="2" style="border: 2px solid black; background-color: red" />
</colgroup>

Verás que las dos primeras columnas de la tabla reciben un borde black de 2px, pero no un color de fondo red. Esto se debe a que los encabezados y las filas de la tabla tienen establecidos los siguientes estilos en minimal-table.css, que sobrescriben los estilos de las columnas:

th {
  background-color: rgb(235 235 235);
}

tr:nth-child(even) td {
  background-color: rgb(250 250 250);
}

tr:nth-child(odd) td {
  background-color: rgb(220 220 220);
}

Elimina estos estilos background-color para ver el color de fondo red.

Repaso interactivo de los conceptos de tablas

El contenido incrustado a continuación, de Scrimba^{socio de aprendizaje de MDN}, ofrece una lección interactiva que resume la mayoría de las técnicas cubiertas en este artículo. Échale un vistazo para repasar los puntos clave y practicar un poco más.

Resumen

Con esto terminan los conceptos básicos de las tablas HTML. En el artículo siguiente veremos algunas funcionalidades adicionales que sirven para hacer las tablas HTML más accesibles a las personas con discapacidad visual.

• Anterior
• Overview: Estructurando la web con HTML
• Siguiente