CSSでtable要素を綺麗に表示する

Bloggerテンプレートのtable要素の見た目に満足できなかったので変更したコードです。

結果

順位	タイトル	価格
1	漫画 君たちはどう生きるか	￥1,404
2	モデルが秘密にしたがる体幹リセットダイエット	￥1,080
3	はなになりたい	￥1,296

CSSコード

table {
  width: auto;
  background: #fff;
  color: #444;
  font-size:14px;
  border-collapse: collapse;
}
table th {
  background: #ddd;
  color: #000;
  text-align: center;
}
table th,
table td {
  padding: 0 10px;
  border: 1px solid #aaa;
}
table tr:hover {
  background: #eee;
}

参考サイト

• StackEditの表をBloggerできれいに表示
• CSS3を使って美しく装飾されたテーブルの作り方