適切なテーブルをデザインする方法

一つの事実を認識しておこう。table は閲覧するためのものであり、派手なビジュアルのために使うものではない

最近、僕が担当している管理画面でテーブルを使う要件が頻繁にあり、ユーザーにとって使いやすい table をどうデザインするかは一つの挑戦だと感じている。特にデータ件数やカラム数が多い場合、ユーザーは余計な要素に気を取られやすくなる。実のところ、データを提示する上で table は依然として非常に効果的なレイアウト手法であり、その特性のおかげでレイアウトをより手軽に組むことができる。

HTML における table

HTML の table はいくつかのタグで構成されている：

• thead：ヘッダー行のタイトルを定義
  • tr：ヘッダーの行（row）を定義
  • th：見出しを定義
• tbody：テーブルの本体（コンテンツ）を定義
• tfoot：テーブルのフッター部分を定義

table の幅を無理に 100% に広げない

table の幅はコンテンツ自身に決めさせると良い。幅を目一杯広げてしまうと、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;
}

不要な色と border を削除する

一見するとカラフルだが、ユーザーにとっては border や背景色が視覚的なノイズになってしまう可能性がある。親切心からのデザインに見えても、かえって目的のデータを見つけにくくしてしまう。

シンプルなグレースケールで識別させ、枠線の色を消す（あるいは薄くする）ことで不要なノイズを取り除き、ユーザーがデータを見つけやすくしよう。

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

一般的にテキストは左揃え、数値は右揃えにする。数値が動的に変化する場合は、font-variant-numeric: tabular-nums（フォントが対応している場合）を追加して、数値の変化によって幅がガタガタ動くのを防ぐことができる。

シンプルなソートと検索を提供する

管理画面では、ユーザーがテーブル内のデータを頻繁に検索することがある。都度 Ajax リクエストでデータを更新する方法もあれば、フロントエンドで実装する方法もある。シンプルなソート機能を提供してユーザーが素早くデータを見つけられるようにしたり、簡単な検索機能を用意すると便利だ。

余談：ソートは実は直接 element.appendChild を使って実現できる。appendChild しようとするノードがすでに親要素内に存在している場合、新しいノードが追加されるのではなく位置が移動する。

また、スクリーンリーダーに現在のソート状態を理解させるため、aria-sort を追加すると良い：

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

シンプルな @print を考慮する

請求システムや各種ログなどの場合、運用担当者は Web 上で閲覧するだけでなく、テーブルの内容を印刷する必要があるかもしれない。そんなときは @media print を使って印刷用のスタイルを調整できる。例えば font-size の指定には pt を使い、色をモノクロにし、余白を詰めるなど、考慮すべき細部が存在する。

レスポンシブ対応

従来の table でスマートフォン対応を行う際、通常は横スクロールで表示することが多い。しかし、スマホでの頻繁なスクロールはユーザーにとってあまり理想的な操作体験とは言えない。

data-* 属性と CSS の疑似要素（pseudo-elements）を組み合わせることで解決できる。スマホでは各行（row）の表示を縦並びに切り替える。このような形だ：

<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);
    }
  }
}

まとめ

table はデータの提示において非常に便利であり、幅の計算や高さの均等化も自動で行ってくれる。管理画面を制作する際、table はデータを確認する上でほぼ不可欠なレイアウトの一つだ。

table のデザインにはいくつかの勘所（コツ）がある。この記事では table を作成する際に気をつけるべきポイントと簡単な実装例を紹介した。今後、他にも共有したい事項があれば順次追記していく予定だ。