HOME > WEBデザイン・制作 > WEBデザインのネタ > table + css で見栄えのいいきれいなtableを作成

table + css で見栄えのいいきれいなtableを作成

WEB標準が騒がれて以降、出番がぐっと減ったtable。

WEB標準が騒がれて以降、出番がぐっと減ったtable。とはいえ減ったのはレイアウト目的でのtable利用で価格表などの表組みはtableでやったほうがきれいに収まるのでまだまだ現役。

そんなtableをcssを利用してきれいで見やすいものに変えて見ましょう。javascript を利用してソートできたりスクロールできたりする特殊なやつは別ページで解説予定

基本table HTMLソース

このページのテーブルは下記のテーブルをCSSでデザインしています。
実際のソースを見るとわかるのですがtrにclassは設定していなくてJavascriptで設定しています。

HTML

class 設定用 Javascript

JavaScript

<script language="javascript" type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
var tr = document.getElementsByTagName("tr");
for(var i=0; i<tr.length; i++){
if (i % 2 == 0) {
tr[i].className = "even";
}else{
tr[i].className = "odd";
}
}
});
</script>

table Type01

元ネタはA CSS styled table。
非常にきれいなtableだったので再現してみました。まぁ本家は画像とかもっときっちり作ってありますのでそちらを参考にしてもよいでしょう。

WEB Design Tools	開発元	カテゴリ	評価
DreamWeaver	adobe	エディタ	★★★☆☆
Fireworks	adobe	WEBグラフィック作成	★★★☆☆
Photoshop	adobe	画像編集	★★★☆☆
3ds Max	Autodesk	3DCG	★★★☆☆
Movable type	シックスアパート	CMSツール	★★★☆☆

CSS

table Type02

縦線をカットすることですっきり見えますね。

WEB Design Tools	開発元	カテゴリ	評価
DreamWeaver	adobe	エディタ	★★★☆☆
Fireworks	adobe	WEBグラフィック作成	★★★☆☆
Photoshop	adobe	画像編集	★★★☆☆
3ds Max	Autodesk	3DCG	★★★☆☆
Movable type	シックスアパート	CMSツール	★★★☆☆

CSS

table {
border: 1px solid #000000;
}
a {
color: #A50000;
font-weight: bold;
}
thead th,
thead td
{
color: #FFFFFF;
text-align: center;
padding: 2px 20px;
background: #414141 url(../img/type02/thead_bg.jpg) repeat-x left top;
font-weight: bold;
}
tbody th {
text-align: left;
color: #333333;
}
tbody th,
tbody td {
padding: 2px 20px;
border-bottom: 1px dotted #000000;
}
tr.odd {
background-color: #EEEFFF;
}