Construcción de acordes: Tabla de referencia

Vamos a dedicar un artículo especial a resumir todas las fórmulas presentadas en la serie Construcción de acordes. Aún quedan, desde luego, muchos por tratar, así que estamos ante un artículo dinámico que iré actualizando conforme vaya explicando nuevos tipos de acordes.

La finalidad de esta serie es saber calcular las notas que constituyen cualquier tipo de acorde sobre cualquier fundamental. No explica cómo hay que poner los dedos sobre la guitarra para montarlos (algo que se abordará en otra serie), aunque su deducción será sencilla una vez conozcamos las notas concretas. Todo músico debería poseer esa habilidad (podemos perdonar a los percusionistas, aunque también es recomendable para ellos).

En el primer artículo se explica la metodología empleada para el cálculo de las notas, basada en la fórmula de cada acorde en relación a la escala mayor.

En la Tabla de Referencia que figura a continuación, junto al nombre del acorde se indica su fórmula, un ejemplo partiendo de Do como nota fundamental y su cifrado más común. Haciendo clic sobre el nombre se cargará la página en la que fue presentado.

Acorde Fórmula Ejemplo en DO Cifrado típico
Acorde de quinta / Power Chord 1 – 5 C – G C5
Mayor 1 – 3 – 5 C – E – G C
Menor 1 – b3 – 5 C – Eb – G Cm, Cmin, C-
Aumentado 1 – 3 – #5 C – E – G# C+, Caug
Disminuido 1 – b3 – b5 C – Eb – Gb Cdim, C°
Cuarta suspendida 1 – 4 – 5 C – F – G Csus4
Segunda suspendida 1 – 2 – 5 C – D – G Csus2
Séptima 1 – 3 – 5 – b7 C – E – G – Bb C7
Séptima mayor 1 – 3 – 5 – 7 C – E – G – B C7M, Cmaj7, CΔ
Sexta 1 – 3 – 5 – 6 C – E – G – A C6
Menor sexta 1 – b3 – 5 – 6 C – Eb – G – A Cm6
Menor séptima 1 – b3 – 5 – b7 C – Eb – G – Bb Cm7
Menor séptima quinta bemol (semidisminuido) 1 – b3 – b5 – b7 C – Eb – Gb – Bb Cm7(b5), C∅
Séptima disminuido 1 – b3 – b5 – 6 C – Eb – Gb – A Cdim7, C°, C°7
Novena añadida 1 – 3 – 5 – 9 C – E – G – D Cadd9
Menor con séptima mayor 1 – b3 – 5 – 7 C – Eb – G – B Cm(7M)
Séptima mayor con quinta aumentada 1 – 3 – 5# – 7 C – E – G# – B C7M(#5), C+(7M), Caug(7M)
Séptima con quinta aumentada 1 – 3 – 5# – b7 C – E – G# – Bb C7(#5), C+7, Caug7, C7(+5)
Séptima con quinta disminuida 1 – 3 – b5 – b7 C – E – Gb – Bb C7(b5)
Séptima mayor con novena 1 – 3 – 5 – 7 – 9 C – E – G – B – D C7M(9), Cmaj7(9), Cmaj9, C9M
Séptima con novena 1 – 3 – 5 – b7 – 9 C – E – G – Bb – D C7(9), C9
Menor séptima con novena 1 – b3 – 5 – b7 – 9 C – Eb – G – Bb – D Cm7(9), Cm9
Séptima con novena aumentada 1 – 3 – 5 – b7 – #9 C – E – G – Bb – D# C7(#9)
Séptima con novena menor 1 – 3 – 5 – b7 – b9 C – E – G – Bb – Db C7(b9)
Sexta con novena 1 – 3 – 5 – 6 – 9 C – E – G – A – D C6/9, C6(9), C6add9
Séptima mayor con novena y oncena 1 – 3 – 5 – 7 – 9 – 11 C – E – G – B – D – F Cmaj7(9)(11), Cmaj11
Séptima mayor con novena y oncena aumentada 1 – 3 – 5 – 7 – 9 – #11 C – E – G – B – D – F# Cmaj7(9)(#11)
Menor séptima con novena y oncena 1 – b3 – 5 – b7 – 9 – 11 C – Eb – G – Bb – D – F Cm7(9)(11), Cm11
Séptima con novena y oncena / Oncena de dominante 1 – 3 – 5 – b7 – 9 – 11 C – E – G – Bb – D – F C11, C7(9)(11)

Recuerda: no pierdas de vista esta tabla, pues irá creciendo a medida que un nuevo acorde sea presentado en la serie.

Javier Montero Gabarró


Fecha de última revisión: 10 de agosto de 2014


Construcción de acordes: Tabla de referencia


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Encabezados en las tablas HTML

En el artículo anterior vimos el procedimiento básico para crear tablas en HTML. Hoy voy a explicarte cómo mejorar la presentación definiendo encabezados que sirvan de títulos a las filas o columnas.

Abre la página de ejemplo y déjala a la vista en una ventana o pestaña aparte, pues acudiremos a ella continuamente.

La Tabla 1 ya la conoces. Es una simple matriz de datos de dos filas por tres columnas que nos servirá como conejillo de indias y sobre la que realizaremos todo tipo de perversiones.

Recordemos su código:

Tabla 1
<table border="1">
<tr>
  <td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
  <td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>

Vimos que el método para crearla era aproximarnos a ella fila a fila, cada una contenida entre las etiquetas <tr> ... </tr>. Cada celda individual dentro de una fila se delimitaba con las etiquetas <td> ... </td>. Todo el conjunto quedaba encerrado entre <table> ... </table>.

Los encabezados de una tabla, sus títulos, no son más que celdas que tienen un formato diferente al de una celda normal. Los navegadores suelen presentarlas destacando su contenido en negrita. Obsérvalo en las tablas 3, 4 y 5 del ejemplo.

El único secreto que tiene la confección de encabezados es entender que pueden aplicarse a cualquier celda, no sólo a la primera fila o columna. Observa la Tabla 2 y fíjate cómo aparecen destacados elementos que estrictamente no constituyen un encabezado. Para crearlos, basta con cambiar la etiqueta de sus celdas: en vez de <td> empleamos <th> (de table header, cabecera de tabla).

Este es el código que genera la tabla:

Tabla 2
<table border="1">
<tr>
  <th>manzana</th><td>pera</td><th>fresa</th>
</tr>
<tr>
  <td>tomate</td><th>cebolla</th><td>pepino</td>
</tr>
</table>

Fíjate cómo aquellos elementos que queremos destacados tienen la etiqueta <th> y los que no <td>.

Entendido esto el resto no tiene historia. Vamos a programar la Tabla 3, en la que la fila superior titula cada columna.

Tenemos tres filas (la de título más las dos de datos), por lo que nos aparecerán tres secciones <tr>. En la primera fila todas sus celdas están destacadas, por los que su etiqueta será <th>.

Tabla 3
<table border="1">
<tr>
  <th>Columna 1</th><th>Columna 2</th><th>Columna 3</th>
</tr>
<tr>
  <td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
  <td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>

La Tabla 4 ilustra un ejemplo en el que los encabezados titulan cada fila. Tenemos dos filas por cuatro columnas esta vez. Sólo el primer elemento de cada fila tendrá por etiqueta <th>.

Tabla 4
<table border="1">
<tr>
  <th>Fila 1</th><td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
  <th>Fila 2</th><td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>

La Tabla 5 tiene títulos tanto en las filas como en las columnas. En este caso, el primer elemento de la primera fila no contiene dato alguno, pero aún así ponemos el par de etiquetas <td></td>, aunque no haya nada entre ellas. Las restantes celdas de la fila son encabezados. En las filas 2 y 3, sólo el primer elemento es un encabezado. El código te ilustrará esto con claridad:

Tabla 5
<table border="1">
<tr>
  <td></td><th>Columna 1</th><th>Columna 2</th><th>Columna 3</th>
</tr>
<tr>
  <th>Fila 1</th><td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
  <th>Fila 2</th><td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>

En el próximo artículo veremos cómo crear tablas con celdas irregulares, resultado de combinar entre sí celdas contiguas.

Javier Montero Gabarró


Encabezados en las tablas HTML


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Tablas básicas en HTML

Vamos a dedicar una serie de artículos a explicar cómo construir tablas en HTML, elementos imprescindibles para presentar datos estructurados. Las tablas tienen cierta relevancia histórica, pues se abusaba de ellas para diseñar la estructura de la propia página en sí. La primera edición de “El Club del Autodidacta”, hace más de quince años, empleaba las tablas como principal elemento de diseño.

Hoy día ya no es necesario recurrir a ellas para mostrar una página perfectamente seccionada. La versión actual de “El Club del Autodidacta”, como la gran mayoría de las páginas actuales, consigue diseños infinitamente mejores empleando una tecnología sencilla de la que hablaremos largo y tendido en este blog: CSS, las hojas de estilo “en cascada”.

Pero, aún así, para presentar un conjunto de datos en formato tabular, las tablas HTML siguen siendo la mejor opción. Voy a mostrarte cómo generarlas.

Comienza echando un vistazo a esta página, en la que se muestra una tabla de dos filas por tres columnas presentada con tres tipos de borde diferentes.

El primer paso para crear una tabla es delimitarla en HTML con el par de etiquetas <table> ... </table>.

<table>
...
</table>

Una vez definido el contenedor global nos aproximaremos a su contenido pensando en filas. Emplearemos las etiquetas <tr> ... </tr> (de table row, fila de tabla), para delimitar cada fila. En el ejemplo tenemos dos filas, por los que nos encontraremos dos pares de etiquetas <tr>:

<table>
<tr>
...  
</tr>

<tr>
...  
</tr>
</table>

Entre medias, en el espacio definido por los puntos suspensivos, introduciremos los datos de cada fila propiamente dichos, delimitando cada columna por el par de etiquetas <td> ... </td> (de table data, datos de la tabla).

Observa la tabla completa:

<table>
<tr>
  <td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
  <td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>

Este código se corresponde a la primera de las tres tablas del ejemplo, que aparece sin bordes. Si deseamos enmarcarlas podemos recurrir al atributo border, asignándole un valor que hará referencia al grosor del marco. Fíjate cómo he cambiado la etiqueta <table> con el nuevo atributo.

<table border="1">
<tr>
  <td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
  <td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>

La segunda tabla del ejemplo se corresponde con el código anterior. Incrementando el valor del atributo border aumentamos, a su vez, su grosor. El tercer ejemplo emplea <table border="5">.

Cuando empecemos con las hojas de estilo veremos maneras mucho más potentes de jugar con el diseño de la tabla. Esta ha sido la evolución general del HTML: se ha ido separando el contenido del diseño y, aunque muchas etiquetas aún mantienen atributos que afectan su aspecto, por lo general, se suele recurrir a las hojas de estilo para todas las consideraciones de diseño.

En el próximo artículo le daremos una pequeña vuelta al concepto de tabla y aprenderemos a crear encabezados que identifiquen las filas o columnas.

Javier Montero


Tablas básicas en HTML


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta