独特なテーブルの作成法について

Question

以下の画像のような特徴をもったテーブルの作成方法がわかりません。

（画像の例）
・黒いアウトライン
・その黒いアウトラインの内側に白いライン
・テーブル内はグラデーション

よくこのようなテーブルを見かけるのですが、どのように作成するのでしょうか？
特にグラデーション部分は画像で用意するのでしょうか？そうした場合、テーブルの各セルの大きさが以下の画像のように様々であった場合はそのセルにあった画像を用意するということでしょうか？

お手数ですがご説明、もしくは参考サイトなどを教えてください。
よろしくお願いします。

noname#137826 · Accepted Answer

方法は複数あるでしょうから、「よく見かける」のであればそのソースを見比べてみるというのが良いのだと思います。

(No. 1さんと同意見)

すぐに思いつくのは、安直ですが、td要素の中にdiv要素を入れることですね。
すると、

・黒いアウトライン　→　td要素のborder
・その黒いアウトラインの内側に白いライン　→　td要素のpadding
・テーブル内はグラデーション　→　div要素のbackground

ということで実現可能です。(下記サンプル参照)
グラデーションに関しては、縦方向のグラデーション画像を用意しておいて(幅は1pxでもよい)、横方向に繰り返す背景画像として指定する(background-repeat: repeat-x;)とよいでしょう。

---

<html>

<head>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid #000;
padding: 5px;
}
div {
width: 3em;
height: 3em;
background-color: red;
}
</style>
</head>

<body>
<table>
<tr>
<td><div></div></td><td><div></div></td><td><div></div></td>
</tr>
<tr>
<td><div></div></td><td><div></div></td><td><div></div></td>
</tr>
<tr>
<td><div></div></td><td><div></div></td><td><div></div></td>
</tr>
</table>
</body>

</html>

DOUGLAS_ · Answer

＞独特なテーブル
　見た目、「独特」なのは「グラデーション」の部分のみかと存じます。

　構造上は、<table> タグの入れ子にすればよいかと。

＞・黒いアウトライン
　外側のテーブルの背景色を黒色に設定し、１列×３行のテーブルにします。

＞・その黒いアウトラインの内側に白いライン
　２行目の背景色を白色に設定します。

＞・テーブル内はグラデーション
　２行目のセルに入れ子で３列×３行のテーブルをいれ、CSS などで背景をグラデーションにします。
http://www.google.com/search?q=table+%E8%83%8C%E6%99%AF+%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3&rls=com.microsoft:ja:IE-SearchBox&ie=UTF-8&oe=UTF-8&sourceid=ie7

4017B · Answer

“よく見かける”のであれば…。
ずばりそのwebサイト(ページ)をブラウザで丸ごとローカルに保存してしまって、HTML構成とかを確認してみれば良いのでわ？

独特なテーブルの作成法について

方法は複数あるでしょうから、「よく見かける」のであればそのソースを見比べてみるというのが良いのだと思います。

＞独特なテーブル

“よく見かける”のであれば…。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング