表

表でコンテンツやデータを整理すると、デザイン、構成、概要、パターン、順序を分かりやすく並べられます。比較、内訳、一覧、機能、説明に向きます。

表を作るときのポイントです。

• 列見出しにラベルを付けます。
• 適切な場合は、行見出しにもラベルを付けます。
• 結合セルは避けます。結合セルはスクリーンリーダーの移動を壊し、AI システムも内容を解析しにくくなります。
• テキストを増やしすぎません。各セルは 1 文までにします。
• 列内は並列構造にします。
• 表はできるだけ単純で小さくします。
• 行は論理的な順に並べます。論理的な順がなければアルファベット順にします。

• スクリーンリーダーのすべてが表を事前に読み上げるわけではないため、表の目的を説明する完全な文で導入します。導入文の末尾はコロンまたはピリオドにできます。表の直前なら通常はコロン、導入と表の間に注記などの別の内容がある場合は通常はピリオドにします。

スクリーンリーダーのすべてが表を事前に読み上げるわけではないため、表の目的を説明する完全な文で導入します。導入文の末尾はコロンまたはピリオドにできます。表の直前なら通常はコロン、導入と表の間に注記などの別の内容がある場合は通常はピリオドにします。

表を指すときは、「次の表」や「前の表」のような言い方を使います。文の途中に表を置かないでください。

• センテンスケースを使います。
• 列の内容がはっきり分かる、短い見出しにします。
• 列見出しの末尾に句読点（ピリオド、省略記号、コロンを含む）を付けません。
• HTML の表では、列見出しに th 要素を使います。アクセシビリティのため scope 属性を付けます。

<thead>
	<tr>
		<th scope="col">Name</th>
		<th scope="col">Description</th>
	</tr>
</thead>

• 各表は、導入する文の直後に置きます。
• 番号付き手順の途中に表を置かないでください。該当ステップの直後に置きます。
• 表に脚注がある場合は、表の直後に置きます。

ページに表が 1 つだけの場合、キャプションは不要です。参照しているテキストの隣に表を置きます。

ページに近い位置に表が複数ある場合は、各表にキャプションを付けます。キャプションは Table NUMBER. の形式の番号で始め、短い説明を続けます。センテンスケースを使います。キャプションの末尾にピリオドは付けません。

キャプション付きの表を本文から指すときは、番号で指します。例: "as shown in table 2." 文頭以外では "table" を大文字にしません。

Markdown では、表の直前に太字の行としてキャプションを置きます。

**Table 1.** Supported DNS record types

| Type | Description                      |
| ---- | -------------------------------- |
| A    | Maps a domain to an IPv4 address |
| AAAA | Maps a domain to an IPv6 address |

HTML では、table 要素の最初の子として caption 要素を使います。

<table>
	<caption>
		<b>Table 1.</b>
		Supported DNS record types
	</caption>
	<thead>
		<tr>
			<th scope="col">Type</th>
			<th scope="col">Description</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>A</td>
			<td>Maps a domain to an IPv4 address</td>
		</tr>
	</tbody>
</table>

表の目的は、眺めやすいコンテンツ体験を提供することです。表は、何らかの関係がある情報を並べます。

表は次に使います。

• データと値の単純な対応
• 例付きの分類
• 属性が異なるものの集まり
• changelog のような日付と説明
• 属性付きの製品一覧

ページの体裁を整えるために表を使わないでください。

情報がこれらの指針に収まらない場合は、別の見せ方を検討します。

• リスト
• サブセクション
• Tabs
• Details

表を追加する

表を追加するには、各列の見出しにハイフン（---）を 3 つ以上使い、列の区切りにパイプ（|）を使います。互換性のため、行の両端にもパイプを付けます。

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

描画結果は次のとおりです。

ヒント: ハイフンとパイプで表を作るのは手間がかかることがあります。作業を速くするには、Markdown Tables Generator ↗ を試してください。

ヘッダー行のハイフンの左、右、または両側にコロン（:）を付けると、列内のテキストを左揃え、右揃え、中央揃えにできます。

| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here is this  |
| Paragraph   | Text        | And more      |

描画結果は次のとおりです。

表内のテキストには書式を付けられます。たとえば、リンク、コード、強調を追加できます。

見出し、引用、リスト、水平線、画像、HTML タグは追加できません。

表内にパイプ（|）文字を表示するには、HTML 文字コード（"|"）を使います。

複雑な表では、HTML の利用を検討します。次の例は HTML で作成しています。

一般に、ドキュメントでは大きな表を避けます。特別な用途がある場合は、表を <table-wrap> コンポーネントで囲み、レスポンシブでスクロールできるようにします。

<table-wrap>

| Header 1 | Header 2 | Header 3 | Header 4 |
| --- | --- | --- | --- |
| test | test | test | test |

</table-wrap>