web-dev-qa-db-ja.com

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 を参照してください。

表示時にページの中央にテーブルを配置することはできますか?

https://stackoverflow.com/a/24639508/610569 からの提案を使用してみました:

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

<center>

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

</center>

また、表示するとテーブルが消えます。 https://Gist.github.com/alvations/cd3495e7107b7701cf1cf1da2a839534 を参照してください。

私も試しました https://stackoverflow.com/a/12118349/610569

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

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

ただし、まだ左側にあります。 https://Gist.github.com/alvations/23c18681df7a6bbf175d0e8c2cfccba を参照してください。

上記の3つのバージョンすべての画像:

enter image description here

12
alvas

要するに、それは不可能です。 GitHubでは、独自のスタイルを定義することはできません。

まず、GitHubフレーバーマークダウン spectables セクションを参照)のブロックレベルタイプにスタイリングを適用する機能については言及されていないことに注意してください。例が示すように、テキストをテーブルセル内で中央揃えできることはわかっていますが、これはセルにのみ適用され、親テーブルには影響しません(これは、HTMLとCSSの動作方法であり、MarkdownやGitHubに固有のものではありません)。

HTML(Markdownが生成する)のカスタムスタイルを定義する方法はいくつかありますが、GitHubでは許可されていません。

そのような方法の1つは、CSSルールを定義することです。ただし、 spec の中で、GitHubは<style>タグを許可しないことを明示的に示しています。

もう1つの方法は、生のHTMLを(インラインスタイルで)Markdownドキュメントに直接含めることです。ただし、セキュリティ上の理由から、GitHubは許​​可する内容について非常に選択的です。 Markup プロジェクトでは、サポートするすべてのマークアップ言語(Markdownを含むがこれに限定されない)に適用するフィルターを定義します。関連する部分で、ドキュメントは説明します(強調が追加されました):

  1. HTMLはサニタイズされ、scriptタグ、inline-stylesclassまたはid属性など、あなたとあなたの親族に害を及ぼす可能性のあるものを積極的に削除します。完全なホワイトリストについては、 サニタイズフィルター を参照してください。

上記のことを考えると、GitHubでホストされているドキュメントに独自のスタイルを定義することは不可能です。そうは言っても、Markdown構文自体の中でスタイルを定義できることを期待する人もいます。ただし、元のマークダウン ルール 説明(強調を追加):

Markdownの構文は、1つの目的を目的としています。それは、Web用の書き込み形式として使用することです。

マークダウンはHTMLの代わりではなく、HTMLに近いものでもありません。その構文は非常に小さく、HTMLタグの非常に小さなサブセットにのみ対応します。 HTMLタグの挿入を容易にする構文を作成するのではありません。私の意見では、HTMLタグはすでに簡単に挿入できます。 Markdownのアイデアは、散文の読み取り、書き込み、編集を簡単にすることです。 HTMLは公開形式です。 Markdownは書き込み形式です。したがって、Markdownの形式構文は、プレーンテキストで伝達できる問題にのみ対処します。

Markdownの構文でカバーされていないマークアップについては、HTML自体を使用するだけです。

これは「公開形式」ではないため、ドキュメントのスタイルを設定する方法を提供することは、Markdownの範囲外です。これにより、GitHubが明示的に禁止している方法が残ります。したがって、テーブルをGitHubの中央に配置する(または他のカスタムスタイルを適用する)ことはできません。


余談ですが、GitHubは元のMarkdownルールではなくCommonMark仕様(拡張機能付き)を使用していますが、引用するセクションでは、Markdownを作成するときに行われるさまざまな設計上の決定の背後にある哲学について説明しているため、元のルールを参照します。 Markdown(およびCommonMark)の動作は、その哲学に直接関係しています。 CommonMark仕様は設計上の決定には入りませんが(Markdownと異なる場合を想定)、上記で引用した段落で説明したいくつかの点については 参照を作成 します。そして、それがその哲学と矛盾するところはどこにもありません。したがって、CommonMarkの一部であるものとそうでないもの、ひいてはGitHub FlavouredMarkdownについての期待に関連していると思います。


完全を期すために、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] his属性はデータの配置とセル内のテキストの位置揃えを指定する」と説明されています。したがって、それでもテーブルが親要素にどのように配置されるかに影響はありません。

  2. 2番目の例 は、<center>要素でラップされたテーブルです。ソースHTMLを見ると、<center>タグが削除されていることがわかります。実際、GitHubの ホワイトリストに登録された要素 を見ると、center要素は許可されておらず、削除されていないことがわかります。

  3. 番目の例 は、段落に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は独自のスタイルの定義を明示的に禁止しています。

13
Waylan

次の画像でわかるように、GitHubはテーブルを自動的にレンダリングして、テーブルがすでに全幅を占めているようにします。このため、GitHubのMarkdownレンダラーが生成するテキストを中央揃えにすることはできません(別名、テーブルは本当に、本当に太く、技術的にはすでに中央揃えになっています)。

Screenshot of markdown table's width

6
therobinkim

テーブルを中央揃えにすることができます。基本的に、githubではテーブルの幅はすでに100%ですが、tbodyに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

狭いブラウザウィンドウ:

narrow browser example

1
machow