Возможно ли иметь таблицу в центре в Github Gist уценки?

Question

Возможно ли иметь таблицу в центре в Github Gist уценки?

Возможно ли иметь таблицу в центре в Github Gist уценки? Если так, то как?

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

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

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

Но таблица сбрасывается влево, см. https://gist.github.com/alvations/5095d3bcc0eec357c78f1c21a49e334f

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

Я попробовал предложение от /questions/28643022/mozhno-li-tsentrirovat-tablitsyi-v-fajle-utsenki/28643030#28643030 использовать:

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

<center>

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

</center>

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

Я также попробовал /questions/2541178/github-readmemd-tsentr-izobrazheniya/2541207#2541207:

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

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

Но это все еще слева, см. https://gist.github.com/alvations/23c18681df7a6bbf175d0e8c2cfccba3

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

26

github markdown tablelayout center-align

Источник

user610569 25 май '17 в 05:31

6 ответов

Решение

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

13

Источник

user3814251 29 май '17 в 01:09

Так вполне возможно!

      <div align="center">
 
COLUMN&nbsp;&nbsp;&nbsp;1 |  COLUMN 2   
:---:  | ---: 
center | right

</div>
<div>

10

Источник

user14602915 16 янв '22 в 10:48

Есть возможность центрировать стол. По сути, на 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>

Результат:

https:https://stackru.com/images/0ff37984ea5513ee7970450bf33b9e872ecaa864.png

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

https:https://stackru.com/images/345ea40a3ab4502abf0350a233cf107cb345acf9.png

5

Источник

user1144523 07 апр '20 в 22:48

Использование матжакса:

0

Источник

Valerie 10 ноя '22 в 18:39

Просто добавьте align="center" в таблицу тегов

      <table align="center"></table>

-1

Источник

user10615784 17 ноя '21 в 15:53

Другие вопросы по тегам github markdown tablelayout center-align

user866026 30 май '17 в 22:49 2017-05-30 22:49 · Accepted Answer · 2017-05-30 22:49

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

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

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

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

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

HTML-код очищается, агрессивно удаляя вещи, которые могут навредить вам и вашим родственникам, такие как script теги, встроенные стили и class или же id атрибутов. См. Фильтр очистки для полного белого списка.

Учитывая вышесказанное, просто невозможно определить свой собственный стиль для документов, размещенных на GitHub. Тем не менее, некоторые ожидают, что смогут определять стили внутри самого синтаксиса 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.

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

Первый пример - это просто таблица со средним столбцом, выровненным по центру. Если мы "просмотрим исходный код" (или воспользуемся инструментом "осмотреть" браузера), мы увидим, что был сгенерирован следующий 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 по-прежнему не влияет на то, как таблица расположена в родительском элементе.
Второй пример - таблица, завернутая в <center> элемент. Взгляд на исходный HTML показывает, что <center> тег был удален. Фактически, взгляд на элементы GitHub в белом списке показывает, что center элементы не допускаются и удаляются.
Третий пример пытается обернуть таблицу в абзац с align="center" определено в пункте. Однако обратите внимание на (интерпретированный) HTML:
```
<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>
```
Согласно спецификации HTML5:
p конечный тег элемента может быть опущен, если p за элементом сразу следует... table... элемент.
Таким образом, этот пункт на самом деле не table, но неявно закрывается открывающим тегом таблицы.
Но это меня заинтересовало. Что делать, если вы использовали div вместо абзаца. Но это не имеет значения. Как мы установили ранее, align Атрибут влияет только на текст ячейки. Вам необходимо назначить style изменить положение таблицы на странице, и Github явно запрещает определять ваши собственные стили.