以下の画像のような特徴をもったテーブルの作成方法がわかりません。

(画像の例)
・黒いアウトライン
・その黒いアウトラインの内側に白いライン
・テーブル内はグラデーション

よくこのようなテーブルを見かけるのですが、どのように作成するのでしょうか?
特にグラデーション部分は画像で用意するのでしょうか?そうした場合、テーブルの各セルの大きさが以下の画像のように様々であった場合はそのセルにあった画像を用意するということでしょうか?

お手数ですがご説明、もしくは参考サイトなどを教えてください。
よろしくお願いします。

「独特なテーブルの作成法について」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (3件)

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

(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>
    • good
    • 0

>独特なテーブル


 見た目、「独特」なのは「グラデーション」の部分のみかと存じます。

 構造上は、<table> タグの入れ子にすればよいかと。

>・黒いアウトライン
 外側のテーブルの背景色を黒色に設定し、1列×3行のテーブルにします。

>・その黒いアウトラインの内側に白いライン
 2行目の背景色を白色に設定します。

>・テーブル内はグラデーション
 2行目のセルに入れ子で3列×3行のテーブルをいれ、CSS などで背景をグラデーションにします。
http://www.google.com/search?q=table+%E8%83%8C%E …
    • good
    • 0

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


ずばりそのwebサイト(ページ)をブラウザで丸ごとローカルに保存してしまって、HTML構成とかを確認してみれば良いのでわ?
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング