Tablas
Las tablas son bloques de datos organizados en forma de filas y columnas:
| Posición | País | Población (en millones) |
|---|---|---|
| 1 | India | 1.417 MM |
| 2 | China | 1.406 MM |
| 3 | Estados Unidos | 341 MM |
| 4 | Indonesia | 286 MM |
| 5 | Pakistán | 256 MM |
| 6 | Nigeria | 236 MM |
| 7 | Brasil | 213 MM |
| 8 | Bangladés | 177 MM |
| 9 | Rusia | 146 MM |
| 10 | México | 131 MM |
En formato markdown, las tablas se escriben de la siguiente forma:
|Posición | País | Población (en millones) |
|:--------|:----------------|----------------------------:|
|1 | India | 1.417 MM |
|2 | China | 1.406 MM |
|3 | Estados Unidos | 341 MM |
|4 | Indonesia | 286 MM |
|5 | Pakistán | 256 MM |
|6 | Nigeria | 236 MM |
|7 | Brasil | 213 MM |
|8 | Bangladés | 177 MM |
|9 | Rusia | 146 MM |
|10 | México | 131 MM |
Deben separarse de otros bloques como hacemos con los párrafos, con una línea
en blanco antes y después de la tabla. La cabecera se separa del resto de la
tabla con guiones -, y las columnas se delimitan con barras verticales |.
Las barras en los extremos izquierdo y derecho de la tabla son opcionales:
Posición | País | Población (en millones)
:--------|:----------------|----------------------------:
1 | India | 1.417 MM
2 | China | 1.406 MM
3 | Estados Unidos | 341 MM
4 | Indonesia | 286 MM
5 | Pakistán | 256 MM
6 | Nigeria | 236 MM
7 | Brasil | 213 MM
8 | Bangladés | 177 MM
9 | Rusia | 146 MM
10 | México | 131 MM
El carácter de dos puntos : en la línea que separa las cabeceras es opcional,
e indica la alineación de cada columna:
| Columa 1 | Columna 2 | Columna 3 |
|:----------|:---------:|----------:|
| izquierda | centrado | derecha |
| | | |
| | | |
| | | |
No es obligatorio que las barras verticales estén alineadas (aunque resultaría más facil de editar):
Posición | País | Población (en millones)
---|-----|--------------
1 | India | 1.417 MM
2 | China | 1.406 MM
3 | Estados Unidos | 341 MM
4 | Indonesia | 286 MM
5 | Pakistán | 256 MM
6 | Nigeria | 236 MM
7 | Brasil | 213 MM
8 | Bangladés | 177 MM
9 | Rusia | 146 MM
10 | México | 131 MM
No es posible escribir celdas de varias líneas, aunque podemos insertar etiquetas
<br> en el texto de las celdas.
Versión HTML
Podemos crear una tabla insertando texto HTML, aunque es más farragoso:
<table>
<thead>
<tr> <th style="text-align: left" > Posición </th>
<th style="text-align: left" > País </th>
<th style="text-align: right"> Población (en millones) </th>
</tr>
</thead>
<tbody>
<tr> <td style="text-align: left" > 1 </td>
<td style="text-align: left" > India </td>
<td style="text-align: right"> 1.417 MM </td>
</tr>
<tr> <td style="text-align: left" > 2 </td>
<td style="text-align: left" > China </td>
<td style="text-align: right"> 1.406 MM </td>
</tr>
<tr> <td style="text-align: left" > 3 </td>
<td style="text-align: left" > Estados Unidos </td>
<td style="text-align: right"> 341 MM </td>
</tr>
</tbody>
</table>
En resumen:
- La tabla completa se delimita entre etiquetas
<table> - La cabecera de la tabla se delimita entre etiquetas
<thead> - El cuerpo de la tabla se delimita entre etiquetas
<tbody> - Las filas de celdas van dentro de el cuerpo de la tabla, y se delimitan
entre etiquetas
<tr>(table row) - Las celdas van dentro de cada fila, y se delimitan
entre etiquetas
<td>(table data)
¿Que ventaja tiene el formato markdown? Es más sencillo de escribir, pero no
cuenta con las capacidades que podemos obtener de HTML mediante atributos.
Pero como sucede con los bloques <div>, la sintaxis markdown
no tiene efecto dentro de una tabla HTML.
¡Cuidado!
Con algunos conversores de markdown me he encontrado con que la sangría, en bloques HTML insertados en el texto, se considera como texto preformateado.
Alineando la tabla
mdBook usa unas hojas de estilos que alinean la tabla de forma centrada en
la página.
Me gusta ajustar las tablas al margen izquierdo, por lo que en mi archivo
theme/estilos.css añado:
table {
margin-left: 0;
margin-right: auto;
}
Lo que significa:
- regla de estilo a aplicar a los elementos
<table> - no dejar margen a la izquierda de la tabla
- dejar que el margen derecho se calcule automáticamente