原文：https://pauljadam.com/demos/annotated-tables.html
※このページは動作確認用ページです。一部アクセシビリティに配慮していないコンテンツが含まれます。
DEMO一覧に戻るPaulJAdam.comでさらに詳しく（外部サイト）
注釈付きテーブル
キーボードとスクリーンリーダに対応したアクセシブルなツールチップによる注釈を持つデータテーブルのデモ
見出しには、事業の名前、明細書のタイトル、および期間が含まれます。損益計算書は常に月や年などの期間を表します。
| 収入または費用 | 借方 | 貸方 |
|---|---|---|
| 収入： | ||
| サービス収入 | 収入項目は常に最初にリストアップされ、必要に応じて小計が表示されます。 | |
| 経費： | ||
| 家賃 | 経費項目は大きい額から最小のものへと順にリストされ、必要に応じて小計が表示されます。 | |
| 給与経費 | 1,200 | |
| 全費用 | 3,200 | |
| 当期純利益 | 純利益は、総収入額から総経費を引いて計算されます。 |
ツールチップを使わず、注釈の表示非表示切り替えを1つのボタンで実装した例。
| 収入または費用 | 借方 | 貸方 |
|---|---|---|
| 収入： | ||
| サービス収入 | ||
| 経費： | ||
| 家賃 | ||
| 給与経費 | 1,200 | |
| 全費用 | 3,200 | |
| 当期純利益 | ||
注釈
データテーブル同士のセルの関連を表現する
| 借方 | 貸方 |
|---|---|
| Clos. 4 5,000 | 0 Adj. Bal. |
| 8,550 Clos. 3 | |
| 3,550 Bal. |
| 借方 | 貸方 |
|---|---|
| Adj. Bal. 5,000 | 5,000 Clos. 4 |
| Bal. 0 |
| 借方 | 貸方 |
|---|---|
| Clos. 2 8,950 | 17,500 Clos. 1 |
| 8,550 Bal. | |
| Clos. 3 8,550 | |
| 0 Bal. |
| 借方 | 貸方 |
|---|---|
| Clos. 1 17,500 | 17,500 Adj. Bal. |
| 0 Bal. |
| 借方 | 貸方 |
|---|---|
| Adj. Bal. 3,000 | 3,000 Clos. 2 |
| Bal. 0 |
| 借方 | 貸方 |
|---|---|
| Adj. Bal. 4,800 | 4,800 Clos. 2 |
| Bal. 0 |
| 借方 | 貸方 |
|---|---|
| Adj. Bal. 400 | 400 Clos. 2 |
| Bal. 0 |
| 借方 | 貸方 |
|---|---|
| Adj. Bal. 100 | 100 Clos. 2 |
| Bal. 0 |
| 借方 | 貸方 |
|---|---|
| Adj. Bal. 250 | 250 Clos. 2 |
| Bal. 0 |
| 借方 | 貸方 |
|---|---|
| Adj. Bal. 300 | 300 Clos. 2 |
| Bal. 0 |
| 借方 | 貸方 |
|---|---|
| Adj. Bal. 100 | 100 Clos. 2 |
| Bal. 0 |