できるだけキレイなコード[CSS編]※随時更新

価格表などの複雑な表はdl,dt,ddを利用する。

理由は、スマホユーザーが増え表が横より縦のほうが見やすいため。

また、縦の指定がテーブルタグでは指定できずコードが多くなってしまうため。

dl, dt, ddとCSS3 Flexible Boxを利用したスマホに対応したCSSの例

dl, dt, dd {
  box-sizing: border-box;
  border: 1px none #ccc; /* 共通のborderを定義。ただし、border-styleをnoneにし、初期状態では非表示にする */
}

dt, dd {
  margin: 0;
  border-top-style: solid; /* 上のborderを表示 */
  padding: 10px;
}

dl {
  display: flex; /* Flexible Boxを有効化 */
  flex-wrap: wrap; /* はみ出そうな時の折り返しを有効化 */
  border-style: none solid solid; /* 上を除く、全てのborderを表示 */
}

dt {
  width: 40%; /* 幅を指定 */
  background: #eee; /* dt要素のための背景色を指定 */
}

dd {
  width: 60%; /* 幅を指定 */
  border-left-style: solid; /* 左のborderを表示 */
}

参考：@sounisi5011さん