- ベストアンサー
独特なテーブルの作成法について
以下の画像のような特徴をもったテーブルの作成方法がわかりません。 （画像の例） ・黒いアウトライン ・その黒いアウトラインの内側に白いライン ・テーブル内はグラデーション よくこのようなテーブルを見かけるのですが、どのように作成するのでしょうか？ 特にグラデーション部分は画像で用意するのでしょうか？そうした場合、テーブルの各セルの大きさが以下の画像のように様々であった場合はそのセルにあった画像を用意するということでしょうか？ お手数ですがご説明、もしくは参考サイトなどを教えてください。 よろしくお願いします。
- suffre
- お礼率76% (2013/2633)
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （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>
その他の回答 (2)
- DOUGLAS_
- ベストアンサー率74% (397/534)
＞独特なテーブル 見た目、「独特」なのは「グラデーション」の部分のみかと存じます。 構造上は、<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
- ベストアンサー率73% (1305/1776)
“よく見かける”のであれば…。 ずばりそのwebサイト(ページ)をブラウザで丸ごとローカルに保存してしまって、HTML構成とかを確認してみれば良いのでわ？
関連するQ&A
- 角丸テーブルのつくり方！
どうしてもホームページに角丸テーブルを作りたく、日々奮闘しておりますが、なかなかうまくいきません。。。http://d.hatena.ne.jp/tikeda/20060501/1146444788 こちらのサイトを見つけ、早速ＤＬし、９番の内側にシャドウがついた角丸を作成したく、以前の質問で教えて頂いた、 http://heo.jp/tag/kowaza/omoshiro/10.html を参考に、３×３のテーブルを挿入し、 セルに一づつＤＬした画像を・・・入れているのですが、どうもいまいちわかりません。ＤＬしたＺＩＰファイルを解凍すると色々出てくるのですが、９番のものは６個gif画像が入っていました。 こちらをただ、セルに挿入してTable Borderタグに、<Table Border Cellspacing="0" Cellpadding="0">を追記する・・・という手順はわかったのですが、Zipファイルの画像がどのセルにどこの画像をいれていいか（どこにどれを入れていいか）イマイチ解りにくくて本当に困っております。 やってはみたのですが、入れるセルと入れる画像が間違っているのか、 それともハナから私の角丸テーブルに対する概念が間違いなのか わけがわかりません。、<Table Border Cellspacing="0" Cellpadding="0">を追加したら、一番上の画像だけずれて表示されてしまうのです。 ご親切に教えてくれる方居ましたら、宜しくお願い致します。
- ベストアンサー
- HTML
- htmlで作成するテーブルの横線の太さを変えたい
よろしくお願いします。 htmlでテーブルを使用しての表を作っているのですが、 見やすくするために横線の太さを変えたいと思っています。 基本的なhtmlタグとスタイルシートの書き方は理解できますが、以下のよう作る方法が どうしてもわかりません。 10×10のセルのテーブルとした時に、 1. 全体の外枠は3pxの太さ。 2. 内側の縦線はすべて1px。 3. 3行おきに、セルの下部分の太さを2pxにしたい。（3行おきに区切り線を表示したい） もし無理であれば、全体の外枠と3行おきのセル下部分の太さが同じ（2px)でもよいです。 どなたかご返答よろしくお願いいたします。
- ベストアンサー
- HTML
- テーブルのセル内を半透明に
縦２段×横３マスのテーブルに背景画像をつけ、６マスのセルはそれぞれ半透明の白色の背景にしたいのですが、宜しければタグを教えて頂けないでしょうか。 色々なHP作成支援サイトを参考にさせて頂いたのですが、パソコン初心者の為、よく分かりませんでした。 お手数をおかけしますが、教えて頂けますと嬉しいです。 宜しくお願い致します。
- ベストアンサー
- HTML
- DreamWeaver8 テーブル間のセル行幅変更
DreamWeaver8にて4行3列のテーブルを作成しました。 各セルの中に画像を隙間なく埋め込もうとしているのですが、 画像の上下に余白がついてしまうので、セル幅を変えようと セルのラインをクリック→ドラッグして行幅を狭くしたいのですが、 他の動かしたくないセルの行幅までも動いてしまい、テーブル全体が 大きくなってしまいます。 任意の１つのセルのみ行列幅を変更したい場合はどのように すればよろしいのでしょうか。
- 締切済み
- ホームページ作成ソフト
- Dreameweaver テーブルの作成について
お世話になります。 Dreamweaverでのテーブルの作成について質問させていただきます。 ２行３列のテーブル。 （１列目幅３０ピクセル２列目幅７４０ピクセル3列目幅３０ピクセル） ２行目は３列を結合させて１つのセルにしています。 そこに横幅８００ピクセル画像を挿入しています。 けれどもどうしても、画像とテーブルの間に隙間が開いてしまっています。 レイアウトモードでみると８００（８０１）となっています。 この()の意味と、どのようにしたら画像の幅とテーブルの幅がぴったりになるのでしょうか。 初心者で、質問が上手くできていないかもしれませんが、宜しくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- 複数端末に同一テーブルを作成する方法はありますか？？
MySQLを入れた複数の端末に同一のテーブルを作成し、同一のデータを格納する必要が出てきました。 ファイルを用意して、そのファイルを各端末のMySQLにかませることで、簡単にテーブル作成ができたりしないでしょうか？？？ 方法でなくても、参考となるサイトを教えていただけるだけでも、大変助かります。 また、不可能であればその旨を教えていただけると、諦めがつきますので、よろしくお願いします。
- ベストアンサー
- MySQL
- ACCESSのテーブル作成クエリについて
お世話になっております。 以下の点について教えてください。 1.テーブル作成クエリで作ったテーブルの書式固定 クエリ実行後、テーブルは作成されるのですが、クエリで設定した書式が 反映されません（例：数値→標準→小数点以下3)。 クエリで設定した書式をテーブルに反映させる方法を教えてください。 現在は、テーブル作成クエリ実行後、いちいち、テーブルの書式を変更しております。 2.ユーザー設定モードでのオブジェクト移動 ・ACCESSをユーザー設定 ＆ グループでフィルターの状態で使っています。 ・この状態でテーブル作成クエリとテーブル作成クエリ実行後に作成されるテーブルを グループ分けして分類しておりますが、各グループにあるテーブル作成クエリを 実行すると、グループ内にあったテーブルが「割り当てられていないオブジェクト」に 移動してしまいます。 テーブルをグループ内に固定する方法を教えてください。 よろしくお願いします。
- ベストアンサー
- オフィス系ソフト
- イラストレーターで複数のオブジェクトに一つのグラデーションを付けたい２
画像添付のため、再質問させていただきます。 イラストレーター（Vre.10）で5つの文字をアウトライン化したものに グラデーションを付けたいと思っております。 文字のアウトラインを取り、パスのオフセットで３重のパスを作り、 全ての線を黒にし、塗りの部分を 虹色（全体で一つの虹色）のグラデーションを付けたいのですが、 どうしてもそれぞれ個別の虹色になってしまいます。 ※横から見た図 文字 文字 文字 上記の様に少しずつずらして、３Ｄ風にしたいと思っております。 塗りと線を分けてしまうと重なっているラインが出てしまうので、 塗りと線を分けずにグラデーションを掛けたいのですが、 良い方法はありますでしょうか？ 説明が不明瞭な場合はいくらでも補足致します。 お手数ですが、よろしくお願い致します。
- ベストアンサー
- グラフィックソフト
- テーブルのセル内のマージン
テーブルのセル内のマージンをセルごとに変更する ことはできますか？ テーブルでわけて、セル内にインラインフレームや画像、テキストデータを入れたいのですが、画像とインラインフレームはセルいっぱいまで、テキストはマージンをとりたい場合どうしたらよいのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- Opera等でもグラデーションを利用できるよに
お世話になります。 テーブルの背景にグラデーションを利用したいのです。 IEであればスタイルシートで filter: progid:DXImageTransform.Microsoft.gradient (startcolorstr=#FFFFD9, endcolorstr=#FFFF99, gradienttype=0); のように記述すればよいと思うのですが、Opera等ではそれができません。 なので、テーブルの背景にグラデーション画像を用意しようと思ったのですが、 グラデーションは縦に色が変わっていきたいのです。 横に変わっていくのであれば、横幅は固定なので その画像が繰り返し表示されれば問題ないと思うのですが。 縦のグラデーションでかつテーブルの高さは可変です。 画像よりテーブルが大きくなってしまった場合には、繰り返されてしまいます。 テーブル枠にあわせて、背景の画像の大きさも替えることはできないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
