コンテンツにスキップ

テーブル

テーブルを使用してコンテンツやデータを簡素化することは、デザイン、構造、アウトライン、パターン、または順序を整理するための包括的な方法を提供します。これは、比較、内訳、リスト、機能、および説明にとって素晴らしいツールです。

テーブルを作成する際のいくつかのヒントは次のとおりです:

  • 列のヘッダーにラベルを付ける。
  • 適切であれば行のヘッダーにもラベルを付ける。
  • 結合セルは避ける。セルが結合されると、スクリーンリーダーがページをナビゲートする方法に影響を与えます。
  • テキストを多くしすぎない。
  • 列内で平行性を目指す。
  • テーブルはできるだけシンプルで小さく保つ。

テーブルを使用するタイミング

テーブルは、何らかの関係を持つ情報の断片を表示します。

例:

  • 日付と説明、例えば変更ログ
  • 属性を持つ製品のリスト

テーブルを使用しないタイミング

ページのフォーマットにテーブルを使用しないでください。

マークダウンの例

テーブルを追加する

テーブルを追加するには、3つ以上のハイフン(---)を使用して各列のヘッダーを作成し、パイプ(|)を使用して各列を区切ります。互換性のために、行の両端にもパイプを追加する必要があります。

| 構文 | 説明 |
| ----------- | ----------- |
| ヘッダー | タイトル |
| 段落 | テキスト |

レンダリングされた出力は次のようになります:

構文説明
ヘッダータイトル
段落テキスト

ヒント:ハイフンとパイプを使用してテーブルを作成するのは面倒です。プロセスを加速するために、Markdown Tables Generatorを使用してみてください。

配置

列内のテキストを左、右、または中央に配置するには、ヘッダー行内のハイフンの左、右、または両側にコロン(:)を追加します。

| 構文 | 説明 | テストテキスト |
| :--- | :----: | ---: |
| ヘッダー | タイトル | ここにあります |
| 段落 | テキスト | さらに |

レンダリングされた出力は次のようになります:

構文説明テストテキスト
ヘッダータイトルここにあります
段落テキストさらに

テーブル内のテキストのフォーマット

テーブル内のテキストをフォーマットできます。たとえば、リンク、コード、強調を追加できます。

見出し、ブロック引用、リスト、水平ルール、画像、またはHTMLタグを追加することはできません。

テーブル内のパイプ文字のエスケープ

テーブル内にパイプ(|)文字を表示するには、そのHTML文字コード(”|“)を使用します。

HTMLの例

複雑なテーブルにはHTMLを使用することを検討してください。以下の例はHTMLで作成されています:

フィールド説明
http.cookie
String

クッキー全体を文字列として表します。

例の値:
session=8521F670545D7865F79C3D7BEDC29CCE;-background=light

http.host
String

完全なリクエストURIで使用されるホスト名を表します。

例の値:
www.example.org