ユーザーフレンドリーなテーブルの設計方法

一つの事実を認識してください。テーブルは見るためのものであり、華麗な視覚効果に使われるものではありません。

最近、バックエンドで頻繁にテーブルの使用が要求されています。ユーザーにとって使いやすいテーブルを設計することは、特にデータの数やフィールドの多い場合には課題となります。ユーザーは余分な要素に引き寄せられやすいのです。実際、データの表示において、テーブルは依然として非常に効果的なレイアウト方法であり、その特徴は私たちがより簡単にレイアウトを行うのに役立ちます。

HTMLのテーブル

HTMLでは、テーブルはいくつかのタグで構成されています：

thead：表のヘッダータイトルを定義します。
- tr：ヘッダーの行を定義します。
- th：タイトルを定義します。
tbody：テーブルのコンテンツを定義します。
tfoot：テーブルの終わりの部分を定義します。

テーブルの幅をいっぱいにはしない

テーブルの内容に幅を自動調整させましょう。幅いっぱいにすると、2つの列の間のスペースが広すぎて読みにくくなります。

表示するフィールドを選択する

データのフィールドが多すぎる場合（例えば10以上）、ユーザーが表示したいフィールドを選択できるように、チェックボックスなどの方法を使用することができます。

`<caption>`を追加する

テーブルに<caption>を追加すると、テーブルのタイトルを簡単に注釈できます。例えば：

<table>
  <caption>
    <h4>出帳リスト</h4>
  </caption>
  <thead>
    <tr>
      <th>日付</th>
      <th>名前</th>
      <th>人口</th>
      <th>年齢</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2017-11-11</td>
      <td>kalan.chen</td>
      <td>12375</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

caption-side: top | bottomを使用して位置を調整できます。

caption {
  caption-side: top;
}

不要な色とボーダーを削除する

一見カラフルですが、ユーザーにとってはボーダーや背景色は視覚的なノイズとなる可能性があります。これは思いやりのあるデザインのように見えますが、求めているデータを見つけるのが難しいかもしれません。

シンプルなグレースケールを使用して識別し、ボーダーの色を削除（または薄くする）して視覚的なノイズを減らし、ユーザーがデータをより簡単に見つけられるようにしましょう。

ヘッダーとコンテンツを揃える

通常、テキストは左揃え、数字は右揃えです。数字が変動する場合、font-variant-numeric: tabular-nums（フォントがサポートされている場合）を追加することで、数字の変動による幅の移動を防ぐことができます。

簡単なソートと検索を提供する

バックエンドでは、ユーザーがテーブル内のデータを頻繁に検索する可能性があります。毎回データを更新するためにAjaxリクエストを使用するか、フロントエンドで実装するかのいずれかの方法があります。ユーザーがデータを素早く見つけるために、簡単なソート機能を提供したり、簡単な検索機能を提供したりすることができます。

余談ですが、ソートは実際にはelement.appendChildを使用して行うことができます。appendChildのノードが既に親に存在する場合、新しいノードを追加せずに位置を置き換えます。

また、現在のソート方法を読み上げるために、aria-sortを追加することもできます。

<th aria-sort="ascending">
</th>

シンプルな印刷用スタイルを検討する

請求システムや記録などの場合、オペレーターはウェブページ上で表示するだけでなく、テーブルの内容を印刷する必要がある場合があります。その場合、印刷の詳細を@media printを使用して処理することができます。例えば、フォントサイズの設定はptで行う必要があるかもしれませんし、色を白黒に変更したり、余白を短くしたりする必要があるかもしれません。これらは考慮する必要があります。

レスポンシブ

従来のテーブルは、モバイル版をサポートするために水平スクロールを使用することが一般的でした。ただし、モバイル上で頻繁にスクロールすることは、ユーザーにとって理想的な操作ではありません。

データ属性を使用してCSSの疑似要素と組み合わせることで、モバイル上で各行の表示を垂直に変更することができます。以下のようになります：

<table>
  <caption>
    付款紀錄
  </caption>
  <thead>
    <tr>
      <th>方案內容</th>
      <th>金額</th>
      <th>數量</th>
      <th>贊助日期</th>
      <th>贊助狀態</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="方案">一枝草一點露，一人一百支持</td>
      <td data-label="金額">$100</td>
      <td data-label="數量">1</td>
      <td data-label="贊助日期">2016-12-26</td>
      <td data-label="贊助狀態">付款成功</td>
    </tr>
    <tr>
      <td data-label="方案">一枝草一點露，一人一百支持 TingChi</td>
      <td data-label="金額">$100</td>
      <td data-label="數量">1</td>
      <td data-label="贊助日期">2016-12-26</td>
      <td data-label="贊助狀態" data-status="fail">
        付款失敗
        <div class="repay-information">
          <button>重新付款</button>
          <button>刪除紀錄</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

変更後

これにより、モバイル上でもスクロールが必要ありません。

{% raw %}

{% endraw %}

table {
  width: 100%;
  font-family: "PingFang TC";
  td {
    text-align: cetner;
  }
}

@media screen and (max-width: 500px) {
  table > thead {
    border: 0;
    display: none;
    position: absolute;
  }
  tbody tr {
    border: 1px solid #aaa;
    margin-bottom: 1em;
    display: block;
  }

  td:first-child {
    display: block;
    font-weight: bold;
    text-align: center;
  }

  td:not(:first-child) {
    margin-top: 1em;
    margin-bottom: 1em;
    display: block;
    text-align: right;
    &:before {
      float: left;
      content: attr(data-label);
    }
  }
}

結論

テーブルはデータの表示に非常に便利であり、幅の計算や等高設定などはすでに実装されています。バックエンドを作成する際、テーブルはデータを表示する際に欠かせないレイアウトの一つです。

テーブルのデザインには注意が必要な点がいくつかあります。この記事では、テーブルを作成する際に注意すべきポイントと簡単な実装をいくつか紹介しました。将来的に他の事項があれば順次追加していきます。