web-dev-qa-db-ja.com

HTMLテーブルで「データなし」セルを表す方法は?

Webプレゼンテーションでは、データが含まれていないテーブルセルがあります。

そのような情報をどのように表すのですか?

テーブルに関するメモ:

  • 基本的なサイズは約10×20ですが、15×50まで拡大できます。
  • セルの約半分にはデータが含まれているため、約半分にはデータが含まれていません。
  • 存在する場合、データは数値または範囲(–(enダッシュ)で区切られた2つの数値)のいずれかです。
  • レイアウト(水平/垂直の境界線が表示/非表示)は、ここでの回答に依存するため、まだ確定していません。

例:

┏━━━━━━━━━━┳━━━━━━━━━━┓
┃ Header 1 ┃ Header 2 ┃
┡━━━━━━━━━━╇━━━━━━━━━━┩
│   Data   │          │
├──────────┼──────────┤
│          │   Data   │
└──────────┴──────────┘

そして対応するHTML:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

ダッシュの使用を考えましたが、その場合、どのダッシュを使用しますか?私はそれらを空にすることを考えましたが、テーブルのディメンションを使用すると、ほとんど判読できない結果になる可能性があります。私の最後のアイデアは、Wikipediaのようなものをすることでした:セルに「N/A」を書き、セルを異なる背景色でレンダリングしましたが、テーブルが簡単に色付けされすぎるのではないかと心配しています。

注: この質問 とは異なり、私のテーブルは大声で読み上げることを意図していません。

8

ダッシュの必要性は、コンテンツの実際の余計さよりも、テーブルのスタイルに依存します。テーブルにセルの境界線または交互の背景色がある場合は、セルを空白のままにします。これは、その位置のデータが欠落していることは明らかであり、ダッシュは認識の負荷を追加するだけで、テーブルの読みやすさが低下します。セルに境界線や交互の背景色がない場合は、ダッシュを使用してセルが空白であることを確認します。これにより、ユーザーはデータをスキャンするときに各行と列を視覚的に追跡できます。どちらがより適切であるかは、サイトの残りのテーマによって異なります。

9
phyrfox

Emダッシュ

Straight outtaThe Chicago Manual of Style、16th Ed。

"セクション3.65:空のセル。列見出しがスタブのエントリの1つに適用されない場合、セルは空白のままにするか、より良い、emダッシュまたは3つの空白のない省略記号ドットで埋められます。「該当なし」と「データなし」の区別が必要な場合、前者には空白セルを使用し、「no」には省略記号または省略記号ドットを使用できます。データ "...この区別がテキストから明確でない場合、注記が表に追加される場合があります(または、省略形n/aおよびndを使用できます。定義は注記に記載されています。)ゼロは、セル内の数量がゼロであることを意味します。.. "

1
Chris