Можно ли разместить таблицу в центре в GitHub gist Markdown?

Можно ли разместить таблицу в центре в GitHub gist Markdown? Если да, то как?

Я использовал следующий синтаксис для создания таблицы в файле Markdown:

 Somehow the table is always flushed to the left!!!

|Column1|Column1|Column1|
|:----|:----:|----:|
|Column1|Column1|Column1|

Но таблица сброшена влево, см. https://gist.github.com/alvations/5095d3bcc0eec357c49ef1 >

Можно ли при просмотре располагать таблицу по центру страницы?

Я пробовал предложение от Можно ли центрировать таблицы в файле уценки? для использования:

Somehow the table is always flushed to the left!!!

<center>

|Column1|Column1|Column1|
|:----|:----:|----:|
|Column1|Column1|Column1|

</center>

И таблица исчезает при просмотре, см. https://gist.github.com/alvations<2f107c5701c >

Я также пробовал Как центрировать изображение в README.md на GitHub?:

Still on the left!!!
<p align="center">

|Column1|Column1|Column1|
|:----|:----:|----:|
|Column1|Column1|Column1|
</p>

Но он по-прежнему находится слева, см. https://gist.github.com/alvations/23c18681df7a6bb3f175d0d >

Изображения для всех трех версий выше:

Введите здесь описание изображения


person alvas    schedule 25.05.2017    source источник
comment
Я могу честно сказать, что ваш вопрос сбивает с толку, особенно когда вы сказали, что он исчезает. Вы просто хотите, чтобы таблица была в центре с использованием уценки?   -  person JordanGS    schedule 29.05.2017
comment
да. Таблица должна находиться в центре документа.   -  person alvas    schedule 29.05.2017
comment
вы не можете центрировать таблицу, вы можете создать псевдотаблицу, используя метод <p>, но не существует поддерживаемого метода для центрирования таблицы, поскольку она всегда будет выровнена по левому краю. (Это после того, как я часами пытался выровнять свою вправо)   -  person JordanGS    schedule 29.05.2017
comment
Вместо этого я сделал быстрый файл с именем table.html и создал, а затем открыл его в браузере, я сохранил изображение как table.jpg, а затем я использовал <p align="right">, вы можете использовать центр там, а затем включить изображение с html <img>. Вам придется обновлять изображение каждый раз, когда вы хотите изменить таблицу, но, по крайней мере, это позволило не только правильно выровнять, но и позволить вам перемещать текст вокруг изображения таблицы, если вы того пожелаете.   -  person JordanGS    schedule 29.05.2017


Ответы (3)


Короче говоря, это невозможно. GitHub не позволяет вам определять собственный стиль.

Во-первых, обратите внимание, что в спецификации GitHub Flavored Markdown не упоминается возможность применения любого стиля к любым типам уровня блока. (см. раздел таблицы). Как показывают ваши примеры, вы знаете, что вы можете центрировать текст в ячейках таблицы, но это применимо только к ячейкам и не влияет на родительскую таблицу (именно так работают HTML и CSS, а не только Markdown или GitHub).

Есть несколько способов определения пользовательских стилей для HTML (которые генерирует Markdown), но GitHub не разрешает их.

Один из таких способов - определить правила CSS. Однако прямо в спецификации GitHub прямо заявляет, что они не разрешать теги <style>.

Другой способ - включить необработанный HTML прямо в документ Markdown (со встроенными стилями). Однако из соображений безопасности GitHub очень избирательно подходит к тому, что они разрешают. В проекте Markup они определяют фильтры, которые они применяют ко всем поддерживаемым ими языкам разметки (включая, но не ограничиваясь Markdown). В соответствующей части документы объясняют (курсив добавлен):

  1. HTML подвергается дезинфекции, агрессивно удаляя вещи, которые могут нанести вред вам и вашим близким, например теги script, встроенные стили и атрибуты class или id. См. фильтр очистки для полной белый список.

Учитывая вышеизложенное, просто невозможно определить собственный стиль для документов, размещенных на GitHub. Тем не менее, некоторые ожидают, что смогут определять стили в самом синтаксисе Markdown. Однако оригинальные правила Markdown объясняют (курсив добавлен):

Синтаксис Markdown предназначен для одной цели: для использования в качестве формата для записи в Интернете.

Markdown не является заменой HTML и даже близко к нему. Его синтаксис очень мал и соответствует только очень небольшому подмножеству HTML-тегов. Идея состоит не в том, чтобы создать синтаксис, упрощающий вставку тегов HTML. На мой взгляд, HTML-теги уже легко вставить. Идея Markdown состоит в том, чтобы упростить чтение, написание и редактирование прозы. HTML - это формат публикации; Markdown - это формат записи. Таким образом, синтаксис форматирования Markdown решает только те проблемы, которые могут быть переданы в виде обычного текста.

Для любой разметки, не охватываемой синтаксисом Markdown, вы просто используете сам HTML.

Поскольку это не «формат публикации», предоставление способа стилизации вашего документа выходит за рамки Markdown. Это оставляет нам способы, которые GitHub явно запрещает. Поэтому невозможно центрировать таблицу (или применять любой другой пользовательский стиль) на GitHub.


Кстати, хотя GitHub использует спецификацию CommonMark (с расширениями), а не исходные правила Markdown, я ссылаюсь на исходные правила, поскольку в разделе, который я цитирую, обсуждается философия, лежащая в основе различных дизайнерских решений, принятых при создании Markdown. Поведение Markdown (и CommonMark) напрямую связано с этой философией. Хотя спецификация CommonMark не учитывается при проектировании (кроме случаев, когда она отличается от Markdown), она делает сделайте ссылку на некоторые моменты, обсуждаемые в том же абзаце, который я цитировал выше. И нигде это не противоречит этой философии. Поэтому я считаю, что это соответствует ожиданиям, которые мы должны иметь в отношении того, что является и что не является частью CommonMark и, соответственно, GitHub Flavored Markdown.


Для полноты рассмотрим каждый из примеров, предоставленных OP.

  1. первый пример - это просто таблица со средним столбцом, выровненным по центру. . Если мы «просмотрим исходный код» (или воспользуемся инструментом «проверки» браузера), мы увидим, что был сгенерирован следующий 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>
    

    Обратите внимание, что align="center" определяется только в средней ячейке каждой строки. Поскольку такой стиль наследуется только дочерними элементами, а не родительскими элементами, он не применяется к таблице в целом. Кстати, атрибут align даже не упоминается в спецификации HTML5 (которую я смог найти ); однако в спецификации HTML 4.01 вы может определять атрибут align для элемента table или любого из его дочерних элементов, который затем наследуется дочерними элементами только этого элемента. Конечно, как установлено выше, Markdown не предоставляет механизма для определения выравнивания чего-либо, кроме ячеек. Но даже если бы вы могли определить align в элементе table, в спецификации поясняется, что «[t] его атрибут определяет выравнивание данных и выравнивание текста в ячейке». Следовательно, if все равно не повлияет на расположение таблицы в ее родительском элементе.

  2. второй пример - это таблица, заключенная в элемент <center>. Взгляд на исходный HTML показывает, что тег <center> был удален. Фактически, посмотрите на GitHub Внесение элементов в белый список показывает, что center элементы не допускаются и удаляются.

  3. # P16 #
    <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>
    
    # P17 #
    # P18 #
    # P19 # # P20 #
person Waylan    schedule 30.05.2017
comment
Это ограничение Github так раздражает. - person GarouDan; 06.03.2019

Как вы можете видеть на следующем изображении, GitHub автоматически отображает таблицы, так что они уже занимают всю ширину. Из-за этого вы не можете центрировать текст, который генерирует средство рендеринга GitHub Markdown (иначе говоря, таблица действительно очень толстая и технически уже центрирована).

Скриншот ширины таблицы уценки

person therobinkim    schedule 29.05.2017

Можно центрировать стол. По сути, на GitHub таблица уже имеет ширину 100%. вам просто нужно дать телу достаточно контента, чтобы он тоже занимал 100% ширины.

Уловка: заполните его пробелами.

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

Результат:

README example

Узкое окно браузера:

Пример узкого браузера

person machow    schedule 07.04.2020