Saltar al contenido

¿Es posible tener una mesa en el centro en Github gist markdown?

Solución:

En resumen, no es posible. GitHub no le permite definir su propio estilo.

Primero, tenga en cuenta que no se menciona la capacidad de aplicar ningún estilo a ningún tipo de nivel de bloque en la especificación GitHub Flavored Markdown (consulte la sección de tablas). Como muestran sus ejemplos, sabe que puede centrar el texto dentro de las celdas de la tabla, pero eso solo se aplica a las celdas y no tiene ningún efecto en la tabla principal (que es cómo funcionan HTML y CSS y no es específico de Markdown o GitHub).

Hay algunas formas de definir estilos personalizados para HTML (que Markdown genera), pero GitHub no las permite.

Una de esas formas es definir reglas CSS. Sin embargo, justo en la especificación, GitHub declara explícitamente que no permiten <style> etiquetas.

Otra forma es incluir HTML sin procesar directamente en el documento Markdown (con estilos en línea). Sin embargo, por razones de seguridad, GitHub es muy selectivo sobre lo que permiten. En el proyecto de marcado, definen los filtros que aplican a todos los lenguajes de marcado que admiten (incluido, entre otros, Markdown). En la parte pertinente, los documentos explican (énfasis agregado):

  1. El HTML se desinfecta, eliminando agresivamente los elementos que podrían dañarlo a usted y a sus familiares, como script etiquetas, estilos en línea, y class o id atributos. Consulte el filtro de desinfección para obtener la lista blanca completa.

Dado lo anterior, simplemente no es posible definir su propio estilo para los documentos alojados en GitHub. Dicho esto, algunos esperan poder definir el estilo dentro de la sintaxis de Markdown. Sin embargo, las reglas originales de Markdown explican (énfasis agregado):

La sintaxis de Markdown tiene un propósito: usarse como formato de escritura para la web.

Markdown no es un reemplazo para HTML, ni siquiera se acerca a él. Su sintaxis es muy pequeña y corresponde solo a un subconjunto muy pequeño de etiquetas HTML. La idea no es crear una sintaxis que facilite la inserción de etiquetas HTML. En mi opinión, las etiquetas HTML ya son fáciles de insertar. La idea de Markdown es facilitar la lectura, escritura y edición de prosa. HTML es un formato de publicación; Markdown es un formato de escritura. Por lo tanto, la sintaxis de formato de Markdown solo aborda problemas que se pueden transmitir en texto sin formato.

Para cualquier marcado que no esté cubierto por la sintaxis de Markdown, simplemente use HTML.

Como no es un “formato de publicación”, proporcionar una forma de diseñar su documento está fuera del alcance de Markdown. Lo que nos deja con las formas que GitHub explícitamente no permite. Por lo tanto, no es posible centrar una tabla (o aplicar cualquier otro estilo personalizado) en GitHub.


Además, aunque GitHub usa la especificación CommonMark (con extensiones) en lugar de las reglas de Markdown originales, hago referencia a las reglas originales ya que la sección que cito analiza la filosofía detrás de varias decisiones de diseño tomadas al crear Markdown. Los comportamientos de Markdown (y CommonMark) están directamente relacionados con esa filosofía. Si bien la especificación CommonMark no entra en las decisiones de diseño (excepto cuando difiere de Markdown), sí hace referencia a algunos de los puntos discutidos en el mismo párrafo que cité anteriormente. Y en ninguna parte contradice esa filosofía. Por lo tanto, lo considero relevante para las expectativas que deberíamos tener sobre qué es y qué no es parte de CommonMark y, por extensión, GitHub Flavored Markdown.


Para completar, examinemos cada uno de los ejemplos proporcionados por el OP.

  1. El primer ejemplo es simplemente una tabla con la columna del medio alineada en el “centro”. Si “vemos el código fuente” (o usamos la herramienta “inspeccionar” del navegador), vemos que se generó el siguiente HTML:

    <table>
        <thead>
            <tr>
                <th align="left">Column1</th>
                <th align="center">Column1</th>
                <th align="right">Column1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td align="left">Column1</td>
                <td align="center">Column1</td>
                <td align="right">Column1</td>
            </tr>
        </tbody>
    </table>
    

    Tenga en cuenta que align="center" solo se define en la celda del medio de cada fila. Como tal estilo solo lo heredan los elementos secundarios, no los elementos principales, esto no se aplica a la tabla como un todo. Como acotación al margen, el align el atributo ni siquiera se menciona en la especificación HTML5 (que pude encontrar); sin embargo, en la especificación HTML 4.01, puede definir un align atributo en un table elemento o cualquiera de sus hijos que luego es heredado por los hijos de ese elemento solamente. Por supuesto, como se estableció anteriormente, Markdown no proporciona un mecanismo para definir la alineación en nada excepto en las celdas. Pero incluso si pudieras definir align sobre el table elemento, la especificación explica que “[t]Este atributo especifica la alineación de los datos y la justificación del texto en una celda. “Por lo tanto, if aún no tendría ningún efecto sobre cómo se coloca la tabla en su elemento principal.

  2. El segundo ejemplo es una mesa envuelta en un <center> elemento. Una mirada al código fuente HTML revela que el <center> se quitó la etiqueta. De hecho, una mirada a los elementos de la lista blanca de GitHub revela que center los elementos no están permitidos y eliminados.

  3. El tercer ejemplo intenta envolver la tabla en un párrafo con align="center" definido en el párrafo. Sin embargo, tenga en cuenta el HTML (interpretado):

    <p align="center"></p>
    <table>
        <thead>
            <tr>
                <th align="left">Column1</th>
                <th align="center">Column1</th>
                <th align="right">Column1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td align="left">Column1</td>
                <td align="center">Column1</td>
                <td align="right">Column1</td>
            </tr>
        </tbody>
    </table>
    <p></p>
    

    Según la especificación HTML5:

    A p La etiqueta final del elemento se puede omitir si el p El elemento es seguido inmediatamente por un … table… elemento.

    Por lo tanto, el párrafo no envuelve realmente el table, pero está implícitamente cerrado por la etiqueta de apertura de la tabla.

    Pero eso me dio curiosidad. ¿Y si usaras un div en lugar de un párrafo. Pero eso no hace ninguna diferencia. Como hemos establecido anteriormente, la align el atributo solo afecta al texto de la celda. Necesita asignar un style para cambiar la posición de una tabla en la página y Github explícitamente no permite definir sus propios estilos.

Como puede ver en la siguiente imagen, GitHub procesa automáticamente las tablas para que ya ocupen el ancho completo. Debido a esto, no puede centrar el texto que genera el renderizador Markdown de GitHub (también conocido como la tabla es muy, muy gruesa y técnicamente ya está centrada).

Captura de pantalla del ancho de la tabla de rebajas

Es posible centrar una mesa. Esencialmente, en github, la tabla ya tiene un ancho del 100%, solo necesita darle al tbody suficiente contenido para que también ocupe el 100% del ancho.

El truco: llénelo de espacios.

<table>
  <tbody>
    <tr>
      <td align="center">Key Features<br>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>    
        <span>&nbsp;&nbsp;</span>
      </td>
      <td align="center">Examples<br>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>        
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;</span>
      </td>
      <td align="center">Supported Methods<br>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>    
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>     
        <span>&nbsp;&nbsp;</span>        
      </td>
    </tr>
  </tbody>
</table>

Resultado:

ejemplo Léame

Ventana del navegador angosta:

ejemplo de navegador estrecho

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *