☰

GitHub Gist Markdown の中央にテーブルを配置することは可能ですか? 質問する

tag-icon • tag-icon github markdown tablelayout center-align
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/5095d3bcc0eec357c78f1c21a49e334f

閲覧時に表をページの中央に配置することは可能ですか?

私はからの提案を試してみましたMarkdown ファイルでテーブルを中央に配置することは可能ですか?使用するには:

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

<center>

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

</center>

そして、表示するとテーブルが消えます。https://gist.github.com/alvations/cd3495e7107b7701cf1cf1da2a839534

私も試してみましたGitHub の README.md で画像を中央に配置するにはどうすればいいですか?:

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

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

でもまだ左側にあるんだhttps://gist.github.com/alvations/23c18681df7a6bbf175d0e8c2cfccba3

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

ここに画像の説明を入力してください

ベストアンサー1

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

まず、GitHub Flavored Markdownでは、ブロックレベルのタイプにスタイルを適用する機能については何も言及されていないことに注意してください。スペック（テーブルセクション)。例が示すように、表のセル内でテキストを中央揃えできることはご存じですが、これはセルにのみ適用され、親表には影響しません (これは HTML と CSS の動作方法であり、Markdown や GitHub に固有のものではありません)。

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

その方法の1つはCSSルールを定義することです。しかし、スペックGitHub ではタグを許可しないことが明示的に規定されています<style>。

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

  1. HTMLはサニタイズされており、scriptタグなど、あなたやあなたの家族に害を及ぼす可能性のあるものを積極的に削除しています。インラインスタイル、およびclassまたはid属性。除菌フィルター完全なホワイトリストについては、こちらをご覧ください。

上記のことから、GitHubでホストされているドキュメントに独自のスタイルを定義することは不可能です。とはいえ、Markdown構文自体でスタイルを定義できると期待する人もいます。しかし、オリジナルのMarkdownルール説明する（強調追加）：

Markdown の構文は、Web 用の記述形式として使用するという 1 つの目的のために設計されています。

Markdown は HTML の代替品ではなく、それに近いものでもありません。その構文は非常に小さく、HTML タグのごく一部にしか対応していません。HTML タグの挿入を容易にする構文を作成することが目的ではありません。私の意見では、HTML タグの挿入はすでに簡単です。Markdown の目的は、文章の読み書きと編集を容易にすることです。HTML は出版フォーマットであり、Markdown は書き込みフォーマットです。したがって、Markdown の書式設定構文は、プレーンテキストで伝えることができる問題のみに対処します。

Markdown の構文でカバーされていないマークアップの場合は、HTML 自体を使用します。

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

余談ですが、GitHubはオリジナルのMarkdownルールではなくCommonMark仕様（拡張機能付き）を使用していますが、私が引用したセクションでは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に属性を定義することができ、その属性はその要素の子要素にのみ継承されます。もちろん、上で述べたように、Markdown ではセル以外の要素の配置を定義するメカニズムは提供されていません。しかし、要素に定義できたとしても、仕様では「この属性はセル内のデータの配置とテキストの位置揃えを指定します」と説明されています。したがって、親要素内でのテーブルの位置には影響しません。tablealigntable

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

  3. の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の終了タグは省略できます。ptable

    したがって、段落は実際には を囲むのではなくtable、テーブルの開始タグによって暗黙的に閉じられます。

    でも、それで興味が湧きました。div段落の代わりにaを使ったらどうなるでしょうか。でも、違いはないすでに述べたように、align属性はセルのテキストにのみ影響します。ページ上のテーブルの位置を変更するには を割り当てる必要がありますstyleが、Github では独自のスタイルを定義することが明示的に禁止されています。

おすすめ記事