- ベストアンサー
テーブルをスマートなソースで書く方法
テーブルを作りたいと思っているのですが HTML・CSSでできるだけスマートなソースで書く方法がうまく思いつきません。 セルの枠とセル内の色のある部分を3ピクセルほど開けて背景の画像が透けて見えるようにしたいのですが、 1ピクセル幅で白い枠を作る＆背景の透けている空白部分は3ピクセルの空セル、というやり方でHTMLのみで組んだり CSSのボックスを使って組んでみたりしましたが 画像どおりのものはできるもののもっと簡単な書き方があるように思えます。 なんだかものすごく簡単なことを聞いていて恥ずかしいのですが、案をお持ちの方どうぞよろしくお願いいたします。
- trico79
- お礼率100% (4/4)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
もう一つ理解できている自身がないけど、 素直に書くと以下のような感じでしょうか？ (TDの中にdivを一つおいています) <html> <head> <title>test</title> <style type="text/css"> <!-- body{background-color:#ccc;} table{border:1px solid white;} td{border:1px solid white;padding:3px;} td div{background-color:#cff;padding:2px;} --> </style> </head> <body> <table> <tr> <td><div>セルの内容</div></td> <td><div>セルの内容</div></td> </tr><tr> <td><div>セルの内容</div></td> <td><div>セルの内容</div></td> </tr> </table> </body> </html>
その他の回答 (1)
- EV2
- ベストアンサー率12% (2/16)
もし宜しければ、トピ主さんがお考えになったHTMLでの方法を載せていただけませんか？ そしたら回答できるかもしれません。 私も今CSSを勉強していますので＾＾ 宜しくお願いします。
お礼
レスありがとうございます。 実はこの質問はわかりやすいよう画像URLを貼って 「このようなテーブルを作りたいのですが」と書いていたのですが URL貼付けはガイドラインに反するらしく該当部分が削除されてしまい こういったなんだか意味がわからない質問文になってしまいました。 すぐ削除を要請すればよかったのですが 直後に事情でネットに繋げない環境になり放置したままになってしまい EV2さんにもお礼を申し上げるのも遅れてしまいました。 大変申し訳ございませんでした。 そしてこんな質問にレスをくださって本当にありがとうございます。 質問の内容はあれから自分なりに勉強をして 最初考えていた方法よりはいくらかスマートに書けるようになりました。 複雑なテーブルで画像を見ていただくほかにうまく説明できませんので URL等を載せることはできませんが… お手数おかけいたしました、どうもありがとうございました！
補足
ごめんなさい、最後日本語変ですね。 複雑なテーブルで画像を見ていただくほかにうまく説明できませんので URL等を載せることはできませんが… ↓ 複雑なテーブルで画像を見ていただくほかにうまく説明できませんので URL等を載せて「こうしたよ」と報告できないのが申し訳ありませんが… というかんじに脳内補正してください、すいませんー
関連するQ&A
- Dreamweaverでテーブルを作ると
Dreamweaver初心者なので初歩的な質問だとは思うのですが、よろしくお願いします。 ページを作成するときにテンプレートとしてテーブルを中央上に固定し、幅を700ピクセル、真ん中のセルを入れ子にして編集可能領域にしたいのですが。そこで問題があります。 〔1〕どうしてもテーブルの上と左に空白ができてしまいます。 〔2〕なにか微妙に縦の線（セルの幅）がずれているようです。 ■なにかよいページの設定やＣＳＳ、テーブルの設定方法があるのでしょうか？ ■理想としては http://www.nikkansports.com/ のような感じにしたいのです。 ■上のページのようにテーブルの横に影のような背景をつけたいのですがどのようにすればよいでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- HTMLでテーブル内の背景画像固定方法は？
HTMLでテーブルの背景に画像を指定することは可能ですが、その背景画像を繰り返さないように指定したり、位置を指定したりすることはできるのでしょうか。 CSSではなくHTMLで指定できるのかどうか、また出来るのであればそのサンプルを教えて頂けると助かります。
- 締切済み
- HTML
- テーブルの角を丸くするには？
テーブルの背景を入れて、その背景の角を丸くしようと思っていますが、ＨＴＭＬでの、角を丸くするやり方だと、ソースが多くなって、 ただでさえ、複雑になるのに、さらに複雑になって大変なので、 ＣＳＳや他のもので、角を丸くする方法はありますか？
- ベストアンサー
- HTML
- Dreameweaver テーブルの作成について
お世話になります。 Dreamweaverでのテーブルの作成について質問させていただきます。 ２行３列のテーブル。 （１列目幅３０ピクセル２列目幅７４０ピクセル3列目幅３０ピクセル） ２行目は３列を結合させて１つのセルにしています。 そこに横幅８００ピクセル画像を挿入しています。 けれどもどうしても、画像とテーブルの間に隙間が開いてしまっています。 レイアウトモードでみると８００（８０１）となっています。 この()の意味と、どのようにしたら画像の幅とテーブルの幅がぴったりになるのでしょうか。 初心者で、質問が上手くできていないかもしれませんが、宜しくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- テーブル入れ子にしたらNNではダメ？
赤い背景画像を使ったHTMLにテーブルを3個入れ子で載せました。 下のテーブルのセルに白色、中のテーブルのセル色にグレー、一番上のテーブルのセルに白色を指定しました。 そこへラジオボタンをつけたのですが、本来、枠がない丸いボタンのところに赤の枠ができてしまいます。 IEでは問題ないのですが、NN4.7で確認したらこうなっていました。 デザインを変えずに回避する方法があったら教えてください。 また、NN6.*～だったらOKということはありますか？
- ベストアンサー
- HTML
- ドロップシャドウをつけた画像をテーブルのセル内に
CSSでドロップシャドウをつけた画像をテーブルのセル内に置くにはとのようなソースになりますでしょうか。 CSSでドロップシャドウをつけた画像はできましたがセル内に置く方法がわかりません。 宜しくお願いします。
- 締切済み
- 在宅ワーク・SOHO
- このテーブルをCSSで書くとどうなりますか？
画像を参照願えますでしょうか。 左側100pxの右側は400pxで合計幅500pxあります。 （右側1行左側3行です。） これをテーブルレイアウトではなく、divとcssで書くとどんなhtmlになりますか？ 現在段組を色々やってますが、自問自答してもこのパターンだけが解決できないので・・・ 同じようにＨＴＭＬに興味ある方や詳しい方がいらっしゃいましたらご教授願います。 お答えの際にはＨＴＭＬソースを希望します。
- ベストアンサー
- HTML
- テーブルの隙間について
テーブルについてあまり理解できていませんが、理解しようとやってはみるもののうまくいきません。 今までビルダーの６ではなんとなくできたからこれでいいやでやってきました。ですからテーブルなど自分がややこしいと思ったものは使わずにきました。 ですがホームページビルダー１０を手に入れ、今ホームページをリニューアル中でして、今回は自分で満足できるものを作りたいと思っています。 ですがテーブルがどうもうまくいきません。 セルとセルの繋がるところがうまくいかず画像を入れると隙間ができてしまいます。罫線の幅を０にして枠表示のチェックもはずしているのですが画像が繋がってくれません。 どうしたらよいのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- CSSでテーブルのセルが、a:hover で背景を変わるようにしましたが、枠がちらついてしまいます。
テーブルのセルに、リンクのあるテキストをはって、 a:hoverで背景が変わるようにしたのですが、 hoverの状態でセルの外側だけ背景が変わらずに、hover状態でないときの背景がほんの少しちらついてしまいます。 table .a{border: 0px;background-color:red;;padding: 2px;width: 150px;} table .a a:hover{border:0px;padding: 2px;width: 150px;background-color:orange;} のようにすると、 hover状態で、セルの枠が、ほんの少しredのままになってしまいます。 http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ の 3.BOX の例のように、hover状態できれいに背景の色が変わるようにしたいんですが、どう直せばいいでしょうか。よろしくおねがいいたします。
- ベストアンサー
- HTML
- ページミルではテーブルと画像が並べられないの？
こんにちは。私はページミルを使いHP作りに挑戦してます。 属性パレットにぺろっと画像をはり付け、きれいな背景ができたのは いいんですが、そこに字をのせるととてもごちゃごちゃしています。 そこで、写真立ての枠のようにページの周囲だけその背景を使いたい と思い、真ん中にwidth=400 height=600くらいの背景白色のテーブルを つくってみました。 見かけは、理想通りになりました。 ところが、テーブルの中身はいいんですが、テーブルの外では カーソルの幅がテーブルの高さと同じになり、テーブルの横に 画像を貼ることができません。 どうすればいいのでしょうか？ つけ加えておきますが、私はテーブルを使いたいわけではなく、 周囲だけを柄物の背景にしたいだけなんです…。 それが無茶なことなんでしょうか…。
- ベストアンサー
- その他(ソフトウェア)
お礼
レスありがとうございます。 実はこの質問はわかりやすいよう画像URLを貼って 「このようなテーブルを作りたいのですが」と 書いていたのですが URL貼付けはガイドラインに反するらしく該当部分が削除されてしまい こういったなんだか意味がわからない質問文になってしまいました。 すぐ削除を要請すればよかったのですが 直後に事情でネットに繋げない環境になり放置したままになってしまい steel_grayさんにもお礼を申し上げるのも遅れてしまいました。 大変申し訳ございませんでした。 そしてこんな質問にレスをくださって本当にありがとうございます。 質問をした時点ではボックスやマージンを理解していなかったのですが 自分なりに勉強をして最初はsteel_grayさんの書いてくださったような感じで作りました。 が、デザイン上ボックスでは不都合な点が出てきたので 結局原始的にテーブルで組みました… ですが最初考えていた方法よりはいくらかスマートに書けるようになりました。 複雑なテーブルで画像を見ていただくほかにうまく説明できませんので URLを貼ってお見せできないのが申し訳ないです… お手数おかけいたしました、どうもありがとうございました！